Intégration d’un menu de navigation bootstrap personnalisé (ids/classes personnalisés) dans WordPress (wp_nav_menu)

Je passe un sacré moment avec ce seul problème. Tout sauf cela a très bien fonctionné pour moi, alors j’espère pouvoir obtenir des commentaires. J’ai conçu un site Web statique à l’aide de twitter bootstrap et apporté quelques modifications à la structure. Convertissez-le en un thème WordPress dynamique. J’ai une navbar-left et navbar-right ul car sur les grandes tailles (sm-lg) le logo apparaît au centre de ma barre de navigation, avec 3 liens à gauche et 3 liens à droite.

Tout fonctionne très bien, sauf lorsque j’essaie d’appliquer mes styles au wp_nav_menu généré. Je ne comprends pas vraiment cette partie, alors j’espère une explication simple. J’ai essayé d’ajouter le css personnalisé au menu (ajouté à chaque élément de menu essentiellement dans WordPress) sans succès. Je comprends également que le marcheur de navigation devra être installé, ce qui ne pose aucun problème. Vous trouverez ci-dessous le code HTML correspondant :

          <!-- Collect the nav links, forms, and other content for toggling -->

            <div id="navbar-collapse-main" class="collapse navbar-collapse">
                <ul id="left-side-nav" class="nav navbar-nav navbar-left">
                    <li><a class="nav-links" href="page-home.php">Home</a></li>
                    <li class="dropdown">
                        <a href="#" class="dropdown-toggle nav-links" data-toggle="dropdown" role="button" aria-haspopup="true" aria-expanded="false">Menu<span class="caret"></span></a>
                        <ul class="dropdown-menu">
                            <li><a class="dropdown-links" href="#">Drink Menu</a></li>
                            <li><a class="dropdown-links" href="#">Food Menu</a></li>
                            <li><a class="dropdown-links" href="#">Specials</a></li>
                        </ul>
                    </li>
                    <li><a class="nav-links" href="#">Order</a></li>
                </ul>
                <!-- /#left-side-nav -->

                <ul id="right-side-nav" class="nav navbar-nav navbar-right">
                    <li><a class="nav-links" href="#">Catering</a></li>
                    <li><a class="nav-links" href="#">Our Story</a></li>
                    <li><a class="nav-links" href="#">Contact</a></li>
                </ul>
                <!-- /#right-side-nav -->
            </div>
            <!-- /.navbar-collapse --> 
        </div>
        <!-- /.container -->
    </nav>
    <!-- /#main-nav -->

et voici le wp_nav_menu

            <?php 
            wp_nav_menu( array(
                'theme_location'        => 'primary',
                'container'             => 'nav', 
                'container_id'          => 'navbar-collapse-main',
                'container_class'       => 'collapse navbar-collapse',
                'menu_class'            => 'navbar-right navbar-left'
                ) );
            ?>

Solution n°1 trouvée

Les paramètres de cette fonction sont presque tous des chaînes, donc autant que je sache, vous ne pouvez pas l’utiliser pour appeler deux menus à la fois.

Ce que je ferais, c’est quelque chose comme ça :

<div id="navbar-collapse-main" class="collapse navbar-collapse">
<?php
wp_nav_menu( array(
                'menu'        => 'YOUR_MENU_ID',
                'menu_id'     => 'left-side-nav',
                'menu_class'  => 'navbar-left'
            ) );
wp_nav_menu( array(
                'menu'        => 'YOUR_MENU_ID',
                'menu_id'     => 'right-side-nav',
                'menu_class'  => 'navbar-right'
            ) );
?>
</div>

Et vous pouvez activer l’option « Classes CSS » dans les « Options d’écran » de la page d’administration du menu, et vous pouvez ensuite ajouter des classes personnalisées à vos éléments de menu.