Cómo agregar HTML personalizado a wp_nav_menu?

Question

Estoy familiarizado con WordPress y el sistema de menú de WordPress. Pero estoy buscando una forma de agregar HTML personalizado al wp_nav_menu().

Estoy intentando crear un menú como este:

Aviso cómo el menú desplegable bajo productos contiene una imagen y un enlace. Me gustaría volver a crear esto. He visto algunos complementos, pero preferiría codificarlo.

No me importa codificar la imagen y el enlace, pero me gustaría mantener la flexibilidad de usar WordPress para administrar los menús.

Answer 1

La manera en que WordPress pasa por las páginas del menú para mostrar los elementos, está utilizando un objeto andador. En este caso, la clase específica para este objeto se llama Walker_Nav_Menu. Puede encontrarlo en wp-includes\nav-menu-template.php.

El Walker_Nav_Menu es una clase bastante simple. Puede ver cómo se crean allí los enlaces y la estructura del menú. Las funciones start_el y end_el se utilizan para crear los elementos del menú. Las funciones start_lvl y end_lvl son para anidar menús. En este enfoque, utilizaremos principalmente start_el y end_el.

En su functions.php crear una clase, para extender Walker_Nav_Menu con métodos muy similares a la clase 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 
    } 
} 

En esas funciones, el $item es su elemento de menú, con la que se pueden consultar los contenidos adicionales de acuerdo al elemento de menú actual, si lo desea. Tenga en cuenta que no incluí start_lvl y end_lvl, pero eso no importa, ya que su clase heredará automáticamente los métodos de clases principales, si no se sobrescribe.

Luego, en sus archivos del tema, puede llamar wp_nav_menu así:

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 utilizará su clase y las funciones personalizadas, por lo que se pueden modificar lo que el código es la salida.