Implementare il menu di boostrap all’interno di WordPress

Nell’articolo tutorial di oggi vediamo come implementare il menu di Bootstrap all’interno di WordPress semplicemente agendo sul nostro wp nav menu

Il primo passo per implementare il nostro menu bootstrap all’interno di WordPress è scaricare questo il wp-bootstrap-navwalker.

[button link=”https://github.com/twittem/wp-bootstrap-navwalker” color=”blue” target=”blank” size=”large”]Download[/button]

Procedura di implementazione

Per prima cosa colleghiamo il file all’interno del functions.php in questo modo:

require_once('wp_bootstrap_navwalker.php');

A questo punto siete pronti per implementare il vostro nuovo menu bootstrap ovunque vogliate, tipicamente nel file header.php. Ecco un codice di esempio (personalizzabile a seconda delle vostre necessità).

<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 echo home_url(); ?>">
                <?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>

A questo punto dovreste vedere all’interno del vostro tema la navbar di Bootstrap perfettamente integrata con WordPress!

Conclusioni

Un comodo e facile trucchetto per implementare la navbar di Twitter Boostrap all’interno di WordPress. Voi cosa ne pensate?