bootstrap wordpress

Cómo integrar los estilos de los menús de bootstrap con WordPress

Si estás desarrollando un tema nuevo en WordPress y estás usando el framework Bootstrap para la maquetación del Front-end, probablemente te hayas encontrado con el problema de cómo integrar las clases de los menús de bootstrap en los menús que construye WordPress.

La solución pasa por utilizar una clase “walker” a la que llamaremos desde la función wp_nav_menu(). Afortunadamente, podemos encontrar en GitHub esta clase gracias a Edward McIntyre.

El proceso que tenemos que seguir para implementarla en nuestro tema es:

  1. Descarga la clase wp-bootstrap-navwalker desde aquí https://github.com/twittem/wp-bootstrap-navwalker.
  2. Coloca el archivo php descargado en la carpeta de tu tema
  3. Abre el archivo functions.php de tu tema y agrega la siguiente línea
  4. En el header, donde creas el menú, agrega la clase wp_bootstrap_navwalker

 

Normalmente, el menú de bootstrap se enmarca dentro de otros elementos HTML, a continuación se expone el código completo del menú de navegación que hemos creado en éste blog:

Con esto ya tendrías la funcionalidad de los menús de bootstrap integrada con los menús de WordPress, sólo quedaría maquetar los menús a tu gusto con CSS y listo!


¿Me invitas a un café?
Si te ha gustado el blog o algún artículo en concreto te ha ayudado a resolver una duda o problema que tenías…¿me invitas a un café?

Puede que también te interese

Creando un plugin para WordPress parte 3: Escribiendo el plugin
1. Creando un plugin para WordPress: Planificación y planteamiento 2. Creando un plugin para WordPress: Estilo del Código 3. Creando un plugin para WordPress: Escribiendo…
Seguridad WordPress: usa un Captcha para login
Otro “filtro” que podemos usar para proteger nuestro panel de administración o back-end. Instalando un plugin como WP Login reCAPTCHA, podremos insertar el reCAPTCHA de…
Cómo añadir nuestras propias opciones multi-idioma en el personalizador de WordPress
En la entrada anterior veíamos cómo agregar nuestras propias opciones en el personalizador de WordPress. En ésta entrada vamos a ver cómo podríamos organizarlas por…
Creando un plugin para WordPress parte 1: Planificación y planteamiento
1. Creando un plugin para WordPress: Planificación y planteamiento 2. Creando un plugin para WordPress: Estilo del Código 3. Creando un plugin para WordPress: Escribiendo…




  • Horacio Iagdes

    Genial! y esto soporta el menú deplegable?