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

   // Register Custom Navigation Walker
   require_once('wp_bootstrap_navwalker.php');

4. En el header, donde creas el menú, agrega la clase wp_bootstrap_navwalker

   wp_nav_menu([
     'menu' => 'primary',
     'theme_location' => 'primary',
     'depth' => 2,
     'container' => 'div',
     'container_class' => 'collapse navbar-collapse',
     'container_id' => 'bs-example-navbar-collapse-1',
     'menu_class' => 'nav navbar-nav',
     'fallback_cb' => 'wp_bootstrap_navwalker::fallback',
     'walker' => new 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:

<div class="navbar navbar-default">
  <div class="container">
    <div class="visible-xs">
      <?php get_search_form();?>
    </div>

    <!-- Brand and toggle get grouped for better mobile display -->
    <div class="navbar-header">
      <button type="button" class="navbar-toggle" data-toggle="collapse" data-target=".navigation-menu">
        <span class="sr-only">Toggle navigation</span>
        <span class="icon-bar"></span>
        <span class="icon-bar"></span>
        <span class="icon-bar"></span>
      </button>
    </div><!-- navbar-header -->

    <!-- Collect the nav links, forms, and other content for toggling -->
    <nav class="collapse navbar-collapse navigation-menu" role="navigation">
      <?php wp_nav_menu( array(
        'menu' => 'header-menu',
        'theme_location' => 'header-menu',
        'depth' => 2,
        'container' => '',
        'container_class' => '',
        'menu_class' => 'nav navbar-nav',
        'fallback_cb' => 'wp_bootstrap_navwalker::fallback',
        'walker' => new wp_bootstrap_navwalker())
      );?>
    </nav><!-- navigation -->
  </div><!-- container -->
</div><!-- navbar-default -->

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!

• « Eliminar código innecesario del wp_head
• Cómo cargar correctamente los archivos… »