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ú.
Este contenido está sólo disponible para los suscriptores.
Puedes identificarte aquí o bien registrate en este enlace.
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.
Este contenido está sólo disponible para los suscriptores.
Puedes identificarte aquí o bien registrate en este enlace.
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.
Este contenido está sólo disponible para los suscriptores.
Puedes identificarte aquí o bien registrate en este enlace.
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ú.
Este contenido está sólo disponible para los suscriptores.
Puedes identificarte aquí o bien registrate en este enlace.
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!