Blog sobre desarrollo WordPress en Español Desarrollo WordPress en Español
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!

Puede que también te interese

WordCamp Barcelona 2018, gestión avanzada de assets en WordPress
WordCamp Barcelona 2018, gestión avanzada de assets en WordPress
He tenido el gran honor de abrir la WordCamp Barcelona 2018 en el Aula Magna del Edificio Histórico de la Universidad de Barcelona. Hoy en día,…
Como convertir parámetros por GET en URLs amigables
Como convertir parámetros por GET en URLs amigables
Es muy habitual pasar parámetros por $_GET a una página para procesar algo, o simplemente para mostrar un contenido u otro en función del mismo.…
Cómo pasar un parámetro a un filtro de WordPress
Cómo pasar un parámetro a un filtro de WordPress
Hace unos días publiqué una entrada sobre qué son, cómo crear y cómo utilizar los filtros de WordPress. En esta entrada vamos a ver cómo…
Cómo crear un formulario de log-in/log-out personalizado con WordPress
Cómo crear un formulario de log-in/log-out personalizado con WordPress
En la anterior entrada Cómo restringir el acceso al back-end de WordPress a usuarios no administradores vimos como limitar el acceso al panel de control…