WordPress: Cómo crear ubicaciones de menú

¡Buenos días! Hoy vamos a ver cómo crear y añadir nuevas ubicaciones de menú para temas de WordPress y para Genesis en concreto. ¡Vamos allá!

Caso 1: Crear ubicaciones de menú para cualquier tema de WordPress

Para hacerlo seguimos estos pasos:

1. Accedemos al archivo functions.php en el directorio de nuestro tema (método no recomendado) o a nuestro plugin de snippets (método recomendado).

2. Introducimos el siguiente código (o creamos un snippet con el siguiente código):

if ( ! function_exists( 'custom_navigation_menu' ) ) {
function custom_navigation_menu() {
        $locations = array(
		'footer_menu' => __( 'Menú que se mostrará en el footer', 'custom_navigation_menu' ),);
	register_nav_menus( $locations );}
add_action( 'init', 'custom_navigation_menu' );}

3. Cambiamos si queremos el ‘Menú que se mostrará en el footer‘ para ponerle nuestro propio nombre a la ubicación. Esto no es muy relevante.

Ahora que hemos registrado una ubicación, debemos indicar dónde se mostrará. Para eso seguimos con estos pasos:

4. Accedemos al archivo responsable de la zona en la que queremos mostrar el menu en la carpeta del theme (wp-content > themes >carpeta_del_theme). Por ejemplo, si queremos que se muestre en el footer, debemos buscar y acceder al footer.php. Este paso depende un poco del tema en cuestión pero en la mayoría de los casos estos archivos son fáciles de encontrar.

5. Insertamos el siguiente código en la zona donde queremos que se muestre el menú. Hay que saber un poco de HTML para saber dónde insertar ese código y que se muestre exactamente donde nosotros queramos:

<?php wp_nav_menu( array('theme_location' => 'footer_menu') );?>

Este valor para ‘theme_location’ debe coincidir con el texto que está en negrita en el paso 2.

Advertencia: si vamos a insertarlo en una zona donde ya estan abiertas las etiquetas de PHP (<?php ?>) debemos insertar el código sin incluir esas etiquetas, tal como así:

wp_nav_menu( array('theme_location' => 'footer_menu') );

6. ¡Guardamos y ya esta! Ahora si vamos al las ubicaciones de menús en nuestro panel de control y asignamos un menú a esa ubicación, veremos que se muestra el menú en el lugar que le hemos indicado.

Es normal que se muestre sin estilos, ya que no les hemos indicado ninguna clase ni hemos personalizado su diseño.

Ahora veamos cómo hacerlo si utilizamos Genesis.

Caso 2: Crear ubicaciones de menú con Genesis

En este caso seguiremos estos pasos:

1. Accedemos al archivo functions.php en el directorio de nuestro tema (método no recomendado) o a nuestro plugin de snippets (método recomendado).

2. Introducimos el siguiente código (o creamos un snippet con el siguiente código):

function register_additional_menu() {
register_nav_menu( 'nuestro-menu' ,__( 'El nombre de nuestra ubicación' ));}
add_action( 'init', 'register_additional_menu' );

function add_nav_genesis() {
wp_nav_menu( array( 'theme_location' => 'nuestro-menu', 'container_class' => 'genesis-nav-menu' ) );}
add_action( 'genesis_after_header', 'add_nav_genesis' );

3. De nuevo podemos cambiar en nombre de la ubicación en el lugar que esta en negrita.

4. En la segunda parte del código, donde pone ‘genesis_after_header’ es donde se indica el lugar donde se mostrará el menú. En Genesis hay varios lugares disponibles y podes consultarlos por ejemplo en esta guía visual de hooks para Genesis.

5. ¡Guardamos y ya estamos! Ahora si volvemos a la configuración del menú podemos asignarle un menú a esa nueva ubicación. En este caso, a diferencia del anterior, le hemos asignado una clase (genesis-nav-menu) así que el menú se mostrará estilizado.