Comment masquer votre menu WordPress mobile

Avec le nombre de les utilisateurs d’Internet mobile surpassent ceux de bureau, il n’est pas surprenant que les concepteurs de sites Web fassent tout leur possible pour les satisfaire. Avoir une version mobile d’un site Web, ou même convertir un site Web en une application mobile est devenu la norme. La raison en est simple : différents rapports d’aspect et différentes résolutions nécessitent différents modes d’affichage pour différentes fonctionnalités, ou des fonctionnalités complètement différentes. C’est ce qu’on appelle le responsive design : différentes versions pour différentes tailles d’écran. Et l’une des fonctionnalités qui pose problème aux concepteurs et aux utilisateurs d’appareils portables est le menu.

Les menus peuvent être volumineux, compliqués et encombrants pour les utilisateurs mobiles qui, de par la nature même de leurs appareils, disposent d’un espace d’écran limité. C’est pourquoi de nombreux thèmes WordPress premium sont équipés de menus mobiles. Néanmoins, vous pouvez avoir un thème qui ressemble et fonctionne exactement comme vous le souhaitez et qui manque tout simplement de cette option. Donc, si vous souhaitez masquer votre menu mobile ou peut-être le remplacer par un autre, vous nous avez pour vous aider. C’est de cela que nous allons parler :

Comment masquer votre menu WordPress mobile à l’aide de code

La première chose que nous aimerions vous montrer est comment masquer un menu ou des parties d’un menu sur des appareils mobiles à l’aide de CSS. Cela nécessitera un peu de codage de votre part, ainsi que l’utilisation de l’outil d’inspection, mais ce n’est pas grave de toute façon.

Afin de masquer tout le menu, vous devez connaître l’identifiant et la classe CSS de votre menu. Cela peut varier d’un thème à l’autre, c’est là que l’outil d’inspection est utile. Cliquez simplement avec le bouton droit n’importe où sur votre site Web, à condition que vous n’ayez pas désactivé le clic droit, et sélectionnez Inspecter dans le menu déroulant. Vous pouvez également appuyer sur le bouton F12.

Inspecter

Maintenant, après avoir activé l’outil d’inspection, vous pouvez faire défiler le Éléments pour mettre en surbrillance les éléments dans la vue principale. Vous pouvez facilement trouver le menu dans la version de bureau de votre site Web, mais ce n’est pas celui que vous devez cacher. Au lieu de cela, vous devez redimensionner votre écran pour afficher la vue la plus étroite en faisant glisser le bord vertical de votre fenêtre. La classe que nous voulons masquer sur la version mobile de notre site Web s’appelle menu-bouton-conteneur. Notez que sur votre site Web, la classe peut être nommée différemment.

Menu étroit

Afin de masquer cette version particulière du menu de la version mobile du site Web, vous devez ajouter du CSS à votre site Web. Aller vers Apparence/Personnaliser depuis votre tableau de bord WordPress et sélectionnez le CSS supplémentaire rubrique et le Mobile version du site. Vous pouvez basculer entre les différentes versions de votre site Web dans le menu en bas à gauche. Cliquez sur l’icône mobile pour modifier la version mobile du site Web.

CSS Mobile supplémentaire

Le code que vous devez entrer dans le CSS supplémentaire le champ est :

.menu-button-container {
display:none;
}

Une fois que vous avez fait cela, vous pouvez voir que le menu a disparu de la fenêtre d’aperçu. Pour enregistrer vos modifications, vous devez cliquer sur le bouton Publier et votre menu mobile n’apparaîtra pas dans la version mobile de votre site Web.

En relation :  5 meilleurs plugins de questions-réponses WordPress
Menu caché

Bien sûr, vous devrez remplacer le menu-bouton-conteneur avec la classe de votre propre menu mobile.

Comment masquer des éléments de votre menu WordPress mobile à l’aide de code

Mais que faire si vous ne voulez pas masquer tout le menu ? Le fait de ne masquer que quelques éléments le rendra plus court et plus facilement navigable pour les visiteurs utilisant votre appareil mobile.

Afin de masquer un élément, vous devrez, encore une fois, ajouter du CSS au menu. Tout d’abord, accédez à Apparence/Menus depuis votre tableau de bord WordPress, cliquez sur Options d’écran dans le coin supérieur droit et vérifiez Cours CSS.

Options d'écran

Maintenant, disons que nous voulons cacher le Équipe élément de notre menu principal pour les utilisateurs mobiles. En cliquant dessus maintenant, vous verrez que vous avez activé un champ intitulé Classes CSS (facultatif). Ici, vous pouvez affecter une classe à un élément de menu. Nous attribuerons la classe cacher sur mobile à la Équipe élément et Sauvegarder notre menu.

Vous pouvez nommer vos classes comme vous le souhaitez, en respectant ces règles de nommage : une classe doit commencer par une lettre (majuscule ou minuscule) et utiliser des lettres, des chiffres, des traits de soulignement et des tirets dans le reste du nom.

Masquer sur mobile

Cela étiquette simplement le Équipe élément dans notre menu principal comme appartenant à la classe cacher sur mobile. Afin de masquer réellement tous les éléments de cette classe de la version mobile du site Web, nous devons ajouter – vous l’aurez deviné – du code à notre site Web. Aller vers Apparence/Personnaliser depuis votre tableau de bord WordPress et sélectionnez le CSS supplémentaire section.

Ajouter CSS

Le code que vous devez ajouter dans le CSS supplémentaire le champ est celui-ci :

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

Ce code masque tous les éléments appartenant au cacher sur mobile classe lorsque la largeur du site Web est de 767 pixels ou moins. Bien sûr, vous pouvez le faire pour n’importe quel élément de menu individuel, en masquant ou en affichant différents éléments pour différents appareils.

Comment masquer votre menu mobile WordPress à l’aide d’un plugin

Comme c’est très courant, si un thème ne fonctionne pas exactement comme vous l’aimez, vous pouvez le compléter avec un plugin. Le plugin que nous utiliserons est WP Mobile Menu. N’oubliez pas, cependant, qu’il existe de nombreux plugins de menu réactifs parmi lesquels choisir.

Une fois que vous avez installé et activé le plugin, vous serez automatiquement dirigé vers un écran vous invitant à accepter certaines fonctionnalités de sécurité supplémentaires par le même développeur. Nous les sauterons.

Module d'extension de menu mobile

Vous serez alors redirigé vers l’écran de configuration du plugin. La première section est la Options principales section. Là, vous devez simplement désactiver les menus de gauche et de droite. Dans le Paramètres de visibilité plus bas, vous devez basculer le Activer uniquement dans les appareils mobiles basculer vers Au.

Visibilité du menu mobile

Plus bas, dans le Masquer le menu du thème d’origine section, vous devez vous assurer que tous les éléments du menu sont cochés pour être masqués par le plugin.

Masquer l'original

Selon le thème que vous utilisez, vous devrez peut-être utiliser le Rechercher un élément rechercher au cas où l’un de vos éléments de menu porte un nom non conventionnel et que le plugin ne le reconnaît pas. Cela peut varier d’un thème à l’autre, nous ne pouvons donc pas être plus précis, mais la plupart des thèmes utiliseront des éléments conventionnels.

En relation :  Comment désactiver le mode nuit automatique sur iPhone

Une fois fait, Sauvegarder les modifications, et visitez votre site Web à partir d’un appareil mobile. Vous verrez que le menu n’apparaît pas.

Aperçu du menu mobile

Mais que se passe-t-il si vous souhaitez simplement une version différente d’un menu pour les appareils mobiles ? En fait, c’est la fonction principale de ce plugin. Dans ce cas, vous devrez créer un menu pour la version mobile de votre site Web. Nous n’entrerons pas dans les détails de la création d’un nouveau menu ici. Si vous avez besoin d’aide pour créer un menu, nous avons un tutoriel complet sur l’ajout de menus dans WordPress. N’oubliez pas de vérifier Menu mobile de gauche ou Menu mobile de droite lors de la création d’un menu mobile.

Nous utiliserons néanmoins cet espace pour dire qu’un menu mobile doit être le plus épuré possible, jusqu’à l’essentiel. Nous vous conseillons de n’utiliser que les options de navigation de base pour la version mobile de votre menu. Vos utilisateurs mobiles sont plus susceptibles d’utiliser une barre de recherche s’ils recherchent une page spécifique.

Une fois que vous avez créé et enregistré un menu, accédez à Options du menu mobile depuis votre tableau de bord WordPress.

Options du menu mobile

Ici, dans le Options principales section, vous devez sélectionner votre menu mobile pour l’affichage. Nous avons nommé le nôtre Menu mobile, mais vous pouvez nommer le vôtre comme vous le souhaitez. Vous pouvez également activer les menus de gauche et de droite. N’oubliez pas que vous devrez faire vérifier la position d’affichage du menu sur l’écran de création de menu.

Configuration des menus

Ensuite, vous avez le Options de visibilité section. Celles-ci régissent les conditions d’apparition du menu mobile. Pour afficher votre menu mobile, vous devez le rendre visible pour les appareils mobiles.

Options de visibilité

Ensuite, dans le Masquer le menu du thème d’origine section, vous pouvez choisir les éléments de menu à masquer de la version mobile. C’est un moyen efficace de créer une version mobile d’un menu, si vous connaissez sa structure. Les éléments de menu les plus courants sont vérifiés pour se cacher par défaut.

Masquer le menu d'origine

Plus bas, vous trouverez des options diverses et avancées qui vous permettent de personnaliser davantage votre menu mobile. Nous n’entrerons pas dans les détails ici, car ils ne sont pas pertinents pour afficher ou masquer les menus mobiles.

Tu devras Sauvegarder les modifications une fois que vous avez fini de configurer votre menu.

Sauvegarder les modifications

Et notre menu mobile, avec juste les bases, apparaît dans la version mobile de notre site Web. Votre menu mobile d’origine est masqué et un nouveau est à sa place.

Aperçu du menu Bridge Mobile

En conclusion

Comme nous l’avons montré, créer, afficher et masquer des menus mobiles et créer des versions alternatives de menus ne prend que peu de travail, et il existe même des plugins qui peuvent faire la plupart du travail pour vous. Quel que soit le type de site Web que vous exploitez, il est probable qu’une grande partie de vos visiteurs utilisent des appareils mobiles. Bien que la création d’une version alternative complète de votre site Web puisse être trop lourde pour vous, effectuer un petit ajustement ne pose aucun problème. Aucune raison, alors, de ne pas y arriver.

Moyens Staff
Moyens I/O Staff vous a motivé, donner des conseils sur la technologie, le développement personnel, le style de vie et des stratégies qui vous aider.
Please rotate your device