Come aggiungere codice HTML personalizzato a wp_nav_menu?

Question

Conosco WordPress e utilizzo il sistema di menu di WordPress. Ma sto cercando un modo per aggiungere HTML personalizzato a wp_nav_menu().

Sto cercando di creare un menu simile a questo:

Notate come il menu a discesa sotto prodotti contiene un'immagine e un link. Mi piacerebbe ricreare questo. Ho esaminato alcuni plug-in, ma preferisco codificarlo.

Non mi interessa codificare l'immagine e il collegamento, ma mi piacerebbe mantenere la flessibilità di usare WordPress per gestire i menu.

Answer 1

Il modo in cui WordPress attraversa le pagine del menu per visualizzare gli elementi, utilizza un oggetto walker. In questo caso la classe specifica per questo oggetto si chiama Walker_Nav_Menu. Lo puoi trovare in wp-includes\nav-menu-template.php.

Il Walker_Nav_Menu è una classe piuttosto semplice. Sei in grado di vedere come sono costruiti i collegamenti e la struttura del menu. Le funzioni start_el e end_el vengono utilizzate per creare le voci di menu. Le funzioni start_lvl e end_lvl sono per i menu di nidificazione. In questo approccio utilizzeremo principalmente start_el e end_el.

Nella tua functions.php creare una classe, di estendere Walker_Nav_Menu con metodi molto simile alla classe padre:

class Custom_Walker_Nav_Menu extends Walker_Nav_Menu { 
    function start_el (&$output, $item, $depth = 0, $args = array(), $id = 0) { 
    // Copy all the start_el code from source, and modify 
    } 

    function end_el(&$output, $item, $depth = 0, $args = array()) { 
    // Copy all the end_el code from source, and modify 
    } 
} 

In queste funzioni, il $item è il vostro menu-item, con il quale è possibile interrogare i contenuti aggiuntivi in ​​base alla voce di menu corrente, se lo si desidera. Nota che non ho incluso start_lvl e end_lvl, ma non importa, dal momento che la tua classe erediterà automaticamente i metodi delle classi genitore, se non sovrascritta.

Poi, nelle file del tema, è possibile chiamare wp_nav_menu in questo modo:

wp_nav_menu(array(
    'theme_location' => 'main', 
    'container' => false, 
    'menu_id' => 'nav', 
    'depth' => 1, 
    // This one is the important part: 
    'walker' => new Custom_Walker_Nav_Menu 
)); 

WordPress utilizzerà la classe personalizzata e funzioni, in modo da poter modificare ciò che il codice viene emesso.