Scopri come scrivere menu Walker per menu WordPress

WordPress consente di utilizzare le cosiddette classi Walker per attraversare e visualizzare elementi in una struttura gerarchica. In questo post impareremo come creare, implementare e personalizzare la nostra classe walker per personalizzare l’output del nostro menu.

L’uso più noto della personalizzazione con le classi Walker in WordPress è per i menu, ma in realtà WordPress utilizza le classi Walker per tutta una serie di casi, ad esempio l’output di gerarchie tassonomiche, gerarchie di commenti [wp_list_pages](https://developer.wordpress.org/reference/functions/wp_list_pages/)()e [wp_list_categories](https://developer.wordpress.org/reference/functions/wp_list_categories/)(). Tutti estendono una Walkerclasse generale. Estenderemo il Walker_Nav_Menuche viene utilizzato per i menu in WordPress.

Poiché estendiamo un’altra classe, dobbiamo solo aggiungere le funzioni che desideriamo sovrascrivere. Se una funzione non esiste nella nostra classe, WordPress eseguirà invece la funzione "classe genitore" (la classe che estendiamo).

Preparazione

Puoi aggiungere la tua classe walker nei file dei plugin, nei temi function.phpo in qualsiasi file PHP incluso da functions.php(per un codice più pulito). Inizi definendo la tua classe con un nome a tua scelta (assicurati che il nome della classe sia univoco e questo includa i possibili nomi delle classi nel core di WordPress!) estendendo Walker_Nav_Menu:

class AWP_Menu_Walker extends Walker_Nav_Menu {
}

Per dire a WordPress di utilizzare il nostro walker, lo definiamo nelle nostre [wp_nav_menu](https://developer.wordpress.org/reference/functions/wp_nav_menu/)()chiamate. Questa funzione è responsabile dell’output di un menu e probabilmente ne hai almeno uno nel tuo tema per il menu principale.

Nell’array di argomenti wp_nav_menu()aggiungi un nuovo elemento con la chiave ‘walker’ e crea una nuova istanza della tua classe walker in questo modo:

Se aggiorni il tuo sito non dovresti vedere alcun cambiamento. Questo perché la nostra classe non sovrascrive nessuna delle funzioni del genitore, e quindi WordPress esegue semplicemente le normali funzioni di menu walker durante l’output del menu, proprio come prima gli abbiamo detto di usare il nostro walker.

Panoramica delle funzioni in cui è possibile eseguire l’overrideWalker_Nav_Menu

Le seguenti sono funzioni che puoi aggiungere alla tua classe walker personalizzata per sovrascrivere le funzioni della classe genitoriale Walker_Nav_Menu:

Le prime quattro sono funzioni che sono semplicemente responsabili dell’output e richiedono tutte di aggiungere una stringa, la prima variabile di parametro. È importante sapere che qui fuori non fai echoniente, tutto dovrebbe essere costruito come una stringa.

start_lvl

La funzione start_lvlè responsabile dell’output dell’HTML per l’inizio di un nuovo livello. In breve dovrebbe produrre l’avvio <ul>.

function start_lvl(&$output, $depth=0, $args=null) { }

Il primo parametro, $output– passato per riferimento, è la stringa a cui aggiungerai il tuo output. $depthè un numero intero che indica a quale livello ti trovi; 0 per il livello superiore, 1 per il figlio diretto del livello superiore e così via. $argsè un oggetto di tutti gli argomenti forniti in wp_nav_menu().

end_lvl

La end_lvlfunzione è responsabile dell’output dell’HTML per la fine di un livello. Di solito è solo la chiusura </ul>.

function end_lvl(&$output, $depth=0, $args=null) { }

I parametri sono esattamente gli stessi di start_lvlsopra.

start_el

Questa funzione è responsabile dell’output dell’HTML di ogni elemento. In breve dovrebbe emettere l’inizio <li>e il <a>tag con il titolo del collegamento all’interno.

function start_el(&$output, $item, $depth=0, $args=null, $id=0) { }

Il primo argomento, $output, è come al solito la stringa a cui aggiungerai l’output. Il secondo argomento, $item, è l’oggetto voce di menu, ed è qui che recupererai la maggior parte dei dati per l’output della voce di menu. Se il collegamento del menu è una voce del menu del post, qui otterrai l’oggetto del post. Indipendentemente dal tipo di menu, otterrai anche alcuni elementi utili aggiuntivi; come classes, url, title, e description.

Il terzo argomento, $depth, è un numero intero che ti dice a quale livello ci troviamo. Il livello 0 è di livello superiore, 1 è figlio diretto di livello superiore e così via. Il quarto argomento, $args, è un oggetto di tutti gli argomenti forniti a wp_nav_menu(). Il quinto parametro, $id, è l’ID della voce di menu corrente.

end_el

La end_elfunzione è responsabile dell’output della chiusura di un elemento. Di solito emetterebbe semplicemente il </li>tag.

function end_el(&$output, $item, $depth=0, $args=null) { }

Gli argomenti per end_elsono gli stessi di cui start_elsopra, tranne per il fatto che la funzione non ha il quinto parametro, $id.

elemento_display

La funzione display_elementè una funzione ereditata dalla Walkerclasse generale ed è la funzione responsabile dell’attraversamento. Questa è la funzione che chiama a turno tutte le funzioni precedenti.

Lo includo qui perché in alcuni casi, ad esempio, se vuoi impedire l’attraversamento di un intero ramo, utilizzeresti questa funzione per quello.

function display_element($element, &$children_elements, $max_depth, $depth, $args, &$output) { }

Il primo argomento, $element, è l’oggetto voce di menu: questo è ciò che viene trasmesso come $itemnelle funzioni precedenti. Il secondo argomento, $children_elements– passato per riferimento, contiene tutti gli elementi figlio che questa funzione attraverserà. $max_depth, il terzo argomento, è un numero intero che indica quanto in profondità dovremmo attraversare e il quarto argomento, $depth, è la profondità a cui ci troviamo attualmente. Il quinto argomento, $args, sono gli argomenti passati alla funzione che ha chiamato il walker (per i menu sarebbero gli argomenti forniti a wp_nav_menu()), e l’argomento finale, $output– passato per riferimento, è l’output che viene passato come primo argomento in tutti delle funzioni di cui sopra.

Modifica dell’output di ogni elemento

Nella panoramica sopra dovresti vedere che la funzione start_el()è quella responsabile dell’output dell’HTML per un singolo elemento di menu. Iniziamo sovrascrivendo questa funzione nella nostra classe walker con un semplice esempio.

Esempio: impedire l’aggiunta di collegamenti per elementi ‘#’

Assicuriamoci che qualsiasi #link ” ‘ ottenga un <span>elemento invece di un tag link, per evitare di aggiornare la pagina.

Inizieremo l’elemento aggiungendo un <li>tag a $output. Vogliamo assicurarci che le classi predefinite di WordPress (ad esempio ‘menu-item’, ‘menu-item-ha-children’ ecc.), così come le classi inserite manualmente nell’editor di menu, vengano aggiunte al nostro elemento di elenco. Incolliamo le classi fornite come array $item->classesusando la funzione PHP [implode](https://www.php.net/manual/en/function.implode.php)()separando ogni elemento con uno spazio.

Alla riga #5-9 e #13-17 gestiamo l’output condizionale dell’elemento di wrapping. Produciamo un <a>tag, a meno che l’URL dell’elemento non sia ‘ #‘, nel qual caso forniamo <span>invece un tag. Alla riga n. 11 emettiamo semplicemente il testo del collegamento, che risiede in $item->title.

Questo è tutto ciò di cui abbiamo bisogno per assicurarci che tutti gli elementi di menu che hanno ‘ #‘ come URL non siano cliccabili!

Se lo stai facendo in un tema con uno stile, tieni presente che potresti perdere un po’ di stile se il tema ha applicato lo stile <a>direttamente al tag. Puoi risolverlo modificando lo stile ed eventualmente aggiungendo una classe all’elemento span.

Esempio: visualizzazione delle descrizioni delle voci di menu

Ad esempio, un’altra cosa che puoi fare qui è emettere la descrizione del menu. Questo esiste, ma non è attivato come predefinito. Nell’editor del menu di WordPress devi fare clic su "Opzioni schermo" in alto a destra e selezionare per mostrare "Descrizione":

Ciò consente all’utente di inserire una descrizione per ciascun elemento. Puoi produrre questa descrizione nella tua classe walker. Supponiamo che tu voglia mostrare solo la descrizione per gli elementi di primo livello, poiché fa parte del design del tuo tema. Puoi semplicemente controllare se $itemha una descrizione e se $depthè 0, in questo modo:

Esempio: aggiunta di accenti a discesa

Un esempio più comune e utile è l’aggiunta di un "accento circonflesso", un’icona che segnala che questa voce di menu ha un menu a discesa (ha elementi figlio).

Esempio di accento circonflesso in azione – dietro “Blog" e “Notizie”

Avrai bisogno di capire il tuo output HTML con accento circonflesso. Nel mio caso sto generando un <i>elemento con classi specifiche per una bella freccia in giù disponibile dalla libreria Fontawesome che fornisce migliaia di icone. Vuoi anche assicurarti che questo accento circonflesso produca solo gli elementi che hanno figli. Il modo migliore che ho trovato per capire se l’elemento corrente ha figli è fare riferimento all’oggetto walker (sì, che è il nostro walker stesso, ma anche le classi che estende!) in $argse controllando il boolean has_children. L’output di un accento circonflesso è semplice come:

La classe completa del deambulatore sarebbe simile a questa:

E questo è tutto ciò di cui hai bisogno per assicurarti che il tuo menu ottenga delle belle icone di accento circonflesso sugli elementi principali e che #i collegamenti " " non siano cliccabili.

Se vuoi che l’icona del cursore cambi, ad esempio in una freccia su quando il menu a discesa è attivo, dovrai aggiungerlo con Javascript al tuo tema.

Come suggeriscono gli esempi precedenti, puoi manipolare l’output come preferisci, in base a qualsiasi condizione. Ad esempio, puoi modificare l’output in base alla presenza di una determinata classe (ad esempio una classe inserita manualmente nell’editor di menu) cercando la classe in $item->classes, oppure puoi manipolare (ad esempio in maiuscolo) il testo dell’elemento emesso fornito in $item->title.

Fornire argomenti al tuo walker attraverso il tuowp_nav_menu

Vorrei citare un’altra cosa utile. Ricorda che $args contiene tutti gli argomenti forniti a wp_nav_menu(). Ciò include ad esempio theme_locatione altri, quindi se puoi modificare l’output solo per posizioni di temi specifici, ad esempio il menu principale. Ma puoi effettivamente fornire qualsiasi argomento personalizzato!

Supponiamo che tu stia visualizzando lo stesso menu più volte, ad esempio una per desktop e di nuovo per dispositivi mobili. Oppure vuoi che il tuo walker manipoli gli elementi solo quando vengono emessi wp_nav_menu()nel tuo tema e non quando il menu viene aggiunto tramite un widget? Forse vuoi che il tuo walker gestisca l’output in modo diverso in questi casi?

Puoi fornire qualsiasi argomento personalizzato a wp_nav_menu(). Come semplice esempio, aggiungerò un booleano ‘ show_carets‘ agli argomenti per assicurarmi che i punti di inserimento vengano aggiunti solo nei casi in cui li voglio, invece della mia classe Walker che aggiunge i punti di inserimento a tutti i menu.

Quindi posso semplicemente modificare il mio pezzo di codice con l’aggiunta di accento circonflesso sopra (riga n. 19-21) per verificare se show_caretsè presente o meno in $args, in questo modo:

Puoi aggiungere qualsiasi argomento desideri assicurandoti che il tuo walker personalizzi solo i menu che desideri. Ad esempio semplici booleani per casi diversi, ad esempio is_mobile_menu, o qualsiasi altra cosa di cui hai bisogno.

E questo è tutto. Sentiti libero di sperimentare e fammi sapere se hai domande o suggerimenti qui sotto!