web-dev-qa-db-fra.com

Comment arrêter le thème mobile héritant du menu de navigation du bureau?

MISE À JOUR ************ Eh bien, j'ai une solution de travail, même si ce n'est pas idéal.

En utilisant le thème enfant Sandbox Genesis, qui comporte un bouton de navigation mobile intégré, j'ai été en mesure de le configurer pour utiliser le menu de navigation principal, ce qui prend en charge les ordinateurs de bureau minimisés.

J'ai ensuite ajouté le plugin de menu responsive qui me permettait de choisir mon menu mobile personnalisé pour la source. Ensuite, j'ai caché le plug-in pour une utilisation sur le bureau et le bouton de menu Genesis pour les mobiles.

Je vais laisser quelques jours, puis choisir qui obtiendra les 50 points - merci à tous pour vos contributions ...

(QUESTION RE-PHRASED) Essayer de construire une version mobile de mon site.

2 thèmes, 1 pour le bureau et un autre pour les visiteurs mobiles (thème mobile sélectionné automatiquement pour les visiteurs mobiles avec "plugin pour thème mobile").

J'ai créé un menu personnalisé pour chaque thème dans wp admin/menus - menu de bureau et menu mobile.

Avec le thème de bureau activé, je sélectionne le menu du bureau pour la navigation principale. Avec le thème mobile activé, je règle la navigation principale sur le menu mobile.

Le problème est que je dois avoir le thème de bureau actif pour un fonctionnement normal. Les visiteurs mobiles voient le thème mobile alternatif, mais la navigation suit toujours la configuration définie pour la navigation principale du bureau.

Comment puis-je empêcher cela et forcer le thème mobile à toujours/uniquement utiliser la navigation mobile?

menusmobile
4
speedypancake

Après 5 jours de recherches sur Google, d'essais et d'erreurs et de nombreux plugins, j'ai enfin une solution qui fonctionne pour moi.

Je suis revenu à l'utilisation d'un thème commun pour les visiteurs de bureau et mobiles, mais chacun avec son propre menu personnalisé. Cela a été facilité pour moi car j'expérimente le framework Genesis et que leur thème enfant "Sandbox" intègre une fonction de navigation réduite/mobile. Je règle donc simplement les options principale et mobile au menu Bureau.

Pour répondre aux besoins des visiteurs mobiles, j'ai installé l'excellent plug-in "responsive menu": https://wordpress.org/plugins/responsive-menu/ Ceci vous permet de sélectionner un menu personnalisé différent pour sa source. Je règle ceci sur mon menu mobile.

L'ajout du plugin responsive signifie que je me suis retrouvé avec 2 menus de navigation affichés. J'ai donc utilisé un peu de CSS conditionnel pour masquer le menu responsive sur le bureau et masquer le menu Genesis pour les mobiles.

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

Le menu de clic est le div pour le menu sensible. La fonction "wp_is_mobile" peut être ciblée plus précisément en installant le plugin mobble si nécessaire.

J'ai même ajouté une page de redirection pour les visiteurs mobiles qui les amène à ma version modifiée de la page 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' );

Donc là vous l'avez! C'est une solution acceptable pour moi tout à l'heure. Idéalement, je serais en mesure d'offrir aux visiteurs mobiles la possibilité de choisir l'expérience de bureau ou mobile, mais cela semble impliquer l'installation de cookies qui pourraient bien être une question pour un autre jour.

Merci encore à TOUS qui ont pris le temps de répondre - en particulier ceux qui ont suggéré qu'avoir 2 thèmes différents n'était pas la meilleure approche.

2
speedypancake

Je pense que le temps de créer un thème séparé pour les utilisateurs mobiles est révolu. Avec une planification et une présentation appropriées, vous pouvez utiliser un seul thème sur les ordinateurs de bureau, les ordinateurs portables, les tablettes et les appareils mobiles.

Je voudrais aborder c'est une manière très différente.

  • Premièrement, je créerais mon thème de manière à ce qu'il soit réactif en fonction de la taille d'écran requise comme d'habitude. Pour des exemples, voir les thèmes groupés, spécialement à partir de vingt-douze

  • Utilisez la balise wp_is_mobile() conditinal pour charger des fonctions qui ne seront spécifiques qu’aux téléphones mobiles. Je créerais également un fichier de fonctions separte uniquement pour que mes fonctions mobiles restent organisées. Exemple

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

  • Créez une feuille de style spearate uniquement pour vos styles mobiles, puis mettez cette feuille de style en file d'attente de manière conditionnelle à l'aide de la balise conditionnelle wp_is_mobile(). Rappelez-vous simplement d’ajouter une priorité à votre action afin que, chaque fois que cette feuille de style se charge, elle se charge en dernier.

Pour le menu, je voudrais aussi regarder les thèmes fournis. J'aime le menu vingt-quatre et sa réponse. Tout est géré par un simple js à l'intérieur de functions.js. Vous pouvez vous en servir et l’adapter à votre propre thème. Je n'ai jamais travaillé avec la genèse, donc je ne sais pas quels crochets ets ils utilisent.

Une autre bonne idée vient également de ce tutoriel de wpmudev.org, qui incorpore fondamentalement le plugin Sidr d’Alberto Valero pour jQuery. Je l'ai utilisé dans l'un de mes 14 thèmes pour enfants, et cela fonctionne très bien.

Ce ne sont que quelques alternatives que vous pouvez envisager. J'espère que cela vous aidera à résoudre votre problème

7
Pieter Goosen

Créez 2 menus. Un pour l'affichage sur les mobiles et un par défaut pour les ordinateurs de bureau. Ajoutez ce code dans votre header.php ou vous pourriez utiliser un crochet dans votre fichier de fonctions.

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

Ou vous pouvez créer 2 menus personnalisés et utiliser ce code:

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

Ou vous pouvez changer de thème de manière conditionnelle:

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;
}
5
Brad Dalton

C'est assez étrange d'avoir deux thèmes comme vous le décrivez, mais je pense que nous pouvons comprendre cela.

Dans les deux thèmes, quel que soit l'endroit où votre menu est imprimé (probablement header.php), vous aurez besoin d'un code comme celui-ci, qui choisit le bon menu, 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 ça aide, bonne chance!

1
The Maniac

0 vote négatif 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