[wp_list_pages](https:\/\/developer.wordpress.org\/reference\/functions\/wp_list_pages\/)()<\/code>e [wp_list_categories](https:\/\/developer.wordpress.org\/reference\/functions\/wp_list_categories\/)()<\/code>. Tutti estendono una Walker<\/code>classe generale. Estenderemo il Walker_Nav_Menu<\/code>che viene utilizzato per i menu in WordPress.<\/p>\nPoich\u00e9 estendiamo un’altra classe, dobbiamo solo aggiungere le funzioni che desideriamo sovrascrivere. Se una funzione non esiste nella nostra classe, WordPress eseguir\u00e0 invece la funzione "classe genitore" (la classe che estendiamo).<\/p>\n
Preparazione<\/h2>\n
Puoi aggiungere la tua classe walker nei file dei plugin, nei temi function.php<\/code>o in qualsiasi file PHP incluso da functions.php<\/code>(per un codice pi\u00f9 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<\/code>:<\/p>\nclass AWP_Menu_Walker extends Walker_Nav_Menu {\n}<\/code><\/pre>\nPer dire a WordPress di utilizzare il nostro walker, lo definiamo nelle nostre [wp_nav_menu](https:\/\/developer.wordpress.org\/reference\/functions\/wp_nav_menu\/)()<\/code>chiamate. Questa funzione \u00e8 responsabile dell’output di un menu e probabilmente ne hai almeno uno nel tuo tema per il menu principale.<\/p>\nNell’array di argomenti wp_nav_menu()<\/code>aggiungi un nuovo elemento con la chiave ‘walker’ e crea una nuova istanza della tua classe walker in questo modo:<\/p>\nwp_nav_menu([\n 'theme_location' => 'primary',\n 'menu_class' => 'main-menu',\n 'container' => 'nav',\n 'container_class' => 'header__main-nav',\n 'walker' => new AWP_Menu_Walker()\n]);<\/code><\/pre>\nSe aggiorni il tuo sito non dovresti vedere alcun cambiamento. Questo perch\u00e9 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.<\/p>\n
Panoramica delle funzioni in cui \u00e8 possibile eseguire l’overrideWalker_Nav_Menu<\/code><\/h2>\nLe seguenti sono funzioni che puoi aggiungere alla tua classe walker personalizzata per sovrascrivere le funzioni della classe genitoriale Walker_Nav_Menu<\/code>:<\/p>\nLe prime quattro sono funzioni che sono semplicemente responsabili dell’output e richiedono tutte di aggiungere una stringa, la prima variabile di parametro. \u00c8 importante sapere che qui fuori non fai echo<\/code>niente, tutto dovrebbe essere costruito come una stringa.<\/p>\nstart_lvl<\/h3>\n
La funzione start_lvl<\/code>\u00e8 responsabile dell’output dell’HTML per l’inizio di un nuovo livello. In breve dovrebbe produrre l’avvio <ul><\/code>.<\/p>\nfunction start_lvl(&$output, $depth=0, $args=null) { }<\/code><\/pre>\nIl primo parametro, $output<\/code>\u2013 passato per riferimento, \u00e8 la stringa a cui aggiungerai il tuo output. $depth<\/code>\u00e8 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\u00ec via. $args<\/code>\u00e8 un oggetto di tutti gli argomenti forniti in wp_nav_menu()<\/code>.<\/p>\nend_lvl<\/h3>\n
La end_lvl<\/code>funzione \u00e8 responsabile dell’output dell’HTML per la fine di un livello. Di solito \u00e8 solo la chiusura <\/ul><\/code>.<\/p>\nfunction end_lvl(&$output, $depth=0, $args=null) { }<\/code><\/pre>\nI parametri sono esattamente gli stessi di start_lvl<\/code>sopra.<\/p>\nstart_el<\/h3>\n
Questa funzione \u00e8 responsabile dell’output dell’HTML di ogni elemento. In breve dovrebbe emettere l’inizio <li><\/code>e il <a><\/code>tag con il titolo del collegamento all’interno.<\/p>\nfunction start_el(&$output, $item, $depth=0, $args=null, $id=0) { }<\/code><\/pre>\nIl primo argomento, $output<\/code>, \u00e8 come al solito la stringa a cui aggiungerai l’output. Il secondo argomento, $item<\/code>, \u00e8 l’oggetto voce di menu, ed \u00e8 qui che recupererai la maggior parte dei dati per l’output della voce di menu. Se il collegamento del menu \u00e8 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<\/code>, url<\/code>, title<\/code>, e description<\/code>.<\/p>\nIl terzo argomento, $depth<\/code>, \u00e8 un numero intero che ti dice a quale livello ci troviamo. Il livello 0 \u00e8 di livello superiore, 1 \u00e8 figlio diretto di livello superiore e cos\u00ec via. Il quarto argomento, $args<\/code>, \u00e8 un oggetto di tutti gli argomenti forniti a wp_nav_menu()<\/code>. Il quinto parametro, $id<\/code>, \u00e8 l’ID della voce di menu corrente.<\/p>\nend_el<\/h3>\n
La end_el<\/code>funzione \u00e8 responsabile dell’output della chiusura di un elemento. Di solito emetterebbe semplicemente il <\/li><\/code>tag.<\/p>\nfunction end_el(&$output, $item, $depth=0, $args=null) { }<\/code><\/pre>\nGli argomenti per end_el<\/code>sono gli stessi di cui start_el<\/code>sopra, tranne per il fatto che la funzione non ha il quinto parametro, $id<\/code>.<\/p>\nelemento_display<\/h3>\n
La funzione display_element<\/code>\u00e8 una funzione ereditata dalla Walker<\/code>classe generale ed \u00e8 la funzione responsabile dell’attraversamento. Questa \u00e8 la funzione che chiama a turno tutte le funzioni precedenti.<\/p>\nLo includo qui perch\u00e9 in alcuni casi, ad esempio, se vuoi impedire l’attraversamento di un intero ramo, utilizzeresti questa funzione per quello.<\/p>\n
function display_element($element, &$children_elements, $max_depth, $depth, $args, &$output) { }<\/code><\/pre>\nIl primo argomento, $element<\/code>, \u00e8 l’oggetto voce di menu: questo \u00e8 ci\u00f2 che viene trasmesso come $item<\/code>nelle funzioni precedenti. Il secondo argomento, $children_elements<\/code>\u2013 passato per riferimento, contiene tutti gli elementi figlio che questa funzione attraverser\u00e0. $max_depth<\/code>, il terzo argomento, \u00e8 un numero intero che indica quanto in profondit\u00e0 dovremmo attraversare e il quarto argomento, $depth<\/code>, \u00e8 la profondit\u00e0 a cui ci troviamo attualmente. Il quinto argomento, $args<\/code>, sono gli argomenti passati alla funzione che ha chiamato il walker (per i menu sarebbero gli argomenti forniti a wp_nav_menu()<\/code>), e l’argomento finale, $output<\/code>\u2013 passato per riferimento, \u00e8 l’output che viene passato come primo argomento in tutti delle funzioni di cui sopra.<\/p>\nModifica dell’output di ogni elemento<\/h2>\n
Nella panoramica sopra dovresti vedere che la funzione start_el()<\/code>\u00e8 quella responsabile dell’output dell’HTML per un singolo elemento di menu. Iniziamo sovrascrivendo questa funzione nella nostra classe walker con un semplice esempio.<\/p>\nEsempio: impedire l’aggiunta di collegamenti per elementi ‘#’<\/h3>\n
Assicuriamoci che qualsiasi #<\/code>link ” ‘ ottenga un <span><\/code>elemento invece di un tag link, per evitare di aggiornare la pagina.<\/p>\nclass AWP_Menu_Walker extends Walker_Nav_Menu {\n function start_el(&$output, $item, $depth=0, $args=[], $id=0) {\n $output .= \"<li class='\". implode(\" \", $item->classes). \"'>\";\n\u00a0\n if ($item->url && $item->url != '#') {\n $output .= '<a href=\"'. $item->url. '\">';\n } else {\n $output .= '<span>';\n }\n\u00a0\n $output .= $item->title;\n\u00a0\n if ($item->url && $item->url != '#') {\n $output .= '<\/a>';\n } else {\n $output .= '<\/span>';\n }\n }\n}<\/code><\/pre>\nInizieremo l’elemento aggiungendo un <li><\/code>tag a $output<\/code>. Vogliamo assicurarci che le classi predefinite di WordPress (ad esempio ‘menu-item’, ‘menu-item-ha-children’ ecc.), cos\u00ec come le classi inserite manualmente nell’editor di menu, vengano aggiunte al nostro elemento di elenco. Incolliamo le classi fornite come array $item->classes<\/code>usando la funzione PHP [implode](https:\/\/www.php.net\/manual\/en\/function.implode.php)()<\/code>separando ogni elemento con uno spazio.<\/p>\nAlla riga #5-9 e #13-17 gestiamo l’output condizionale dell’elemento di wrapping. Produciamo un <a><\/code>tag, a meno che l’URL dell’elemento non sia ‘ #<\/code>‘, nel qual caso forniamo <span><\/code>invece un tag. Alla riga n. 11 emettiamo semplicemente il testo del collegamento, che risiede in $item->title<\/code>.<\/p>\nQuesto \u00e8 tutto ci\u00f2 di cui abbiamo bisogno per assicurarci che tutti gli elementi di menu che hanno ‘ #<\/code>‘ come URL non siano cliccabili!<\/p>\nSe 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><\/code>direttamente al tag. Puoi risolverlo modificando lo stile ed eventualmente aggiungendo una classe all’elemento span.<\/p>\nEsempio: visualizzazione delle descrizioni delle voci di menu<\/h3>\n
Ad esempio, un’altra cosa che puoi fare qui \u00e8 emettere la descrizione del menu. Questo esiste, ma non \u00e8 attivato come predefinito. Nell’editor del menu di WordPress devi fare clic su "Opzioni schermo" in alto a destra e selezionare per mostrare "Descrizione":<\/p>\n
![\"Scopri](\"https:\/\/wordpress.mediadoma.com\/wp-content\/uploads\/2022\/01\/post-151802-61e4cfd7d3371.png\")
<\/a><\/p>\nCi\u00f2 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\u00e9 fa parte del design del tuo tema. Puoi semplicemente controllare se $item<\/code>ha una descrizione e se $depth<\/code>\u00e8 0, in questo modo:<\/p>\n ...\n $output .= $item->title;\n\u00a0\n if ($depth == 0 && !empty($item->description)) {\n $output .= '<span class=\"description\">'. $item->description. '<\/span>';\n }\n ...<\/code><\/pre>\nEsempio: aggiunta di accenti a discesa<\/h3>\n
Un esempio pi\u00f9 comune e utile \u00e8 l’aggiunta di un "accento circonflesso", un’icona che segnala che questa voce di menu ha un menu a discesa (ha elementi figlio).<\/p>\n
![\"Scopri](\"https:\/\/wordpress.mediadoma.com\/wp-content\/uploads\/2022\/01\/post-151802-61e4cfd965e21.png\")
<\/a><\/p>\nEsempio di accento circonflesso in azione \u2013 dietro “Blog" e “Notizie”<\/p>\n