Ora che sappiamo come creare un tema WordPress di base da zero, diamo un’occhiata a come creare un menu di navigazione personalizzato al nostro tema. Questo menu dovrebbe avere la possibilità di essere controllato dalla Dashboard di WordPress. In altre parole, dovresti essere in grado di andare nella Dashboard e aggiungere o rimuovere i link a qualsiasi pagina, post o categoria che ti piace. Alla fine di questo tutorial, questo è esattamente ciò che avremo. Andiamo avanti e vediamo come raggiungere questo obiettivo.
Aprire header.php
Aprire il file header.php del tema su cui abbiamo lavorato. Il nostro obiettivo sarà quello di aggiungere un menu che viva sopra il contenuto principale del sito, ma sotto il nome del sito e l’area della tagline. Per fare questo, possiamo aggiungere il seguente codice qui sotto:
<!DOCTYPE html><html <?php language_attributes(); ?>><head> <meta charset="<?php bloginfo( 'charset' ); ?>"> <title><?php bloginfo( 'name' ); ?></title><?php wp_head() ?></head><body <?php body_class(); ?>><div class="container"> <header class="site-header"> <h1><a href="<?php echo home_url(); ?>"><?php bloginfo( 'name' ); ?></a></h1> <h4><?php bloginfo( 'description' ); ?></h4> <nav class="navigation-menu"><?php wp_nav_menu() ?> </nav> </header>Nota che facciamo uso di una funzione speciale fornitaci da WordPress di wp_nav_menu(). Questa funzione si prende cura di tutto il lavoro per voi nella costruzione di un menu personalizzato. Non devi digitare manualmente tutto l’html da solo, quindi questo è abbastanza utile. Ora non abbiamo ancora molto in termini di pagine, ma se visitiamo il nostro sito di prova, la funzione sta già producendo un link alla pagina di esempio che esiste sulla nostra installazione.
Passare argomenti alla funzione wp_nav_menu()
Come la maggior parte delle funzioni in WordPress, è possibile passare argomenti opzionali alla funzione wp_nav_menu(). Qui imposteremo un array e configureremo una sola opzione. Usiamo un array nel caso in cui vogliamo passare più opzioni in futuro. Ecco come potremmo aggiungere questo pezzo di codice.
<!DOCTYPE html><html <?php language_attributes(); ?>><head> <meta charset="<?php bloginfo( 'charset' ); ?>"> <title><?php bloginfo( 'name' ); ?></title><?php wp_head() ?></head><body <?php body_class(); ?>><div class="container"> <header class="site-header"> <h1><a href="<?php echo home_url(); ?>"><?php bloginfo( 'name' ); ?></a></h1> <h4><?php bloginfo( 'description' ); ?></h4> <nav class="navigation-menu"><?php $args = ; ?><?php wp_nav_menu( $args ) ?> </nav> </header>Questa opzione ci dà un modo per nominare certi menu nel nostro tema. Potremmo voler avere più di un menu, e questo è il metodo con cui è possibile differenziare più menu.
Registra la posizione del menu in functions.php
Per poter utilizzare il menu che abbiamo appena creato nel nostro file header.php, dall’interno della dashboard di amministrazione di WordPress, dobbiamo registrare la posizione del menu nel file functions.php del tema. Quindi come possiamo registrare il nostro nuovo menu con WordPress? Possiamo farlo con la funzione register_nav_menus() integrata in WordPress. Registriamo il nostro menu in questo modo.
<?phpfunction custom_theme_assets() {wp_enqueue_style( 'style', get_stylesheet_uri() );}add_action( 'wp_enqueue_scripts', 'custom_theme_assets' );register_nav_menus( );Configura il nostro menu personalizzato nella Dashboard di WordPress
Il nostro nuovo menu dovrebbe ora essere registrato nel core di WordPress. WordPress è ora consapevole del nostro menu e della sua posizione nel tema. Ora possiamo andare nella dashboard, creare un nuovo menu e gestirne la posizione. In particolare, vogliamo farlo apparire dove abbiamo fatto uso della funzione wp_nav_menu(). Visiteremo Appearance->Menus e poi cliccheremo su ‘create a new menu’.
Possiamo chiamare questo menu come vogliamo. Sceglieremo solo Main Menu per mantenerlo semplice, e poi clicchiamo su ‘Create Menu’.
In questo prossimo passo, ci collegheremo a tutte le nostre Categorie. Quindi possiamo scegliere Categories, Select All, aggiornare la posizione di visualizzazione a ‘Primary Menu’, e poi cliccare su ‘Save Menu’. Proviamo.
Visitare il nostro sito ci mostra che ora abbiamo un link ad ogni categoria nel nuovo menu che abbiamo creato. Al momento è solo una lista non ordinata, e non è ancora la più bella – ma funziona! 
Qual è il vantaggio di registrare il tuo menu personalizzato?
Lo so, lo so. Stai pensando che non ha nemmeno senso passare attraverso tutto questo trambusto solo per ottenere alcuni collegamenti ipertestuali ad alcune categorie da visualizzare sul tuo sito. In un certo senso, avete ragione. Perché non costruire manualmente alcune di queste cose da soli? Certo, questo può essere fatto, ma quando costruiamo il nostro menu come abbiamo fatto qui, ora abbiamo il potere della Dashboard di WordPress per controllare il codice che abbiamo incluso nel nostro tema. Ora possiamo facilmente trascinare e rilasciare l’ordine dei link tra le altre cose direttamente dalla Dashboard. Cambiamo l’ordine da WordPress, PHP, JavaScript a JavaScript, WordPress e poi PHP. Molto facile! 
Ora quando si visita il sito, l’ordine dei link nel menu viene aggiornato. Questo approccio non richiede alcun intervento sul codice sottostante.
Stile del menu personalizzato
Quell’elenco non ordinato non è sufficiente! Dobbiamo rendere le cose un po’ più eleganti di così. Passiamo un po’ di tempo ad applicare alcuni CSS personalizzati per pulire un po’ il menu. Prima di tutto, vogliamo trasformare l’elenco non ordinato orientato verticalmente in un menu orientato orizzontalmente. Vorremmo anche rimuovere i punti elenco di ogni elemento della lista, aggiungere un po’ di padding e margine, così come rimuovere la sottolineatura per i link. Ecco un tentativo di creare questo effetto nel nostro file style.css.
/* Nav Menu */.navigation-menu ul { margin: 0; padding: 0;}.navigation-menu ul:before, .navigation-menu ul:after { content: ""; display: table;}.navigation-menu ul:after { clear: both;}.navigation-menu ul { *zoom: 1}.navigation-menu ul li { list-style: none; float: left; margin-right: 3px;}.navigation-menu ul li a:link,.navigation-menu ul li a:visited { display: block; padding: 12px 17px; border: 2px solid #ecf0f1; border-bottom: none; text-decoration: none;}Ci sono un sacco di cose da fare nel CSS elencato sopra. Esaminiamolo. Nel primo selettore .navigation-menu ul, stiamo rimuovendo tutto il padding e il margine dalla lista non ordinata. Poi ci assicuriamo che l’elenco non ordinato cancelli i float dei figli degli elementi dell’elenco. Nel selettore .navigation-menu ul li, rimuoviamo i bullet dall’elenco, facciamo fluttuare gli elementi dell’elenco a sinistra e aggiungiamo un piccolo margine a destra. Alla fine, prendiamo di mira i link. Prima li trasformiamo in elementi a livello di blocco con un padding di 12px verticale e 17px orizzontale. Aggiungiamo un bell’effetto bordo e rimuoviamo la sottolineatura sui link. Controlliamo ora nel browser.
Bene! Quel menu ha un aspetto molto migliore di quello iniziale.
Come aggiungere un colore personalizzato su hover al menu
Lo stile di base è a posto. Potrebbe essere bello avere un po’ di effetto hover quando uno muove il mouse sopra ogni link. Questo è molto facile da configurare usando il seguente snippet:
.navigation-menu ul li a:hover { background-color: #ebf5fb;}
Questo sembra abbastanza buono!
Come puntare allo stato attivo di una voce di menu
Un’altra cosa che potremmo voler aggiungere è la possibilità di personalizzare il colore di un link attivo. Questo è diverso dal semplice effetto hover. In questo caso, quando visitiamo un particolare link dal menu, vogliamo che WordPress sia consapevole che questa è ora la pagina attiva visualizzata e che aggiorni la rappresentazione visiva per riflettere il link attivo. Per fare questo possiamo fare uso di una classe speciale che è costruita in WordPress per affrontare proprio questa cosa. Questa è la classe current-menu-item. Ecco come possiamo incorporarla nel nostro menu personalizzato.
.navigation-menu ul li.current-menu-item a:link,.navigation-menu ul li.current-menu-item a:visited { background-color: #4285f4; color: #ffffff;}Se ora visitiamo il nostro sito e proviamo a visitare i vari link nel menu personalizzato, possiamo vedere che è molto bello. Ora abbiamo un aspetto particolare per lo stato di hover, e un aspetto diverso per lo stato attivo dei link nel nostro menu. Questo è un ottimo modo per assicurarsi che i visitatori del vostro sito sappiano dove si trovano attualmente, mantenendo il menu attivo illuminato per così dire.
Come creare un menu personalizzato in WordPress Sommario
In questo tutorial, abbiamo visto come aggiungere un menu personalizzato al nostro tema personalizzato in WordPress. Abbiamo fatto uso di alcune funzioni di WordPress per aiutarci. La prima che abbiamo utilizzato è stata wp_nav_menu(). Questa funzione può costruire automaticamente una lista non ordinata ed elementi figli per creare la struttura di un bel menu a cui potete applicare lo stile. Ci sono molti argomenti che si possono passare a questa funzione, ma qui ci siamo concentrati solo sulle basi. La prossima funzione che abbiamo utilizzato è la funzione register_nav_menus(). Questa funzione ci permette di comunicare a WordPress il nostro nuovo menu e di agganciarlo nella Dashboard di WordPress. Una volta che il nostro nuovo menu è stato registrato con WordPress, abbiamo scoperto che era facile aggiungere o rimuovere qualsiasi cosa ci piacesse da quel menu, direttamente dalla dashboard di WordPress e senza bisogno di modificare alcun codice nei file del nostro tema. Infine, ci siamo presi del tempo per migliorare l’aspetto del nostro menu utilizzando alcuni stili CSS personalizzati.