Quando WordPress 3 ci ha presentato la nuova funzionalità Menu, ha cambiato il modo in cui abbiamo visualizzato i menu di navigazione per sempre. Non dovevamo più usare le normali funzioni di elenco delle pagine o creare le nostre funzioni personalizzate per integrare i menu di categoria e di pagina, nonché gli elementi esterni o collegati in un menu di navigazione. Ma quanto possiamo personalizzare con questa nuova funzionalità? In questo tutorial, ci immergeremo in profondità in tutto ciò che il wp_nav_menu la funzione può fare, utilizzare la classe Walker per aggiungere una descrizione secondaria e toccare alcune delle relative funzioni.
I parametri
La funzione ha diversi parametri con cui lavorare. Ecco i valori predefiniti elencati nel codice WordPress.org:
Usando questo parametro, possiamo impostare una posizione del tema che viene poi utilizzata nella pagina Menu per impostare un menu per lavorare in quella parte del tema, senza dover definire manualmente quale menu dovrebbe apparire lì. Questo è molto utile per i distributori di temi perché è possibile utilizzare le condizioni per visualizzare un menu solo se l'utente ha definito un menu per quella posizione. L'unico altro requisito è che tu usi la funzione register_nav_menu () per registrare queste posizioni. Questo di solito è fatto dai tuoi file di funzione quando stai configurando il supporto per i menu.
Iniziamo a costruire i nostri parametri di funzione del menu personalizzato presumendo di aver registrato una posizione tematica chiamata "primario".
$ params = array ('theme_location' => 'primary');
Menu
Questo parametro viene utilizzato per definire manualmente quale menu deve essere utilizzato. Nel nostro esempio, impostiamo solo una posizione generica del menu e non ne definiamo uno esatto da utilizzare, ma se volessimo dire alla funzione di utilizzare un menu chiamato "Navigazione primaria", i nostri parametri sarebbero simili a questo:
Per impostazione predefinita, il nostro menu sarà incluso in a div, ma se sei come me, di solito non ne hai bisogno e probabilmente vuoi ridurre la quantità di divs e altri tag utilizzati per mantenere il codice il più ordinato possibile. Puoi anche usare questo parametro per definire un tag diverso come un html5 o . Per il nostro esempio, non vogliamo che un contenitore modifichi i valori del contenitore predefinito poiché gli stili del tema di Twenty Eleven si basano sul fatto che sia presente.
Classe contenitore e ID contenitore
Come si può facilmente intuire, questi parametri vengono utilizzati per impostare una classe e un ID per il contenitore. Dal momento che stiamo omettendo del tutto, non abbiamo bisogno di definire valori.
Menu Class e Menu ID
Funzionano proprio come i precedenti parametri eccetto che questa volta vogliamo assolutamente impostare un ID di "nav"perché quello è l'ID che useremo nel nostro foglio di stile per modellare la barra di navigazione.
È possibile utilizzare questo parametro per indicare se si desidera visualizzare (eco) i risultati o restituirli per l'utilizzo in PHP. Questo elemento è booleano quindi per restituirlo è sufficiente impostare questo parametro su 0.
CB di Fallback
Questa è una funzione di callback a cui è possibile eseguire il fallback se non viene trovato alcun menu. Di default usa il vecchio stand by wp_page_menu () e passa tutti gli stessi parametri anche a questa funzione.
Prima e dopo
Questi elementi sono usati per definire cosa può essere posizionato prima e dopo i tag di ancoraggio (). Potresti usarli per precedere ciascun elemento con una barra verticale o per avvolgere gli elementi di navigazione in un tag span.
Collegamento prima e collegamento dopo
Funzionano allo stesso modo degli oggetti precedenti che abbiamo coperto, tranne per il fatto che qualsiasi cosa tu definisca sarà all'interno dei tag di ancoraggio. Il nostro esempio non richiede che li usiamo, quindi li ignoreremo e lasceremo che sia l'elemento vuoto predefinito.
Avvolgere gli oggetti
Per impostazione predefinita, gli elementi sono inclusi in un elenco non ordinato con l'ID del menu e la classe del menu. Questo parametro ti consente di cambiarlo se lo desideri.
Profondità
Questo parametro è molto utile per quando si desidera utilizzare lo stesso menu due volte ma non si desidera che gli elementi secondari vengano visualizzati nella posizione che si sta impostando con wp_nav_menu () funzione. Ad esempio, se desideri che la navigazione principale includa un menu a discesa di secondo livello, puoi lasciare questa impostazione predefinita. Quindi, se si desidera utilizzare gli stessi elementi parent in una navigazione a piè di pagina e omettere gli elementi secondari, è possibile impostare questo parametro su una profondità di 1. Lo "0" predefinito significa che verranno visualizzati tutti i livelli. Per mantenere il nostro esempio sintetico, supponiamo che la navigazione principale non includa elementi secondari.
Camminatore
Il parametro viene utilizzato per definire un oggetto walker che può essere utilizzato per manipolare il funzionamento dell'intera funzione e generare le sue informazioni. Esamineremo un buon esempio nella prossima sezione.
Aggiunta di una descrizione alle voci del menu Nav
Per il nostro esempio, vogliamo aggiungere una descrizione parziale a ciascuna voce del menu principale. La funzionalità per aggiungere la descrizione stessa è già presente nel sistema di menu di WordPress. Per attivare questa opzione, vai a Menu e quindi premi la scheda delle opzioni dello schermo nell'angolo in alto a destra. L'opzione di cui hai bisogno per assicurarti che venga cliccata dovrebbe dire "Descrizione". Con questo selezionato, una voce di menu dovrebbe ora assomigliare a questa:
Una volta compilate le nostre descrizioni, avremo bisogno di creare la classe Walker e aggiungerla al wp_nav_menu () parametri. Chiameremo la classe description_navigation quindi il nostro codice di parametri completo dovrebbe assomigliare a questo:
C'è molto da fare qui. Per maggiori informazioni sulle classi Walker in generale, lasciate che vi rimandi ad un altro tutorial: Capire la classe Walker. La parte più importante che dovresti capire qui è che stiamo ricostruendo l'output di ogni elemento del link e aggiungendo nella descrizione. Alla riga 19 del frammento sopra puoi vedere dove viene visualizzata la descrizione dell'oggetto se esiste e ne fa il valore di $ descrizione avvolto in un tag span in modo che possiamo definire le descrizioni separatamente. Quindi, nelle righe 24-29 in cui rimettiamo insieme l'elemento del collegamento, aggiungiamo nella descrizione subito prima della chiusura del tag anchor in modo che diventi parte del collegamento stesso.
Usando il tema Twenty Eleven, ora dovresti avere qualcosa di simile a questo:
Style It Up
Aggiungiamo un po 'di stile per renderlo più leggibile:
Ciò cambierà l'altezza e il padding di ogni link, farà sì che la descrizione all'interno del tag span si abbassi alla sua stessa riga e regolerà un po 'le dimensioni e i colori del carattere per un risultato finale simile a questo:
Funzioni di relazione
Non solo puoi usare wp_nav_menu () per generare il tuo menu con tutte le personalizzazioni, puoi andare un po 'oltre con alcune delle sue funzioni correlate.
has_nav_menu ()
Questa funzione è ottima solo per visualizzare un menu particolare se tale menu è stato assegnato alla posizione del tema. Ad esempio, potresti voler creare una navigazione top sul tuo tema per gli elementi di navigazione di minori che un utente potrebbe non volere nella sua navigazione principale. Questo potrebbe essere cose come un collegamento a casa, "Pubblicizza con noi", o altri call più bassi all'azione. Ma come distributore di temi, se non sai se questo sarà qualcosa che l'utente vuole usare, usa semplicemente una condizione come questa:
if (has_nav_menu ('top-menu')) wp_nav_menu ('theme_location =' top-menu ');
wp_get_nav_menu_items ()
Questa funzione restituirà una serie di elementi da un particolare menu. Questo può essere particolarmente utile se si desidera creare un elenco di menu personalizzato senza utilizzare una classe Walker. Si perdono molte funzionalità come la classe corrente della voce di menu, ma è un ottimo modo per scorrere una serie di voci di menu per una soluzione semplice.
Conclusione
Ci sono molte cose che puoi fare per personalizzare i tuoi menu di navigazione quando sai di più sulla flessibilità che viene offerta con i parametri incorporati e in grado di avere un maggiore controllo con la Walker Class. È necessario aggiungere un altro tag span con la classe di "icona"per le icone personalizzate per ogni articolo? Nessun problema.
Essere in grado di avere il pieno controllo del posizionamento e dell'output dei menu estende le tue capacità come sviluppatore di temi e una quantità non quantificabile di possibilità. Quali sono alcune delle cose che puoi usare nella classe Walker?
Share
Accentsconagua
