Wordpress :Plusieurs menus bootstrap

WordPress : Plusieurs menus bootstrap

Voici un petit mémo pour parvenir à faire fonctionner deux menus bootstrap sous wordpress.
Je pars du principe qu’on a déjà un premier menu et que notre thème supporte l’insertion d’un second menu. Si vous souhaitez rajouter une seconde zone de menu sur votre thème, reportez vous à ce petit mémo!

Voici un exemple de menu bootstrap sous wordpress:

         <nav class="navbar navbar-default" role="navigation">
                    <!-- Mobile display -->
                    <div class="navbar-header">
                        <button type="button" class="navbar-toggle" data-toggle="collapse" data-target="#topnav-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>
                    <nav id="topnav" class="clearfix" role="navigation">
                        <p id="topnav-icon"></p>
                        <?php
                        wp_nav_menu(array(
                            'theme_location' => 'secondary',
                            'container' => false,
                            'menu_id' => 'topnav-menu',
                             'menu_class' => 'collapse navbar-collapse main-nav',
                            'fallback_cb' => '',
                            'depth' =>3,
                              'walker' => new wp_bootstrap_navwalker()
                            )
                        );
                        ?>
                    </nav> 
                </nav>

L’attribut data-target

Ce qui risque de se passer si vous copiez tel quel le code d’un menu pour le doubler, c’est qu’en cliquant sur un bouton en version mobile, soit les deux menus se dérouleront, soit un seul bouton sur les deux marchera.. bref, en fait la fonction js qui permet le déroulé du menu est invoquée dans l’attribut data-target= » » et elle cible la div ou la classe qu’on lui donne en valeur : ici je l’appelle topnav-menu.

Dans ma fonction wp_nav_menu() et ses arguments, je prend en paramètre ‘menu_id‘ et je lui fais correspondre mon ID => ‘topnav-menu’, pour faire le lien.
Dans mon second menu, je change la cible de mon data-target , j’appelle cette fois la div #main-menu, je vais donc dans les arguments de ma deuxième fonction wp_nav_menu lier mon ‘menu_id‘ à ma div ‘main-menu‘,

    <nav class="navbar navbar-default" role="navigation">
                                        <!-- Mobile display -->
                                        <div class="navbar-header">
                                            <button type="button" class="navbar-toggle" data-toggle="collapse" data-target="#main-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>
                                        <nav role="navigation" class="site-navigation main-navigation">
                                            <?php
                                            wp_nav_menu(array('theme_location' => 'primary',
                                                'container' => false, 
                                                 'menu_class' => 'collapse navbar-collapse main-nav',
                                                 'fallback_cb' => '',
                                                'menu_id' => 'main-menu',
                                                'depth' => 3,
                                                'walker' => new wp_bootstrap_navwalker()));
                                            ?>
                                        </nav> 
                                    </nav>

Du coup les menus marchent bien en version mobile et sont bien indépendants l’un de l’autre. Bien sûr vous devrez modifier le css pour ce nouveau menu.

24/01/2015 Mis à jour le 19/12/2019 Par Copier coller | Dans wordpress