WordPress : Comment obtenir un menu mobile différent du menu de bureau dans le thème enfant vingt-douze

Je souhaite utiliser un menu différent pour mon site Web mobile que pour mon site Web de bureau. Avec différent, je veux dire le contenu et non la mise en page. Je veux juste utiliser le menu mobile du thème vingt-douze.

Ce que j’ai fait jusqu’à présent :

Dans mon enfant functions.php j’ai ajouté le code suivant :

     register_nav_menus( array(
     'primary' => __( 'Primary Navigation', 'twentytwelve' ),
     'mobile' => __( 'Mobile Navigation', 'mobile'),
     ) );

Maintenant, je peux créer deux menus dans mon tableau de bord. (tableau de bord>menu>emplacements)

Dans le header.php je ne sais pas exactement quoi changer donc mon menu mobile est chargé à la place de mon menu principal.

    <nav id="site-navigation" class="main-navigation" role="navigation">
        <button class="menu-toggle"><?php _e( 'Menu', 'twentytwelve' ); ?></button>
        <a class="assistive-text" href="#content" title="<?php esc_attr_e( 'Skip to content', 'twentytwelve' ); ?>"><?php _e( 'Skip to content', 'twentytwelve' ); ?></a>
        <?php wp_nav_menu( array( 'theme_location' => 'primary', 'menu_class' => 'nav-menu' ) ); ?>
    </nav><!-- #site-navigation -->

J’ai essayé de changer le <?php _e( 'Menu', 'twentytwelve' ); ?>en <?php _e( 'Menu', 'mobile' ); ?>, mais cela n’a pas changé le contenu du menu en mon menu mobile.

Je ne connais pas très bien ce code, alors j’espère que quelqu’un pourra m’orienter dans la bonne direction.

Merci de votre aide!

Solution n°1 trouvée

Si quelqu’un regarde encore ce fil, je me débattais avec cela depuis un moment, rien de tout cela n’a fonctionné… Je pourrais le faire avec CSS !

Fondamentalement, créez un menu géant avec tous les éléments que vous souhaitez sur mobile et sur ordinateur. Ensuite, ajoutez les classes : « hide-mobile » et « hide-desktop » sur leurs éléments de menu respectifs.

Utilisez ce CSS :

@media (min-width: 980px){

    .hide-desktop{
    display: none !important;
    }

}

    @media (max-width: 980px){
    .hide-mobile{
    display: none !important;
    }

}

Solution n°2 trouvée

Comme recommandé dans un article similaire : https://wordpress.stackexchange.com/a/156494/74343

1.) Créez les menus comme vous le souhaitez, et nommez-les comme vous le souhaitez, par exemple  » menu-mobile  » et  » menu-bureau « .

2.) Dans votre thème enfant dans le header.php, vous pouvez basculer en fonction du drapeau wp_is_mobile() comme ceci :

if ( wp_is_mobile() ) {
     wp_nav_menu( array( 'menu' => 'mobile-menu' ) );
} else {
     wp_nav_menu( array( 'menu' => 'desktop-menu' ) );
}

Cependant , j’ai utilisé le plugin « WP Responsive Menu », qui m’a également permis de sélectionner un menu pour mobile. Dans la configuration du « WP Responsive Menu », il faut sélectionner l’élément à NE PAS afficher sur mobile, qui dans le cas du thème vingt douze est : « #site-navigation ».

Bon codage !

Solution n°3 trouvée

En plus du commentaire de Jordan, il est important de savoir comment ajouter une classe à un élément de menu dans WordPress :

Pour ajouter des classes CSS à un menu WordPress, allez d’abord dans Apparence > Menus dans votre thème WordPress. Ensuite, recherchez l’onglet Options d’écran en haut à droite de l’écran. Cliquez pour ouvrir le panneau et cochez la case intitulée Classes CSS. Sélectionnez le menu que vous souhaitez modifier, puis cliquez sur le lien auquel vous souhaitez ajouter une classe CSS.