Cambiando la estructura de menú de WordPress

[ 17 octubre 2019 ] [ Autor: Jhon Marreros Guzmán ][ Themes - Avanzado] [ ]

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() ) {
		...
	}

}

Dentro de esa clase veremos que tenemos cuatro métodos, puedes dejar sólo el método que modifiques y el resto eliminarlos ya que al no existir se recuperarán de la clase padre.

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' );

Puedes agregar este código al final de tu archivo functions.php de tu child-theme

El archivo custom-class-walker-nav-menu.php debe estar al mismo nivel que el archivo functions.php de tu theme.

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.