Categorie
WordPress e dintorni

Menù personalizzato: come aggiungerne uno nel tuo tema WordPress

Può darsi che tu abbia necessità di aggiungere un menù personalizzato in un punto del template dove non è previsto. Qui di seguito, ti scrivo come puoi fare: devi conoscere un po’ di linguaggio di programmazione per il web (php, mySQL, html5, css), quel tanto che ti basta per muoverti con un certo “relax” fra le righe di codice. Se non hai questa competenza, chiedi a qualcuno di aiutarti.

Prima di cominciare

Anzitutto, fai un bel backup completo del sito/blog. Completo, significa che devi scaricare tutti i file dello spazio web (via FTP, con programmi tipo Filezilla o dal pannello FTP del tuo hosting) e fare un salvataggio anche del tuo database (esistono dei plugin che fanno questo lavoro oppure, sempre dal pannello dell’hosting, accedi a phpmyAdmin o similia). Metti tutto al sicuro sul tuo pc o su un’unità di memoria esterna, lontano da possibili pasticci.

1) Crea il tuo Child Theme

Se non hai ancora un child theme è ora di farlo.

Crea sul tuo PC una cartella dal nome nome-template-child, dove al posto di nome-template scrivi il nome del tuo tema grafico. Copia dentro a questa cartella il file immagine con l’anteprima del template, o creane uno tuo (con lo stesso nome ed estensione), per riconoscere il tema child dall’anteprima, nel pannello d’aspetto di WordPress.

Crea un file, style.css, vuoto, e un file functions.php vuoto.

Nel file style.css scrivi quanto segue:

/*
Theme Name:     Nome-template Child
Theme URI:      http://example.com/
Description:    Tema Child per il tema Nome-template
Author:         Qui il tuo nome
Author URI:     http://example.com/about/
Template:       nome-template
Version:        0.1.0
*/

Le righe fondamentali sono due: Theme Name e Template. Il resto puoi anche ometterlo.

Nel file functions.php scrivi quanto segue, dopo l’apertura del file ‘<?’:

add_action( 'wp_enqueue_scripts', 'enqueue_parent_theme_style' );
function enqueue_parent_theme_style() {
wp_enqueue_style( 'parent-style', get_template_directory_uri().'/style.css' );
}

Queste righe di codice ti permetteranno di aggiungere il tuo stile personalizzato (quello che scriverai nello style.css del tema child) allo stile di default del tema genitore, al posto dell’istruzione @import url(…).

2) Registra un nuova locazione di menù

Crea una nuova locazione di menù aggiungendo le seguenti righe a functions.php, dopo le precedenti:

function register_my_custom_menu() {
register_nav_menu( 'custom', __( 'Custom Menu' ) );
}
add_action( 'init', 'register_my_custom_menu' );

Bene, carica via FTP la cartella nome-template-child, accedi al pannello di controllo di WordPress, spostati in Aspetto, seleziona e attiva il tema child.

Ora, se apri Aspetto>Menù dal pannello di controllo di WordPress, vedrai visibile la nuova posizione nell’elenco delle posizioni possibili:

menu-personalizzato: come aggiungerne uno al tuo tema WordPress

 

3) Richiama il menù

Ora devi solo posizionare il menù aggiuntivo dove lo desideri, nel punto del tema dove vuoi che sia visualizzato.

Dove vuoi posizionare il tuo menù personalizzato? Orizzontalmente, in cima alla pagina? o nel footer? Cerca nel tema del tuo template il file che gestisce la visualizzazione del punto dove vuoi posizionare il tuo menù personalizzato e fanne una copia, sul tuo PC, sempre nella cartella nome-template-child.

Per esempio, se lo vuoi nell’header, copia il file header.php dal tema genitore nella cartella che contiene il tema child sul tuo PC, aprilo e aggiungi nel punto opportuno:

<nav>
 <?php wp_nav_menu( array( 'theme_location' => 'custom','menu_class' => 'nav-custom-menu', 'menu_id' => 'top-nav-custom' ) ); ?>
</nav>

Se volessi aggiungerlo in footer, fai la stessa cosa col file footer.php, variando i parametri passati alla funzione wp_nav_menu (ad esempio:

'menu_id' => 'bottom-nav-custom'

Fatto questo, carica questo file via FTP nella cartella del tema child, questo ultimo file che hai modificato (o ricarica tutta la cartella e sovrascrivila alla precedente).

Quasi finito… Non ti resta che creare un nuovo menù e assegnarlo alla nuova posizione.

Da questo momento in poi sarà visibile in front end e potrai, quindi, lavorare allo styling lavorando sul css, direttamente dall’editor di WordPress (Aspetto>Editor, e selezionando il file style.css che troverai vuoto).

Se qualcosa non ti è chiaro, scrivimi un commento e per quel che mi è possibile, proverò a risponderti.

 

Ultimo aggiornamento:

Share the love

Di Margherita Pelonara

WordPress FrontEnd Designer.
Co-founder e Organizer di WordPress Meetup Ancona.
Make-up addicted.

Lascia un commento

Il tuo indirizzo email non sarà pubblicato. I campi obbligatori sono contrassegnati *

Questo sito usa Akismet per ridurre lo spam. Scopri come i tuoi dati vengono elaborati.