Integrare il menù di Worpdress con Bootstrap

Quando andiamo a lavorare con Wordpress e in particolare con la creazione del menù del tema ci troviamo spesso in difficoltà per rendere il tutto responsive.

In particolare se vogliamo utlizzare la barra di navigazione di Bootstrap, l'integrazione con le funzioni di wordpress non sono sempre semplici e veloci.

Fortunatamente viene in nostro aiuto la libreria wp-bootstrap-navwalker.

Ora vediamo come inserirla nel nostro tema di wordpress.

Per prima cosa scarichiamo il file wp_bootstrap_navwalker.php dal repository di Github e lo inseriamo nella cartella del tema.

Successivamente apriamo il file functions.php e inseriamo questa riga di codice:

require_once( 'wp_bootstrap_navwalker.php');

Infine andiamo a integrare la libreria con la funzione wp_nav_menu() di wordpress in questo modo:

 wp_nav_menu( array(
                '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())
            );

Per funzionare al meglio la struttura finale dovrebbe essere simile alla seguente:

<nav class="navbar navbar-default" role="navigation">
  <div class="container-fluid">
    <!-- Brand and toggle get grouped for better mobile display -->
    <div class="navbar-header">
      <button type="button" class="navbar-toggle" data-toggle="collapse" data-target="#bs-example-navbar-collapse-1">
        <span class="sr-only">Toggle navigation</span>
        <span class="icon-bar"></span>
        <span class="icon-bar"></span>
        <span class="icon-bar"></span>
      </button>
      <a class="navbar-brand" href="">
                <?php bloginfo('name'); ?>
            </a>
    </div>

        <?php
            wp_nav_menu( array(
                '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())
            );
        ?>
    </div>
</nav>

Ora il nostro menù è stato formattato e implementato con la barra di navigazione di Bootstrap, con la corretta sintassi e con le giuste classi.