Comment empêcher le thème mobile d'hériter du menu de navigation du bureau?

Après 5jours de recherche sur Google,d'essaiset d'erreurset denombreuxplugins,j'aienfin une solution quifonctionnepourmoi.

J'ai recommencé à utiliser unthème communpour les visiteurs debureauet mobiles,mais chacun avec sonpropremenupersonnalisé. Cela a étéfacilitépourmoi carj'expérimente avec leframework Genesiset leurthèmeenfant "Sandbox" a unefonction denavigationminimisée/mobileintégrée. Donc,j'ai simplement défini les optionsprincipaleset mobiles dans lemenu dubureau.

Pour répondre auxbesoins des visiteursmobiles,j'aiinstallé l'excellentplugin "responsivemenu": https://wordpress .org/plugins/responsive-menu/ Cela vous donne lapossibilité de sélectionner unmenupersonnalisé différentpour sa source,doncje l'ai défini surmonmenumobile.

L'ajout duplugin responsive signifie queje me suis retrouvé avec 2menus denavigation affichés,j'ai donc utilisé unpeu de CSS conditionnelpourmasquer lemenu réactif sur lebureauet masquer lemenu Genesispour lesmobiles.

 <?php if (wp_is_mobile() ): ?>
<style type="text/css">
.desktop-nav{display: none;}
#click-menu{display:block;}
</style>
<?php endif; ?>
 

Lemenu contextuelest le div dumenu réactif. Lafonction "wp_is_mobile"peut être cibléeplusprécisémenten installant lepluginmobble sinécessaire.

J'aimême ajouté une redirection depagepour les visiteursmobiles qui les amène àma versionmodifiée de lapage d'accueil:

 function so16165211_mobile_home_redirect(){
if( wp_is_mobile() && is_front_page() ){
   wp_redirect( '/mobile-home' ); 
    exit;
    }
}
add_action( 'template_redirect', 'so16165211_mobile_home_redirect' );
 

Alors voilà! C'est une solution acceptablepourmoitout à l'heure. Idéalement,je seraisen mesure d'offrir aux visiteursmobiles lapossibilité de choisir l'expériencemobile ou debureau,mais cela sembleimpliquer la configuration de cookies,ce quipourraitbien être une questionpour un autrejour.

Merciencore à TOUS qui ontpris letemps de répondre -en particulier à ceux qui ont suggéré qu'avoir 2thèmes différentsn'étaitpas lameilleure approche.

After 5 days of googling, trial and error and umpteen plugins, I finally have a solution that works for me.

I've gone back to using a common theme for both desktop and mobile visitors, but each with their own custom menu. This was made easier for me because I'm experimenting with the Genesis framework and their "Sandbox" childtheme has a minimised / mobile navigation function built in. So I simply set the primary and mobile options to the desktop-menu.

To cater for mobile visitors, I installed the excellent "responsive menu" plugin: https://wordpress.org/plugins/responsive-menu/ This gives you the option to select a different custom menu for its source, so I set this to my mobile-menu.

Adding the responsive plugin means I ended up with 2 navigation menus showing, so I used a bit of conditional CSS to hide the responsive menu on the desktop and hide the Genesis menu for mobiles.

<?php if (wp_is_mobile() ): ?>
<style type="text/css">
.desktop-nav{display: none;}
#click-menu{display:block;}
</style>
<?php endif; ?>

Click menu is the div for the responsive menu. The "wp_is_mobile" function can be more accurately targeted by installing the mobble plugin if required.

I even added a page redirect for mobile visitors which takes them to my edited-down version of the home page:

function so16165211_mobile_home_redirect(){
if( wp_is_mobile() && is_front_page() ){
   wp_redirect( '/mobile-home' ); 
    exit;
    }
}
add_action( 'template_redirect', 'so16165211_mobile_home_redirect' );

So there you have it! It's an acceptable solution for me just now. Ideally I'd be able to offer mobile visitors the option to choose the mobile or desktop experience, but that seems to involve setting cookies which may well be a question for another day.

Thanks again to ALL who took the time to respond - especially those who suggested that having 2 different themes wasn't the best approach.

Jepense que l'époque de la création d'unthème distinctpour les utilisateursmobilesest révolue depuis longtemps. Avec uneplanificationet unemiseen page appropriées,vouspouvez utiliser unthème sur les ordinateurs debureau,les ordinateursportables,lestabletteset les appareilsmobiles

Je voudrais aborder cette question d'unemanièretrès différente.

• Premièrement,je créeraismonthème demanière à ce qu'il soit réactif selon lataille d'écran requise,comme d'habitude. Pour desexemples,voir lesthèmesfournis,spécialement àpartir de vingt-douze

• Utilisez labalise conditionnelle wp_is_mobile() pour charger desfonctions quine seront spécifiques qu'auxtéléphonesportables. Je créerais également unfichier defonctions séparéesjustepour quemesfonctionsmobiles lesgardent organisées. Exemple

   if(wp_is_mobile()) {
     //DO SOMETHING FOR MOBILE
  }else{
    //DO SOMETHING FOR EVERYTHING ELSE NOT MOBILE
  }
  

• Créez unefeuille de style spécifique uniquementpour vos stylesmobiles,puismettez cettefeuille de styleen file d'attente demanière conditionnelle à l'aide de labalise conditionnelle wp_is_mobile(). N'oubliezpas d'ajouter lapriorité à votre action afin que chaquefois que cettefeuille de style se charge,elle se chargeen dernier.

Pour lemenu,je regarderais également lesthèmes regroupés. J'aime lemenu vingt-quatorzeet commentil répond. Toutestgérépar de simplesjs à l'intérieur defunctions.js. Vouspouvez l'utiliseret l'adapter dans votreproprethème. Jen'aijamaistravaillé avecgenesis,doncje ne saispas quels hooksils utilisent.

Uneexcellenteidée vient également de cetutoriel de wpmudev.org,quiincorporeessentiellement leplugin Sidr d'Alberto ValeropourjQuery. Je l'ai utilisé dans l'un demes vingt-quatorzethèmespourenfants,et celafonctionnetrèsbien.

Cene sont là que quelques alternatives que vouspouvezenvisager. J'espère que cela vous aidera à résoudre votreproblème

I do think that the days of creating a separate theme for mobile users are long gone. With proper planning and layout you can use one theme on desktops, laptops, tablets and mobile devices

I would tackle this is a much different way.

• Firstly, I would create my theme in such a way it is responsive on according to the required screensize like normal. For examples see the bundled themes, specially as from twentytwelve

• Use the wp_is_mobile() conditinal tag to load functions that will only be specific to mobile phones. I would also create a separte functions file just for my mobile functions to keep them organised. Example

  if(wp_is_mobile()) {
     //DO SOMETHING FOR MOBILE
  }else{
    //DO SOMETHING FOR EVERYTHING ELSE NOT MOBILE
  }
  

• Create a spearate stylesheet just for your mobile styles, then enqueue this stylesheet conditionally using the wp_is_mobile() conditional tag. Just remember to add priority to your action so that whenever this stylesheet load, it loads dead last.

For the menu, I would also look at the bundled themes. I like the twentyfourteen menu and how it respond. All is handled by simple js from inside functions.js. You can make use of this and adapt it in your own theme. I have never worked with genesis, so I don't know what hooks ets they are using.

Also a great idea comes from this tutorial from wpmudev.org, which basically incorporates the Alberto Valero’s Sidr plugin for jQuery. I've used it in one of my twentyfourteen child themes, and it works great.

These are just a few alternatives you can consider. I hope some of this helps in solving your problem

Créez 2menus.Unpour l'affichage sur lesmobileset unpar défautpour les ordinateurs debureau.Ajoutez ce code dans votre header.php ou vouspouvez utiliser un hook dans votrefichier defonctions.

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

Ou vouspouvez créer 2menuspersonnaliséset utiliser ce code:

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

Ou vouspouvez changer dethème sous condition:

 add_filter( 'stylesheet', 'wpsites_change_themes' );
add_filter( 'template',   'wpsites_change_themes' );

function wpsites_change_themes( $theme ) {
    if ( wp_is_mobile() ) 
        $theme = 'my-mobile-theme';
    return $theme;
}
 

Create 2 menus. One for display on mobiles and one as a default for desktops. Add this code in your header.php or you could use a hook in your functions file.

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

Or you could create 2 custom menus and use this code:

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

Or you could switch themes conditionally:

add_filter( 'stylesheet', 'wpsites_change_themes' );
add_filter( 'template',   'wpsites_change_themes' );

function wpsites_change_themes( $theme ) {
    if ( wp_is_mobile() ) 
        $theme = 'my-mobile-theme';
    return $theme;
}

C'est assez étrange d'avoir deuxthèmes comme vous le décrivez,maisje pense quenouspouvons comprendre cela.

Dans les deuxthèmes,partout où votremenuestimprimé (probablement header.php),vous aurezbesoin d'un code comme celui-ci qui choisit lebonmenu,puis l'imprime:

 $desktop_theme_name = 'Desktop Theme Name'; // Replace this with the name of the desktop theme
$mobile_theme_name = 'Mobile Theme Name'; // Replace this with the name of the mobile theme

// Get the current theme's information
$current_theme = wp_get_theme();

if ( $current_theme->Name == $desktop_theme_name ) {

    // Print desktop menu
    // NOTE: Instead of using "theme_location" use "menu"

    wp_nav_menu( array(
        'menu' => 'Desktop Menu', // Replace this with the name, slug, or ID of your desktop menu
        // Rest of menu options if needed
    ) );

} else if ( $current_theme->Name == $mobile_theme_name ) {

    // Print mobile menu

    wp_nav_menu( array(
        'menu' => 'Mobile Menu', // Replace this with the name, slug, or ID of your mobile menu
        // Rest of menu options if needed
    ) );

} else {

    // Not using one of the special themes, so just print the menu!

    wp_nav_menu();

}
 

J'espère que cela aide,bonne chance!

Its quite odd to have two themes running like you describe, but I think we can figure this out.

In both themes, wherever your menu is printed (probably header.php) you'll need some code like this that chooses the correct menu, then prints it:

$desktop_theme_name = 'Desktop Theme Name'; // Replace this with the name of the desktop theme
$mobile_theme_name = 'Mobile Theme Name'; // Replace this with the name of the mobile theme

// Get the current theme's information
$current_theme = wp_get_theme();

if ( $current_theme->Name == $desktop_theme_name ) {

    // Print desktop menu
    // NOTE: Instead of using "theme_location" use "menu"

    wp_nav_menu( array(
        'menu' => 'Desktop Menu', // Replace this with the name, slug, or ID of your desktop menu
        // Rest of menu options if needed
    ) );

} else if ( $current_theme->Name == $mobile_theme_name ) {

    // Print mobile menu

    wp_nav_menu( array(
        'menu' => 'Mobile Menu', // Replace this with the name, slug, or ID of your mobile menu
        // Rest of menu options if needed
    ) );

} else {

    // Not using one of the special themes, so just print the menu!

    wp_nav_menu();

}

Hope that helps, good luck!

0 vote contre 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; } }
 

0 down vote 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; } }