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

Cómo redirigir al usuario cuando inicia o cierra sesión en WordPress
Cómo redirigir al usuario cuando inicia o cierra sesión en WordPress
En este artículo vamos a explicar cómo redirigir al usuario cuando inicia o cierra sesión en WordPress. Ésto puede resultar muy útil en un desarrollo…
Añadir cabeceras HTTP de seguridad en WordPress
Añadir cabeceras HTTP de seguridad en WordPress
En éste artículo vamos a ver cómo podemos enviar cabeceras HTTP de seguridad en nuestra web. Creo que es algo que no se utiliza mucho,…
Optimizando el código y las consultas a base de datos para mejorar el rendimiento
Optimizando el código y las consultas a base de datos para mejorar el rendimiento
Optimizar el código y las consultas a base de datos es algo fundamental para cualquier desarrollo web, sobretodo si estás desarrollando un proyecto para sitios…
Cómo aumentar el límite del tamaño de archivos en la librería multimedia
Cómo aumentar el límite del tamaño de archivos en la librería multimedia
En función del hosting que hayamos contratado, en algunas ocasiones podemos encontrarnos con límites a la hora de subir archivos a la librería multimedia en…