Créer un menu latéral avec bootstrap et wordpress

Sur internet on trouve désormais pléthore de tutoriels sur la manière d’insérer un menu bootstrap dans wordpress. Par contre, on ne trouve pas grand chose sur la façon d’implémenter un menu latéral avec bootstrap et wordpress. Voici donc un petit tutoriel pour palier à ce manque. Dans ce tutoriel, je vais donc essayer d’aller à l’essentiel, en espérant que ça fonctionne aussi de votre coté.

Première chose à faire, il faut importer bootstrap, se créer un dossier css et js à la racine de son site, puis y insérer les fichiers bootstrap.min.css et bootstrap.min.js.

On appele ensuite ces fichiers depuis le fichier functions.php avec le code suivant:

function enqueue_bootstrap() {
  wp_enqueue_style('bootstrap-css', get_template_directory_uri() . '/css/bootstrap.min.css' );
  wp_enqueue_script('bootstrap-js', get_template_directory_uri() . '/js/bootstrap.min.js', 'jquery' );
   wp_enqueue_script('script', get_template_directory_uri() . '/js/script.js', 'jquery' );
}
add_action( 'wp_enqueue_scripts', 'enqueue_bootstrap' );

Le fichier script.js est un fichier à part, contenant du code pour notre menu.

Il faut également, importer un fichier navwalker.php, et l’appeler depuis notre fichier functions.php. Il existe plusieurs type de nawalker sur internet.

require_once('wp_bootstrap_navwalker.php');

Il faut également activer le menu pour le thème, avec le code suivant à mettre toujours dans functions.php.

<?php
add_action( 'after_setup_theme', 'cc_setup' );
    if ( ! function_exists( 'cc_setup' ) ):
        function cc_setup() {  
            register_nav_menu( 'primary', __( 'Primary Menu', 'cc' ) );
        } endif;
?>

Dans mon fichier header.php, mon menu aura le code suivant: les classes bootstrap pour créer un bloc latéral, entourant notre menu wordpress. Le bouton pour ouvrir ou fermer le menu se trouve hors du menu.

     <body <?php body_class(); ?>>
        <div id="wrapper" class="toggled">

            <div id="sidebar-wrapper" class="sidebar-nav" >
                
                    <?php
                wp_nav_menu(array(
                    'menu' => 'primary',
                    'depth' => 3,
                    
                    'fallback_cb' => 'wp_bootstrap_navwalker::fallback',
                    'walker' => new wp_bootstrap_navwalker())
                );
                ?>
         
            </div>
            <div id="page-content-wrapper">
                <div class="container">
                <div class="row">
                  <a class="btn btn-default" href="#menu-toggle" id="menu-toggle">
                      <span class="glyphicon glyphicon-align-justify"></span>
                  </a>

J’aurais également besoin de jquery pour activer mon menu: dans mon fichier script.js j’insère le code suivant:

jQuery(document).ready(function(){
jQuery(function($) {
    $("#menu-toggle").click(function(e) {
        e.preventDefault();
        $("#wrapper").toggleClass("toggled");
    });
});
});

Voici le css a apporter pour modifier certaines classes :

/*
 * Start Bootstrap - Simple Sidebar HTML Template (http://startbootstrap.com)
 * Code licensed under the Apache License v2.0.
 * For details, see http://www.apache.org/licenses/LICENSE-2.0.
 */

#sidebar-wrapper .menu-toggle {
    cursor: pointer;
}
.main-small-navigation #sidebar-wrapper .menu {
    display: none;
}
/*Ajout css*/


/* Toggle Styles */

#wrapper {
    padding-left: 0;
    -webkit-transition: all 0.5s ease;
    -moz-transition: all 0.5s ease;
    -o-transition: all 0.5s ease;
    transition: all 0.5s ease;
}

#wrapper.toggled {
    padding-left: 250px;
}

#sidebar-wrapper {
    z-index: 1000;
    position: fixed;
    left: 250px;
    width: 0;
    height: 100%;
    margin-left: -250px;
    overflow-y: auto;
    background: #000;
    -webkit-transition: all 0.5s ease;
    -moz-transition: all 0.5s ease;
    -o-transition: all 0.5s ease;
    transition: all 0.5s ease;
}

#wrapper.toggled #sidebar-wrapper {
    width: 250px;
}

#page-content-wrapper {
    width: 100%;
    padding: 15px;
}

#wrapper.toggled #page-content-wrapper {
    position: absolute;
    margin-right: -250px;
}

/* Sidebar Styles */

.sidebar-nav {
    position: absolute;
    top: 0;
    width: 250px;
    margin: 0;
    padding: 0;
    list-style: none;
}

.sidebar-nav li {
    text-indent: 20px;
    line-height: 40px;
}

.sidebar-nav li a {
    display: block;
    text-decoration: none;
    color: #999999;
}

.sidebar-nav li a:hover {
    text-decoration: none;
    color: #fff;
    background: rgba(255,255,255,0.2);
}

.sidebar-nav li a:active,
.sidebar-nav li a:focus {
    text-decoration: none;
}

.sidebar-nav > .sidebar-brand {
    height: 65px;
    font-size: 18px;
    line-height: 60px;
}

.sidebar-nav > .sidebar-brand a {
    color: #999999;
}

.sidebar-nav > .sidebar-brand a:hover {
    color: #fff;
    background: none;
}

@media(min-width:768px) {
    #wrapper {
        padding-left: 250px;
    }

    #wrapper.toggled {
        padding-left: 0;
    }

    #sidebar-wrapper {
        width: 250px;
    }

    #wrapper.toggled #sidebar-wrapper {
        width: 0;
    }

    #page-content-wrapper {
        padding: 20px;
    }

    #wrapper.toggled #page-content-wrapper {
        position: relative;
        margin-right: 0;
    }
}

Avec ces bouts de codes vous avez en principe un menu latéral fonctionnel, s’ouvrant et se refermant au clic. Il ne reste plus qu’a styliser le tout pour que votre menu soit plus attrayant, et ne ressemble pas trop à du bootstrap.

Dans le backoffice , bien sur, votre menu doit comporter le même nom que celui crée dans le fichier functions.php, ici je dois donc l’appeler Primary Menu.

Pour le menu en exemple, j’ai rajouté une classe (pour le dégradé) sur la div principale, puis j’ai rajouté une div englobante autour de mon menu, pour le styliser plus facilement:

 <div id="sidebar-wrapper" class="gradient">
       
                <div id="navigation">
                    <?php
                wp_nav_menu(array(
                    'menu' => 'primary',
                    'depth' => 3,
                    
                    'fallback_cb' => 'wp_bootstrap_navwalker::fallback',
                    'walker' => new wp_bootstrap_navwalker())
                );
                ?>
                </div>
            </div>

22/12/2014 Mis à jour le 19/12/2019 Par Copier coller | Dans wordpress