¿Cómo crear menús personalizados con WordPress?
WordPress tiene muchísimas funciones que nos ayuda a resolver tareas casi diarias de cualquier programador o maquetador. Entre ellas tenemos la función wp_nav_menu() que renderiza un menú junto a todos los ítems que hayamos cargado en el administrador de nuestro CMS. Pero, ¿qué pasa cuando un diseñador nos presenta un mockup/diseño con una estructura muy específica? Veremos en este artículo cómo podemos generar menús personalizados siguiendo estos pasos muy simples.
El problema
La función wp_nav_menu() genera una estructura HTML con ciertas clases e identificadores por defecto que, si bien pueden modificarse, no siempre se ajusta a las necesidades del proyecto.
A modo de ejemplo, voy a dar de alta un menú llamado «Principal» (en el menú «Apariencias – Menús» del administrador de WordPress) con los siguientes ítems:
- Inicio
- Quiénes somos
- Servicios
- Contacto
Todos ellos con un enlace «#» para simplificar el ejemplo.
En una plantilla de mi tema de WordPress escribo el siguiente código PHP para utilizar la función:
Este código renderiza el menú en el Frontend con el siguiente código HTML:
Como se puede observar en el código, la función genera un div con una clase y luego un etiqueta de lista desordenada (ul) con sus correspondientes hijos li y una gran serie de clases que pueden o no sernos de utilidad.
Por nuestra parte hemos maquetado el menú personalizado con un HTML mucho más limpio (con menos clases):
Vemos en el ejemplo que la estructura es totalmente distinta a la que genera WordPress con su función. Por cierto, la nomenclatura de clases pertenece a la técnica de maquetación BEM (Bloque, Elemento, Modificador o en su versión de inglés Block, Element, Modifier).
Ahora bien, de alguna manera tenemos que conectar este código HTML con el sistema dinámico de menús de WordPress. ¿Cómo podemos hacerlo?
La solución
Básicamente consiste en que nosotros construyamos el HTML a partir de una variable array con los ítems que conforman el menú, para ello obviamente no podemos utilizar funciones que generen código de Frontend.
En su lugar utilizaremos una función llamada wp_get_nav_menu_items() que, como su nombre lo indica, devuelve todos los ítems de un menú en una colección array. Esta función presenta una serie de parámetros que podemos modificar según las necesidades de nuestro proyecto, pero para nuestro ejemplo basta con especificar el nombre del menú.
Veamos a continuación el código final para implementar nuestra maquetación aprovechando la funcionalidad de Menús de WordPress:
Lee la documentación oficial de WordPress sobre esta función de menús personalizados para aprender un poco más sobre cómo configurar los distintos parámetros y conseguir nuevos resultados.
Conclusión
Uno de los puntos fuertes de WordPress es la libertad que brinda para implementar dinámicamente distintas estructuras de HTML. Solo basta con saber qué funciones utilizar y en qué momento.
No pierdas de vista este blog porque iremos subiendo más artículos con más información sobre WordPress y sus distintas funcionalidades.
Imagen de VisualHunt