• Saltar a la navegación principal
  • Saltar al contenido principal
  • Saltar a la barra lateral principal

DecodeCMS

Tu WordPress a otro Nivel ...

  • Acerca de
  • Contacto
  • Inicio
  • Tutoriales
    • Themes
    • Plugins
    • Core
    • Recursos
  • Cursos
  • Acceder
    • Mis cursos
    • Mi Cuenta
    • Acceder
Inicio / Tutoriales / Themes / Cambiando la estructura de menú de WordPress

Cambiando la estructura de menú de WordPress

Cambiando la estructura de menú de WordPress

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

funcionalidad

¿Me ayudas a llegar a más gente?

Twittear Compartir LinkedIn WhatsApp

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.

Suscríbete a DecodeCMS:  

 

¿Me ayudas a llegar a más gente?

Twittear Compartir LinkedIn WhatsApp

Artículos Relacionados

  • Agregar descripción en ítems de menú WordPressAgregar descripción en ítems de menú WordPress
  • Botón scroll hacia arriba en WordPress sin pluginsBotón scroll hacia arriba en WordPress sin plugins
  • Agregar recaptcha v3 en formulario de contactoAgregar recaptcha v3 en formulario de contacto
  • Subtítulo desde título de la entrada en WordPressSubtítulo desde título de la entrada en WordPress
Valora este artículo : 1 barra2 barras3 barras4 barras5 barras (3 votos, promedio: 5,00 de 5)
Cargando...

Interacciones con los lectores

Comentarios

  1. Jorge Morales

    26 septiembre, 2020

    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

    • Jhon Marreros Guzmán

      27 septiembre, 2020

      Hola, Ese mensaje que comentas aparece como error o es sólo informativo?, has agregado código adicional relacionado con esto?.

  2. Claudia Desiree

    14 enero, 2021

    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

    • Jhon Marreros Guzmán

      15 enero, 2021

      Hola, si es posible, podrías revisa este artículo relacionado: https://decodecms.com/como-mostrar-un-menu-diferente-para-usuarios-registrados/

Para escribir código envolver con: <pre class="language-xxx"><code> </code></pre> ,reemplaza las xxx (php, css, html)

*

* Gravatar habilitado

Barra lateral principal

Presentación

Curso Decodifica WordPress

Únete a DecodeCMS

Recibirás como regalo:

Guia práctica con video:
¿Quieres agregar código a WordPress? Revisa las diferentes opciones que tienes.Ver más

Jooble
Alojamiento Wordpress

Niveles

Básico Intermedio Avanzado

Etiquetas

accesibilidad css dashboard editor error funcionalidad herramientas imagen js librería mejoras optimización seguridad social woocommerce

Populares

Letra capital en párrafos en WordPress

Ocultar categorías que no están activas en widget de categorías WooCommerce

Copiar al portapapeles en WordPress sin plugins

Heartbeat API de WordPress, aprende a configurarla

© logo decode pie
Política de Privacidad | Política de devoluciones
Copyrigth 2023 Todos los derechos reservados