web-dev-qa-db-fra.com

Comment obtenir un menu mobile différent de celui du bureau dans le thème des vingt-douze enfants

J'aimerais utiliser un menu différent pour mon site Web mobile que pour mon site Web de bureau. Par 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> locaties)

Dans le header.php, je ne sais pas exactement quoi changer, 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 la <?php _e( 'Menu', 'twentytwelve' ); ?> en <?php _e( 'Menu', 'mobile' ); ?>, mais cela n'a pas modifié le contenu du menu dans mon menu mobile.

Je ne connais pas très bien ce code et j'espère que quelqu'un pourra me diriger dans la bonne direction.

Merci de votre aide!

menusnavigationmobiletheme-twenty-twelve
3
patrick

Comme recommandé dans un message 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 " mobile-menu " et " desktop-menu ".

2.) Dans votre thème enfant dans le header.php, vous pouvez passer 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 plug-in "WP Responsive Menu" qui m'a également permis de sélectionner un menu pour mobile. Dans la configuration du "Menu réactif WP", il est nécessaire de sélectionner l'élément à ne PAS afficher sur le mobile, qui dans le cas du thème vingt-douze est: "# navigation de site".

Bonne codage!

5
Nikolai

Si quelqu'un surveille encore ce fil, cela faisait longtemps que je luttais avec ça, rien de tout cela ne fonctionnait ... Je pouvais le faire avec CSS!

Fondamentalement, créez un menu géant avec tous les éléments souhaités sur votre mobile et votre ordinateur de bureau. Ajoutez ensuite les classes "hide-mobile" et "hide-desktop" dans 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;
    }

}
0
Jordan

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

Pour ajouter des classes CSS à un menu WordPress, commencez par 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, puis cochez la case Classes CSS. Sélectionnez le menu que vous souhaitez modifier, puis cliquez sur le lien auquel vous souhaitez ajouter une classe CSS.

0
Jeroen Onstenk