Añadir ubicaciones de menú personalizadas en WordPress

En éste tutorial vamos a ver cómo añadir ubicaciones de menú personalizadas en WordPress.

Muchas veces necesitamos añadir nuevos menús en nuestra web, pero el tema que tenemos instalado no nos permite añadirlos en el sitio que nosotros queremos, así que tenemos 2 opciones:

• Buscar un tema que traiga esa ubicación en concreto (no es muy buena idea, ya que si luego necesitamos otro menú más, tendremos que buscar otro tema que traiga esas 2 ubicaciones, y podemos entrar en un bucle peligroso 😉 ).
• Añadir nosotros mismos la ubicación donde queramos, independientemente del tema con el que estemos trabajando.

Para el tutorial vamos a utilizar el tema Twenty Sixteen, que es el que trae WordPress activado por defecto en sus últimas versiones.

Vamos a utilizar también la magnífica herramienta online GenerateWP, que nos generará el código necesario para añadirlo.

Como vemos, el tema Twenty Sixteen trae por defecto 2 ubicaciones de menú, el menú principal que está en el header y un menú para iconos sociales que coloca en la parte derecha del footer.

Pero ¿qué pasa si necesitamos otro menú con categorías, productos destacados, posts destacados o lo que necesitemos?

1. Añadir la nueva ubicación del menú

Para ello vamos a ayudarnos de GenerateWP, una fantástica herramienta online que nos generará el código necesario para añadir a nuestro tema.

Lo primero que tenemos que hacer es acceder a su web y entrar en la opción «Menu Generator«.

En la pestaña «General» nos pide 3 datos:

• Function name: Es el nombre que le vamos a dar a la función. Yo la he llamado df_menu_footer. «df» son mis inicales, las pongo siempre delante de los nombres de las funciones porque si por casualidad añades un plugin o cualquier funcionalidad que tenga una función que se llame igual, va a dar problemas. Si añades la iniciales (o lo que sea) es muy difícil que haya otra función con ese nombre.
• Child Themes: Aquí definimos si queremos que funcione con child themes. Yo le he puesto que sí.
• Text Domain: Esto es por si hubiera traducciones. Le ponemos el mismo nombre.

Vamos la pestaña «Menu 1» (nos deja hacer hasta 5):

• Menu 1 Name: Es el nombre que le queremos dar al menú. Nos advierte de que no puede tener espacios ni mayúculas. Yo lo he llamado «menu-footer«.
• Menu 1 Description: Es la descripción que nos va a aparecer en el panel de control de WordPress en el apartado Apariencia>Menús

Ya no tenemos más campos que rellenar así que le damos a la opción Update Code y copiamos el código que nos ha generado, en éste caso es el siguiente:

Éste código lo tenemos que pegar en el archivo functions.php de nuestro tema.

Una vez que lo hemos añadido, vemos que la ubicación ya nos aparece en el panel de control:

Pero si creamos un menú y le asignamos esa ubicación no nos aparecerá, ya que tenemos que «decirle» a WordPress en qué lugar de la plantilla queremos que aparezca ese menú.

2. Añadir el menú donde queramos.

Obviamente, como a la nueva ubicación la he llamado «Menú del footer«, lo voy a colocar en el footer 😛

Para hacerlo, abrimos el archivo footer.php del tema sobre el que estamos trabajando y pegamos el siguiente código:

<?php wp_nav_menu( array( ‘menu-footer’ => ‘df_menu_footer’ ) ); ?>

Colocamos esta línea en el lugar del footer donde queramos que aparezca el menú.

Acordaos de cambiar «menu-footer» y «df_menu_footer» por lo que hayáis puesto en Menu 1 Name y en Function Name.

Ahora sí que nos aparece el menú en el sitio que le hemos asignado:

Por defecto aparece con los estilos propios del tema que estemos utilizando. Para dejarlo bonito y a nuestro gusto tendremos que añadirle algo de CSS.

Os pongo un ejemplo básico de personalización con CSS. Lo he hecho un poco exagerado para que se aprecien bien los cambios:

Y el resultado sería:

Y ya está!. Ya podemos añadir tantos menús como queramos en las ubicaciones que necesitemos.

Comparte si crees que le puede servir de ayuda alguien.