Jak dodać niestandardowy kod HTML do wp_nav_menu?

Question

Jestem zaznajomiony z WordPress i korzystaniem z systemu menu WordPress. Ale szukam sposobu na dodanie niestandardowego kodu HTML do wp_nav_menu().

Próbuję utworzyć menu tak:

zauważyć, jak menu rozwijane pod wyrobów zawierających obraz i link. Chciałbym to odtworzyć ponownie. Sprawdziłem kilka wtyczek, ale wolałbym je zakodować.

Nie przeszkadza mi trudne kodowanie obrazu i linku, ale chciałbym zachować elastyczność korzystania z WordPress do zarządzania menu.

Answer 1

Sposób w jaki WordPress przegląda strony menu w celu wyświetlenia przedmiotów, używa obiektu Walker. W tym przypadku określona klasa dla tego obiektu nazywa się Walker_Nav_Menu. Możesz go znaleźć w wp-includes\nav-menu-template.php.

Walker_Nav_Menu to dość prosta klasa. Możesz zobaczyć, w jaki sposób zbudowane są tam linki i struktura menu. Funkcje służące do budowania pozycji menu służą do ustawiania funkcji. Funkcje start_lvl i end_lvl służą do zagnieżdżania menu. W tym podejściu będziemy głównie używać start_el i end_el.

w twojej functions.php utworzyć klasę, aby przedłużyć Walker_Nav_Menu z dość podobnych metod do klasy nadrzędnej:

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 
    } 
} 

W tych funkcji, $item jest twój punkt-menu, z którego można wyszukać dodatkowe treści według do aktualnego elementu menu, jeśli chcesz. Zauważ, że nie zawierałem start_lvl i end_lvl, ale to nie ma znaczenia, ponieważ twoja klasa automatycznie dziedziczy metody klas nadrzędnych, jeśli nie zostaną nadpisane.

Następnie w plikach tematycznych, można zadzwonić wp_nav_menu tak:

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 będzie używać niestandardowej klasy i funkcje, dzięki czemu można modyfikować, co kod jest wyjście.