WordPress: Añadir mas de un menú de navegación personalizado

junio 22, 2015 | Wordpress

Cuando estamos en la construcción un theme para wordpress a veces tenemos la necesidad de agregar un menú adicional a nuestro diseño, generalmente yo uso 2 menús o hasta 3 de pendiendo del proyecto pero para este ejemplo voy a hacer 2 menús uno para el header y el otro para el footer, manos al código.

functions.php

Este archivo se encuentra en la raíz de tu theme, generalmente si tienes un solo menú tendrías que tener algo como esto. este sirve para registrar al menos un menú a tu theme.

function registar_un_menu() {
register_nav_menu('mi-menu',__( 'Mi Menu' ));
}
add_action( 'init', 'registar_un_menu' );

Bueno esta es la base para poder agregar mas menús (todo los que necesites) la función registar_un_menu es el nombre de la función, dentro de la misma se agrega un método de wordpress register_nav_menu para poder registrar el menú, este recibe 2 parámetros, en el cual puedes agregar mas de un menú, como el siguiente ejemplo.

 

function registrar_mis_menus() {
register_nav_menus(
array(
'Menu-Header' => __( 'Menu Header' ),
'Menu-Footer' => __( 'Menu Footer' )
)
);
}
add_action( 'init', 'registrar_mis_menus' );

como veras en esta parte hemos creado una función llamada registrar_mis_menus a la cual le asignamos el método para agregar mas de un menú de wordpress register_nav_menus  este recibe un array para que soporte múltiples menús, puedes seguir agregando los menús que desees solo no olvides que el último menú no tiene que llevar coma al final.

Ahora vamos a llamar al menú para que se muestre en el theme puedes poner lo donde deseas que se muestre tu menú.

//llamando al menu del header
<?php wp_nav_menu( array( 'theme_location' => 'Menu-Header' ) ); ?>

//llamando al menu del footer
<?php wp_nav_menu( array( 'theme_location' => 'Menu-Footer' ) ); ?>

bueno ahora para hacer las cosas mas interesantes podemos agregar un clase al contender de nuestro menú, para luego poder manipularlo a través de CSS o Javascript, para hacer lo dicho hay que agregar un nuevo item a nuestro array a la hora de llamar al menú, de la siguiente manera.

<?wp_nav_menu( array( 'theme_location' => 'Menu-Header', 'contenido_class' => 'nombre_de_clase' ) ); ?>

Ver los menú en el panel de administración en: apariencia>Menús

Estos son los menús creados
menu-personalizado-wp

 

Te recomiendo crear un nuevo menú para luego asignarlo a uno de los menús creados
menu-personalizado-wp-02

 

Luego de haber creado tu menú tienes que escoger entre uno de los 2 que hemos creado, haciendo un «check» al que deseas asignar.
menu-personalizado-wp-03

Relacionados