A raíz de la duda de un alumno del curso de diseño y desarrollo de temas WordPress, he creado un nuevo episodio de La Batidora, donde aprenderás a integrar una barra de navegación de Bootstrap en tu tema de WordPress.
La dificultad reside en hacer funcionar correctamente los submenús y en este vídeo te muestro cómo lograrlo gracias al uso de un walker.
Con walker no me refiero a Chuck Norris en Walker Texas Ranger sino a uno de los parámetros de la función de WordPress: wp_nav_menu que nos permite mostrar menús.
Dicho de forma simple un walker es una clase de WordPress, que permite a los desarrolladores definir con qué HTML debe mostrarse la estructura de árbol que se genera al anidar varias listas (menús y submenús).
Es por eso que si deseamos que nuestro menú de Bootstrap se comporte bien cuando utilizamos submenús, debemos utilizar un walker especial adaptado. Por suerte el desarrollador Edward McInytre creó dicha clase y la compartió en GitHub para que todos podamos usarla.
Por lo tanto, en este vídeo aprenderás:
- A incluir la barra de navegación con submenús de Bootstrap en tu tema de WordPress.
- [Extra] A añadir una clase especial a ciertos ítems del submenú.
Enlaces de interés:
- Documentación de la clase walker de WordPress.
- Documentación de la función de WordPress wp_nav_menu.
- Clase walker adaptada a Boostrap.
- Documentación de Navbar de Bootstrap.
¡Espero que te resulte útil!
PD: Te pido disculpas por los ladridos constantes de fondo de los queridos perros de mi vecino 🙂
Muy buenas. En primer lugar, enhorabuena por el tutorial, es genial!
Querría consultarte una cosa: cómo podemos implementar el menú para que el submenú aparezca en los dropdowns al hacer hover y no al hacer clic sobre ellos?
Muchas gracias!
Muchas gracias Fran! Con un poco de jQuery podrías lograrlo. He encontrado este ejemplo en CodePen que lo muestra: https://codepen.io/bsngr/pen/frDqh ¡Un saludo!
Muchísimas gracias David. Me ha sido muy útil, ya lo tengo funcionando!!
¡Genial me alegro!
Buen día David. Me agradó bastante esta clase, e intenté replicarla, ya con varios intentos, pero con Bootstrap 4 (la versión beta). Sin embargo, me temo que no he podido. Me gustaría saber si puedes compartir tu carpeta de proyecto, para verificar que al menos no es un problema de configuración, pues mi problema sale marcado Fatal error: Class ‘WP_Bootstrap_Navwalker’ not found in C:\wamp64\www\wordpress\wp-content\themes\temaPrueba\header.php on line 48
Hola Sergio! Lo siento pero no dispongo del código. No obstante piensa que este vídeo lo creé con Bootstrap 3, es decir, la clase del ‘walker’ tenía en cuenta las clases de Bootstrap 3 y no del 4. Por lo que he podido ver tienen en GitHub el ‘walker’ para Bootstrap 4. Puedes acceder aquí. Suerte compañero.
Hola David, mil gracias por el ejemplo, pero tengo un problema, no me sale la flechita que dice que es un desplegable, y a ti si te sale, sabes porque puede ser??
Gracias
¡Buenas! Gracias a ti. La primera cosa que se me ocurre es preguntarte si estás usando Bootstrap 3. Este tutorial lo hice para la versión 3 y no la 4. ¡Un saludo!
Estoy usando bootstrap 4, pero funciona perfectamente, la unica pega es la flechita
Ok! Por lo que veo tiene que ser problema del walker de la versión 4. Desconozco como está implementado. Siempre puedes abrir un Issue en Github para que su autor te eche un cable: https://github.com/wp-bootstrap/wp-bootstrap-navwalker/issues
Saludos