web-dev-qa-db-fra.com

classe de navigation cible dans wp_nav_menu

C’est mon premier thème wordpress personnalisé et il me semble que ce n’est pas ce wp_nav_menu () correct. Voici mon code wp_nav_menu ().

<?php 
wp_nav_menu( array(
    'theme_location' => 'primary',
    'container' => false,
    'menu_class' => 'js--main-nav'

) );

?>

Lorsque je clique sur le hamburger sur les appareils mobiles, il ne montre pas de liens. Mais les liens sont affichés sur la vue du bureau. J'inspecte le menu pour voir ce qui se passe. J'ai découvert que certaines classes étaient ajoutées à la.

<nav class="sticky">
    <div class="row">
        <img src="" alt="" class="">
        <img src="" alt="" class="">


        <ul id="menu-main-menu" class="js--main-nav" style="display: block;"><li id="menu-item-8" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-home current-menu-item page_item page-item-5 current_page_item menu-item-8"><a href="">Home</a></li>
            <li id="menu-item-49" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-49"><a href="">Resources</a></li>
            <li id="menu-item-79" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-79"><a href="">Blog</a></li>
        </ul>                    
        <a class="mobile-nav-icon js--nav-icon"><i class="ion-navicon-round"></i></a>

    </div>
</nav>

Voici à quoi ressemble mon code html brut avant la conversion en thème wordpress.

<nav>
    <div class="row">
        <img src="" alt="" class="">
        <img src="" alt="" class="">
            <ul class="main-nav js--main-nav">
                <li><a href="">Home</a></li>
                <li><a href="">About Us</a></li>
                <li><a href="">Make Payment</a></li>
                <li><a href="">Blog</a></li>
                <li><a href="">Contact Us</a></li>
            </ul>
            <a class="mobile-nav-icon js--nav-icon"><i class="ion-navicon-round"></i></a>
    </div>
</nav>

quelle est la bonne façon d'écrire mon wp_nav_menu () afin de cibler le avec la classe requise "main-nav" et "js-main-nav" et se débarrasser de ces "menu-main-menu" qui a été ajouté.

menus
1
julie95

Si vous consultez la documentation de wp_nav_menu() , vous remarquerez que vous avez le contrôle sur la plupart des identifiants de classe et d'habillage. Voici ce que vous pouvez transmettre à la fonction wp_nav_menu():

'menu_class'

(chaîne) Classe CSS à utiliser pour l'élément ul qui constitue le menu. 'Menu' par défaut.

'menu_id'

(chaîne de caractères) L'ID appliqué à l'élément ul qui constitue le menu. La valeur par défaut est le slug de menu, incrémenté.

'container'

(chaîne) S'il faut envelopper le ul et quoi l'envelopper. Par défaut 'div'.

'container_class'

(chaîne) Classe appliquée au conteneur. Par défaut 'menu- {menu slug} -container'.

'container_id'

(chaîne) L'ID appliqué au conteneur.

Donc, dans votre cas, vous pouvez passer le main-nav js--main-nav au menu_class et false ou une chaîne vide au menu_id. Bien que je dois mentionner, avoir une identification pour le ul ne fera pas de mal. Le supprimer ne fera rien sauf s'il y a un conflit à cause de cela.

0
Jack Johansson