• Saltar a la navegación principal
  • Saltar al contenido principal
SiliCodeValley

SiliCodeValley

Cursos online de diseño y desarrollo WordPress

  • Newsletter
  • Acceder
  • Suscribirme

Integra barra de navegación y submenús de Bootstrap en tu tema de WordPress

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.

[intro]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).[/intro]

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 🙂

Únete al boletín: Diario de un desarrollador web freelance

Importante: envío correos con frecuencia y en cada uno además de contarte historias, consejos y marrones de mi día a día, ofrezco mis productos y servicios. Si esto te supone un problema, no te suscribas. Y si te cansas, podrás darte de baja y tan amigos.

Responsable: David Perálvarez Fernández. Finalidad: Gestionar el envío de información y prospección comercial y dar acceso a los productos online. Legitimación: Consentimiento del interesado. Destinatarios: Empresas proveedoras nacionales y encargados de tratamiento acogidos a privacy shield. Derechos: Acceder, rectificar y suprimir los datos, así como otros derechos como se explica en la información adicional.

¡Ya casi estamos! Revisa tu bandeja de entrada o la carpeta de spam para confirmar tu suscripción.

Interacciones con los lectores

Comentarios

  1. Fran Iniesta dice

    25 de octubre de 2017 a las 10:18

    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!

    Responder
    • David Perálvarez dice

      25 de octubre de 2017 a las 18:57

      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!

      Responder
      • Fran Iniesta dice

        25 de octubre de 2017 a las 19:29

        Muchísimas gracias David. Me ha sido muy útil, ya lo tengo funcionando!!

        Responder
        • David Perálvarez dice

          29 de octubre de 2017 a las 17:14

          ¡Genial me alegro!

          Responder
  2. Sergio Reyes dice

    12 de enero de 2018 a las 21:51

    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

    Responder
    • David Perálvarez dice

      13 de enero de 2018 a las 18:54

      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.

      Responder
  3. algoeraello dice

    16 de abril de 2018 a las 09:40

    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

    Responder
    • David Perálvarez dice

      16 de abril de 2018 a las 10:47

      ¡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!

      Responder
      • algoeraello dice

        16 de abril de 2018 a las 10:53

        Estoy usando bootstrap 4, pero funciona perfectamente, la unica pega es la flechita

        Responder
        • David Perálvarez dice

          16 de abril de 2018 a las 11:09

          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

          Responder

Deja una respuesta Cancelar la respuesta

Tu dirección de correo electrónico no será publicada. Los campos obligatorios están marcados con *

  • Blog
  • Acerca
  • Contacto
  • Privacidad
  • Términos
  • Aviso Legal
  • Cookies

Utilizamos cookies propias y analíticas para darte la mejor experiencia en nuestra web.

Puedes informarte más sobre qué cookies estamos utilizando o desactivarlas en los .

Resumen de privacidad
SiliCodeValley

Esta web utiliza cookies propias y analíticas para que podamos ofrecerte la mejor experiencia de usuario posible. La información de las cookies se almacena en tu navegador y realiza funciones tales como reconocerte cuando vuelves a nuestra web o ayudar a nuestro equipo a comprender qué secciones de la web encuentras más interesantes y útiles.

Cookies estrictamente necesarias

Las cookies estrictamente necesarias tiene que activarse siempre para que podamos guardar tus preferencias de ajustes de cookies.

Cookies analíticas

Esta web utiliza Google Analytics para recopilar información anónima tal como el número de visitantes del sitio, o las páginas más populares.

Dejar esta cookie activa nos permite mejorar nuestra web.

¡Por favor, activa primero las cookies estrictamente necesarias para que podamos guardar tus preferencias!

Política de cookies

Más información sobre nuestra política de cookies