Il menu bootstrap (navbar) è un componente del framework css necessario per la creazione di menu responsive, cioè menu che si adattano al tipo del dispositivo che stiamo utilizzando.

La difficoltà di integrare la navbar bootstrap in un tema wordpress sta nel fatto di dover allineare il markup html generato per i menu di wordpress con il codice previsto in twitter boostrap.

Ecco i vari passi che seguiremo in questo tutorial

  1. Inclusione degli script e fogli di stile bootstrap
  2. Definizione di un menu nel file functions.php
  3. Creazione delle voci del menu nell’area di amministrazione
  4. Inclusione di una classe php già pronta
  5. Inserimento del menu nel tema

1. Inclusione dei file

Per installare bootstrap sono necessari due file: bootstrap.min.css e bootstrap.min.js. I due file saranno posizionati in due cartelle, rispettivamente /css e /js, del tema attivo.

Il blocco seguente, da inserire nel file functions.php, serve per includere il foglio di stile nell’head, e il lo script js nel footer di tutti i documenti del tema.

//functions.php

if ( ! function_exists( 'isw_bs_assets' ) ) :

function isw_bs_assets() {

wp_register_style( 'bootstrap-css', get_template_directory_uri() . '/css/bootstrap.min.css', array(), '', 'all' );
wp_enqueue_style( 'bootstrap-css' );

wp_register_script( 'bootstrap-js', get_template_directory_uri() . '/js/bootstrap.min.js', array(), '', true );
wp_enqueue_script( 'bootstrap-js');

}

add_action( 'wp_enqueue_scripts', 'isw_bs_assets', 999 );

endif;	

2. Registrazione nuovo menu

Sempre all’interno del file functions.php registriamo un menu con il nome “Menu Bootstrap” e la posizione bootstrapmenu.

if ( function_exists( 'register_nav_menus' ) ) {

	register_nav_menu( 'bootstrapmenu', __( 'Menu Bootstrap', 'miotema' ) );
}

3. Creazione del menu nel backend di wordpress

Creiamo un nuovo menu chiamato ‘navbar’

creazione-nuovo-menu-wordpress

Aggiungiamo alcune voci, ad esempio le pagine Dove siamo, servizi e la categoria articoli.

definizione-menu-wordpress

Associamo il menu ‘navbar’ alla posizione “Menu Bootstrap”

posizione-menu-wordpress

4. Utilizzo della classe wp bootstrap navwalker

A questo punto è necessario scaricare il file wp_bootstrap_navwalker.php e inserirlo nella directory del tema. Il file poi andrà incluso con un require all’interno del functions.php. Il file contiene una classe che modifica l’output html generato per i menu di wordpress.

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

5. Inserire il menu nel tema

Utilizziamo la funzione wp_nav_menu a cui passiamo la posizione del menu (bootstrapmenu), le classi css ‘nav navbar-nav‘ e un’istanza della classe wp_bootstrap_navwalker.

<nav class="navbar navbar-default" role="navigation">
    <!-- Brand and toggle get grouped for better mobile display -->
    <div class="navbar-header">
        <button type="button" class="navbar-toggle" data-toggle="collapse" data-target=".navbar-ex1-collapse">
            <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="#">ISW</a>
    </div>

    <!-- Collect the nav links, forms, and other content for toggling -->
    <div class="collapse navbar-collapse navbar-ex1-collapse">
        <?php
        wp_nav_menu( array(
            'theme_location' => 'bootstrapmenu',
            'depth' => 2,
            'container' => false,
            'menu_class' => 'nav navbar-nav',
            'fallback_cb' => 'wp_page_menu',
            //Process nav menu using our custom nav walker
            'walker' => new wp_bootstrap_navwalker())
        );
        ?>
    </div><!-- /.navbar-collapse -->
</nav>

6. Risultato

navbar-bootstrap-wordpress

se restringiamo la finestra del browser

navbar-bootstrap-wordress-responsive

Links:

Bootstrap

Tutsplus

Edward McIntyre

 

 

 


  inStileWeb.com
blog comments powered by Disqus