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:
1 2 3 4 5 6 7 8 9 10 11 12 13 14 | if ( ! function_exists( 'df_menu_footer' ) ) { // Register Navigation Menus function df_menu_footer() { $locations = array( 'menu-footer' => __( 'Menú del footer', 'df_menu_footer' ), ); register_nav_menus( $locations ); } add_action( 'init', 'df_menu_footer' ); } |
É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:
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 | .menu-menu-del-footer-container { width: 100%; background-color: #1a1a1a; margin-bottom:30px; } .menu-menu-del-footer-container ul { list-style: none; margin-top:35px; } .menu-menu-del-footer-container ul li { display: inline-block; margin-right: 30px; } .menu-menu-del-footer-container ul li a{ display: inline-block; padding:15px; background-color: #fff; color: #111; border-radius: 8px; } |
Y el resultado sería:
Y ya está!. Ya podemos añadir tantos menús como queramos en las ubicaciones que necesitemos.
¿Necesitas más ayuda?
Si quieres seguir aprendiendo o necesitas mi ayuda, puedes:
- Contactar para ver cómo puedo ayudarte.
- Suscribirte para no perderte ninguna de mis publicaciones.
- Si quieres comentar, adelante, te responderé encantado.
Muchas gracias por leerme 😉
Excelente artículo y tutorial para personas como yo que no sabemos casi nada de código. Tengo una pregunta adicional: Yo desearía colocar el menú de forma vertical en un «sidebar» ¿qué mas hay que complementar? Gracias Diego.
Muchas gracias, Noriaki!.
Si es en una sidebar puedes insertarlo con el widget «Menú personalizado» 😉
en dónde debo poner esto para modifical el estilo?
.menu-menu-del-footer-container {
width: 100%;
background-color: #1a1a1a;
margin-bottom:30px;
}
.menu-menu-del-footer-container ul {
list-style: none;
margin-top:35px;
}
.menu-menu-del-footer-container ul li {
display: inline-block;
margin-right: 30px;
}
.menu-menu-del-footer-container ul li a{
display: inline-block;
padding:15px;
background-color: #fff;
color: #111;
border-radius: 8px;
}
Muchas gracias!
Hola Dem.
Eso se pone en el archivo style.css del tema, pero cuidado, para que funcione las clases tienen que ser exactamente las mismas.
Un saludo.
Hola, Que tal la verdad de gran ayuda tu post, muchas gracias , mi consulta es si esto me ayudaría en lo siguiente, no lo que necesito es insertar arriba de la cabecera principal del menú, el teléfono y la dirección del local de la pagina que estoy haciendo, lamentablemente esta plantilla de wordpress no tiene esa opción, y no se como colocar esos datos encima de mi logo o del menú, y que sean adaptables para móviles, que me recomiendas no poseo mucha experiencia en wordpress. gracias!
Hola Elias!.
Para lo que tú quieras no necesitas añadir un menú nuevo, porque lo que tú quieres insertar es texto puro. Fíjate si tu tema tiene un area de widgets en el header. Otra opción es editar el archivo header.php.
Un saludo!.
Hola Diego:
Buen tutorial…muy útil.
Saludos
Hola Diego he conseguido insertar el nuevo menú que he creado pero el estilo que me da no es el que me aparece en el menú principal (horizontal, fondo negro, tipo blanca..), si no que sale vertical, separado por puntos y sin fondo de color. Me gustaría que tomara los estilos del menú predefinido. ¿Cómo puedo hacerlo?
Hola Jose Miguel!.
Deberías asignarle al menú la misma clase que tenga el menú principal. Puedes verlo con el inspector de elementos de Chrome, por ejemplo.
Un saludo!!.