WordPress permite a través de los Hooks cambiar las diferentes partes del menú generado, sin embargo hay casos en los que necesitamos mucha más flexibilidad, por ejemplo cuando queremos añadir una estructura totalmente diferente de menú.
Generalidades
En el artículo Agregar descripción en ítems de menú de WordPress, usamos un Hook para poder hacer los cambios, sin embargo si queremos hacer cambios estructurales más complejos, se complica hacerlo a través de Hooks.
En este artículo veremos cómo hacer cambios a través de la clase Walker de WordPress, o más específicamente para un menú la clase Walker_Nav_Menu.
Usando la clase Walker
Walker es una clase que nos ayuda a manejar una estructura de árbol en WordPress, usaremos la clase Walker_Nav_Menú que hereda de la clase Walker que es la que controla la estructura de menú.
Ubicamos el archivo:
/wp-includes/class-walker-nav-menu.php
Copiamos este archivo a la carpeta del theme que estamos usando, lo copiaremos con con otro nombre: custom-class-walker-nav-menu.php
Edita el archivo y cambia el nombre de la clase y el nombre de la clase padre ya que debe extender de Walker_Nav_Menu, es decir tu código quedaría algo similar a como se muestra a continuación:
class Custom_Walker_Nav_Menu extends Walker_Nav_Menu {
public function start_lvl( &$output, $depth = 0, $args = array() ) {
...
}
public function end_lvl( &$output, $depth = 0, $args = array() ) {
...
}
public function start_el( &$output, $item, $depth = 0, $args = array(), $id = 0 ) {
...
}
public function end_el( &$output, $item, $depth = 0, $args = array() ) {
...
}
}
Incluyendo la referencia a la nueva clase
Podemos cargar directamente el archivo usando requiere_once al inicio del archivo functions.php, sin embargo para mantener el código más ordenado podemos también hacerlo a través de un Hook, tal como se muestra en el siguiente código:
function register_custom_nav_walker(){
require_once 'custom-class-walker-nav-menu.php';
}
add_action( 'after_setup_theme', 'register_custom_nav_walker' );
Asignando el Walker a un menú
Con los pasos anteriores simplemente hemos creado, modificado y cargado un archivo con la clase de menú Walker, sin embargo necesitamos indicar a nuestro menú que use una instancia del nuevo Walker creado.
Para esto tenemos que ubicar en nuestro theme la función de WordPress wp_nav_menu() que es una función que muestra el menú, esta función como parte de sus parámetros acepta un parámetro walker al cual se le puede asignar una instancia de la clase creada.
wp_nav_menu(
array(
'theme_location' => 'menu-1',
'menu_class' => 'main-menu',
'walker' => new Custom_Walker_Nav_Menu
)
);
Conclusión
Como has podido comprobar es posible hacer modificaciones directamente extendiendo la clase Walker_Nav_Menú que crea la estructura de árbol del menú y reemplazar los métodos que creas necesarios, es una manera alterna al uso de Hooks y recomendable cuando tienes muchos cambios en la estructura que WordPress genera por defecto.
¿Aún con dudas?, en el siguiente video se detalla los puntos anteriores.
Hola Jhon, tengo la siguiente notificación en WordPress
La clase de caminante de menú es anulada por un tema / complemento. Valor actual = Astra_Walker_Nav_Menu_Edit_Custom. Es posible que los permisos del menú de navegación aún funcionen.
Estoy trabajando con el theme Astra child, siguiendo tus indicaciones me ayudaría con la solución. Gracias
Hola, Ese mensaje que comentas aparece como error o es sólo informativo?, has agregado código adicional relacionado con esto?.
hola, exelente post, es posible que pueda agregar una opcion nueva de menu dependiendo del rol del usuario que esta logueandose?
gracias soy nueva con WP
Hola, si es posible, podrías revisa este artículo relacionado: https://decodecms.com/como-mostrar-un-menu-diferente-para-usuarios-registrados/