Come costruire WordPress Navigation utilizzando wp_nav_menu ()

Ogni tema moderno di WordPress dovrebbe includere molti elementi comuni all'interno del codice. Hard-coding di una navigazione manuale funziona se hai già creato i contenuti, ma non è affatto dinamico.

Il metodo migliore sarebbe quello di creare la propria navigazione WP a livello di programmazione, che un amministratore può quindi collegare a uno dei propri menu.

Nozioni di base di un menu di navigazione

Prima dei numerosi progressi  in WordPress 3.0, gli sviluppatori utilizzavano wp_page_menu () nello sviluppo del tema. Questo produrrà un elenco completo di pagine insieme con un collegamento alla home page, e hai alcuni parametri che sono delineati nel codice. Potresti continuare a utilizzarlo nella tua barra laterale o nella tua area footer se ha senso.

Ma il metodo di navigazione più popolare è il sistema di menu integrato di WordPress. Gli amministratori possono creare tutti i menu personalizzati che desiderano, trascinando e rilasciando i collegamenti per creare gerarchia e struttura manuale. Puoi gestire direttamente  i collegamenti ai post, pagine, categorie, tag, praticamente qualsiasi cosa sul tuo sito.

Il primo passo è scrivere il codice nel file functions.php, che crea il menu di navigazione. Questo può essere fatto con register_nav_menu () o register_nav_menus () se hai più elementi. Questi menu richiedono solo un singolo identificatore chiamato $ location insieme a una piccola stringa descrittiva.

1

register_nav_menu( 'primary', 'Primary Menu' );

$ location è più simile a un ID slug utilizzato per identificare il menu nel tema. Farai riferimento a questo elemento definito all'interno di qualsiasi file di tema PHP che ti serva per apparire. Inoltre, i menu di navigazione inizializzeranno automaticamente il supporto per i temi, quindi non è necessario utilizzare add_theme_support () per i menu.

Posizioni nel tuo tema

Con l'impostazione del menu  in functions.php,  dovremmo passare agli altri file del tema. Iniziamo da una posizione tipica come header.php dove possiamo aggiungere il codice molto semplice. Questo esempio viene copiato dal codice wp_nav_menu () e include tutti i parametri facoltativi.

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20

$defaults = array(
	'theme_location'  => '',
	'menu'            => '',
	'container'       => 'div',
	'container_class' => '',
	'container_id'    => '',
	'menu_class'      => 'menu',
	'menu_id'         => '',
	'echo'            => true,
	'fallback_cb'     => 'wp_page_menu',
	'before'          => '',
	'after'           => '',
	'link_before'     => '',
	'link_after'      => '',
	'items_wrap'      => '<ul id="%1$s" class="%2$s">%3$s</ul>',
	'depth'           => 0,
	'walker'          => ''
);
 
wp_nav_menu( $defaults );

Approfondirò queste opzioni più nella prossima sezione. Ma inizierò esaminando i primi due. Ricorda che tutti questi sono facoltativi, perché i valori che vedi sopra diventeranno il tuo valore predefinito se non sovrascritti. theme_location dovrebbe corrispondere alla posizione scelta al momento della registrazione del menu. Questo è l'unico valore che dovresti modificare per assicurarti che corrisponda correttamente.

A volte le persone confondono la posizione del menu con il menu perché sono entrambi molto simili. In effetti, il menu dovrebbe quasi sempre essere omesso,consentendo al webmaster di assegnare il proprio menu a quella posizione. Questo impostazione di menu viene utilizzata per includere un menu di amministrazione predefinito. Dovrebbe essere identico a un menu preesistente che è già stato creato. Ma dal momento che la maggior parte delle persone non ha un menu esistente (o questo potrebbe cambiare tra i siti web) è meglio lasciarlo semplicemente fuori dalla navigazione del tema.

Impostazione dei parametri

Le altre impostazioni sono principalmente per la personalizzazione, quindi puoi ignorarle. Ma affrontiamo il resto in modo da avere una buona comprensione delle possibilità. container, container_class e container_id sono utili per lo stile del menu. L'elemento contenitore esterno avvolge l'UL in modo che possa anche essere un <nav> HTML5 se ti piace la semantica.

Menu_class e menu_id vengono applicati alla lista non ordinata. Ogni menu ha una classe di .menu, quindi potresti voler cambiare questo se ne stai usando più di uno. Il parametro echo indica a questa funzione di uscire dal menu HTML, altrimenti restituirà il valore a una funzione o variabile PHP. Quando wp_nav_menu () non può essere eseguito per nessuna ragione, ricadrà automaticamente su wp_page_menu () come menzionato in precedenza.

I prossimi due prametri, prima e dopo, emetteranno qualsiasi codice  HTML appena prima di ogni collegamento di ancoraggio, o solo dopo la chiusura. link_before e link_after aggiungeranno HTML all'interno dei link di ancoraggio, subito prima e dopo il testo stesso. Ricorda queste opzioni e assicurati di non mescolarle! In caso di dubbi, controlla il codice per il supporto.

Ora se non vuoi usare una lista non ordinata puoi cambiarla all'interno di items_wrap. Sta usando un tipo di sintassi sprintf () per sostituire i valori con parametri dinamici nella stessa funzione. % 1 $ s si riferisce a menu_id,% 2 $ s si riferisce a menu_class e% 3 $ s è correlato all'output degli elementi nell’elenco. Dal momento che ci vuole un sacco di lavoro extra per cambiare gli elementi <li> di solito è meglio lasciarlo da solo.

Infine, il parametro depth indica al menu la profondità della gerarchia. Se la nostra intestazione di navigazione è solo un menu a discesa a un livello, allora abbiamo solo bisogno di un livello di profondità. Oppure potremmo avere un menu a comparsa a due livelli che potrebbe utilizzare 2 livelli di profondità. -1 è un valore speciale che visualizza tutti i collegamenti nel menu, ma li condensa insieme nello stesso livello di visualizzazione.

Ora l'elemento $ walker è un parametro speciale per la personalizzazione di come WordPress restituisce il contenuto in una gerarchia ad albero. Si aspetta un nuovo oggetto di classe, che includa i metodi personalizzati per l'output di elementi. Questo è un argomento abbastanza avanzato, ma puoi leggere ulteriori informazioni dalla guida di riferimento alla classe Walker.

Genera menu da WP Admin

Quest'ultimo bit dovrebbe fornire agli amministratori e ai webmaster un modo migliore per comprendere i menu. Una volta effettuato l'accesso al pannello di amministrazione, cliccare su "Aspetto" e quindi  sul collegamento dei menu.

Da qui è necessario riorganizzare i collegamenti disponendo la fisarmonica sinistra nella sezione destra. Puoi dare al menu un nome che può essere referenziato in PHP - ma nota in alto vedrai un menu di selezione a tendina.

Una volta registrata una navigazione e assegnata una posizione tematica, questa viene visualizzata in questo menu a discesa, che l'amministratore deve selezionare. In questo modo i webmaster possono organizzare i propri menu senza dover codificare alcun PHP.

Sul lato sinistro puoi scegliere tra le pagine, post, link, categorie e tag. Se fai clic sulla piccola scheda vicino all'angolo in alto a destra con l'etichetta "Opzioni schermo" puoi nascondere alcune di queste opzioni. Troverai anche opzioni di menu avanzate per assegnare a ciascun link un target (come target = "_ blank") o persino classi CSS univoche.

Ogni link di categoria potrebbe utilizzare una classe diversa per i colori unici quando sono selezionati. Per impostazione predefinita, fornirai ciascun testo del collegamento e una breve descrizione, che viene spesso utilizzata solo dall'amministratore del sito web. I collegamenti possono anche avere attributi di titolo e valori XFN univoci.

Più ti eserciti usando questo sistema di menu, più diventerà chiaro. Come sviluppatore che usa WordPress da anni, trovo che sia molto utile. I nuovi arrivati che stanno imparando le basi di WordPress possono ancora riprenderlo rapidamente senza troppe difficoltà.

In conclusione

Spero che questo sguardo approfondito sul sistema di navigazione di WordPress possa aiutare i nuovi sviluppatori ad lanciarsi direttamente nei  temi. Ovviamente ci sono alcuni altri aspetti importanti per la codifica del tema. Ma la navigazione è così cruciale e anche un pò confusa se non hai mai costruito qualcosa di simile prima. Prova questi esempi di codici PHP e scopri cosa puoi fare usando WordPress come base.

***

Questo articolo è stato tradotto da inglese. L’originale puoi trovare qui: How to Build WordPress Navigation Using wp_nav_menu()