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

Question

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

- 3
- 37537 2015-04-26
Je souhaite utiliser unmenu différentpourmon site Webmobile que celui demon site Webpour ordinateur. Avec différentje veux dire le contenupas lamiseen page. Je veuxjuste utiliser lemenumobile duthème des vingt-douze.

Ce quej'aifaitjusqu'àprésent:

Dansmonenfantfunctions.php,j'ai ajouté le code suivant:

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

Je suismaintenant capable de créer deuxmenus dansmontableau debord. (tableau debord>menu> localisations)

Dans le header.php,je ne saispasexactement quoi changer,doncmonmenumobileest chargé au lieu demonmenuprincipal.

<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>

J'aiessayé de changer le <?php _e( 'Menu', 'twentytwelve' ); ?> à <?php _e( 'Menu', 'mobile' ); ?>,mais celan'apasmodifié le contenu dumenu demonmenumobile.

Jene suispastrèsfamilier avec ce code,doncj'espère que quelqu'unpourrame diriger dans labonne direction.

Mercipour votre aide!
I would like to use a different menu for my mobile website than my desktop website. With different I mean the content not the layout. I just want to use the mobile menu of the twentytwelve theme.

What I've done so far:

In my child functions.php i've added the following code:

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

Now i'm able to create two menus in my dashboard. (dashboard>menu>locaties)

In the header.php I don't know exactly what to change so my mobile menu is loaded instead of my primary menu.

<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>

I've tried to change the <?php _e( 'Menu', 'twentytwelve' ); ?> to <?php _e( 'Menu', 'mobile' ); ?>, but this didn't change the menu content to my mobile menu.

I'm not that familiar with this code so hopefully someone can point me in de right direction.

Thank you for your help!
menus navigation mobile theme-twenty-twelve

4 réponses

votes

Nikolai · Answer 1 · 2015-06-08

6

2015-06-08

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

1.) Créez les menus comme vous le souhaitezet nommez-les comme vous le souhaitez,comme unexemple "menu-mobile "et "menu-bureau ".

2.) Dans votre thèmeenfant dans le header.php,vouspouvezbasculeren fonction du wp_is_mobile () drapeau 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é leplugin "WP Responsive Menu",quim'a égalementpermis de sélectionner unmenupourmobile. Dans la configuration du "WP Responsive Menu",ilfaut sélectionner l'élément à NE PAS afficher surmobile,qui dans le cas duthème vingt-douzeest: "# site-navigation".

Bon codage!

As recommended in a similar post: https://wordpress.stackexchange.com/a/156494/74343

1.) Create the menus as you want them, and name them as you like, as an example "mobile-menu" and "desktop-menu".

2.) In your child theme in the header.php you could switch according to the wp_is_mobile() flag like this:

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

However I used the "WP Responsive Menu" plugin, which allowed me to select a menu for mobile as well. In the configuration of the "WP Responsive Menu" one needs to select the element NOT to show on mobile, which in the case of the twenty twelve theme is: "#site-navigation".

Happy coding!

Jordan · Answer 2 · 2018-02-23

1

2018-02-23

Si quelqu'un regardeencore cefil,je me débattais avec ça depuis unmoment,aucun de cesproblèmesn'afonctionné ... Jepourrais lefaire avec CSS!

Engros,créez unmenugéant avectous les éléments souhaités surmobileet ordinateur debureau.Ensuite,ajoutez les classes: "hide-mobile"et "hide-desktop" sur leurs éléments demenu respectifs.

Utilisez ce CSS:

 @media (min-width: 980px){

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

}

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

}

If anyone is still watching this thread, I had been struggling with this for a while, none of these worked... I could do it with CSS!

Basically, create one giant menu with all the items you want on mobile and desktop. Then, add classes: "hide-mobile" and "hide-desktop" on their respective menu items.

Use this CSS:

@media (min-width: 980px){

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

}

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

}

Jeroen Onstenk · Answer 3 · 2018-08-04

0

2018-08-04

Enplus du commentaire Jordans,ilestimportant de savoir comment ajouter une classe à un élément demenu dans Wordpress:

Pour ajouter des classes CSS à unmenu WordPress,allez d'abord dans Apparence> Menus dans votrethème WordPress.Ensuite,recherchez l'onglet Options d'écranen haut à droite de l'écran.Cliquezpour ouvrir lepanneauet cochez la case Classes CSS.Sélectionnez lemenu que vous souhaitezmodifier,puis cliquez sur le lien auquel vous souhaitez ajouter une classe CSS.

BrianHenryIE · Answer 4 · 2019-09-06

0

2019-09-06

Une autre approche quin'impliquepas de remplacer lesfichiers/modèles dethème:

Dans le functions.php duthèmeenfant,ajoutez:

 /**
 * Register the 'mobile' menu location with WordPress so it can be configured in the admin UI.
 */
register_nav_menus( array(
    'mobile' => 'Mobile Replace Primary',
) );

/**
 * When building menus, if the menu location 'primary' is being used, and we're on mobile,
 * swap it out for the menu location 'mobile'.
 * 
 * @see wp_nav_menu()
 */
add_filter( 'wp_nav_menu_args', function( $args ) {

    if( 'primary' === $args['theme_location'] && wp_is_mobile() ) {
        $args['theme_location'] = 'mobile';
    }

    return $args;
} );

Ensuite,configurez votremenumobile dans wp-admin/Appearance/Menus.

Another approach which doesn't involve overriding theme files/templates:

In the child theme's functions.php add:

/**
 * Register the 'mobile' menu location with WordPress so it can be configured in the admin UI.
 */
register_nav_menus( array(
    'mobile' => 'Mobile Replace Primary',
) );

/**
 * When building menus, if the menu location 'primary' is being used, and we're on mobile,
 * swap it out for the menu location 'mobile'.
 * 
 * @see wp_nav_menu()
 */
add_filter( 'wp_nav_menu_args', function( $args ) {

    if( 'primary' === $args['theme_location'] && wp_is_mobile() ) {
        $args['theme_location'] = 'mobile';
    }

    return $args;
} );

Then configure your mobile menu in wp-admin / Appearance / Menus.