Hoy traigo una guía detallada de cómo crear un menú personalizado en Genesis.
El tutorial está pensado y probado en Genesis Sample, un theme que muchas y muchos usáis como starter theme. Yo mismo lo he usado así en muchas ocasiones.
La cosa cambia si hemos creado nuestro propio starter theme, como es mi caso, en el cual no dejo que Genesis cargue los menús, si no que lo hago yo, dependiendo de en que hook necesito hacerlo. Todo basado en el diseño del cliente, claro.
Testado en Genesis Sample 3.4.0 con Genesis 3.3.3
Paso 1 : Añadir el nuevo menú
En este caso buscaremos en el archivo /config/theme-supports.php
este bloque de código y añadiremos nuestro nuevo menú.
Paso 2: Mostrar el menú
En este paso no sólo vamos a mostrar el menú donde queramos situarlo, sino vamos a darle soporte para js-superfish, agregando unas clases y un ID, además de también añadir accesibilidad asignándole su skip link
.
Las siguientes podrás añadirlas en el functions.php
de tu theme o también crear un fichero PHP y llamarlo desde functions.php
lo cual personalmente recomiendo.
Paso 3: Combinar los menús en móvil (opcional)
Algo muy útil pero no imprescindible, es poder combinar los menús principales en el responsive menu en pantallas pequeñas, es decir para smartphones.
¿Y esto que quiere decir? Pues que se mostrarán los menús combinados en un mismo bloque bajo el menú hamburguesa del theme. Dicho en otras palabras, los enlaces de ambos menús estarán listados en móvil.
En el archivo config/responsive-menus.php
cambiaremos una parte del código.
Tras esto podremos comprobar que en pantallas pequeñas ambos menús se visualizan en el responsive menu.
CSS
Ya sólo queda añadir unas pocas lineas de CSS para dar un poco de apariencia y legibilidad a nuestro nuevo menú.
Cerrando
Este tutorial está enfocado y basado en Genesis Sample, pero podría modificarse para cualquier Child Theme de Genesis. Sólo hay que saber que ficheros y funciones modificar y saber donde y cómo queremos mostrar nuestro menú personalizado.
Próximamente quiero escribir un tutorial de como crear nuestros propios menús en nuestro child theme y así prescindir de los menús de Genesis.
Para cualquier duda o consulta, ya sabes, déjamela en los comentarios.
Feliz día!