La plupart des menus mobiles WordPress semblent corrects jusqu'à ce que vous les vérifiiez sur votre téléphone. Les liens sont entassés, l'icône hamburger ne s'ouvre pas, ou vous affichez un menu de bureau à 10 éléments sur un petit écran.
Dans ce guide, je vais vous montrer comment résoudre ce problème. Vous apprendrez à activer l'icône hamburger, à contrôler ce qui s'affiche sur mobile et à configurer un menu séparé pour les petits écrans. Je couvre également les problèmes de menu mobile les plus courants.
Comment modifier le menu mobile dans WordPress
Besoin de changer les liens qui apparaissent dans votre menu ? Voir comment modifier votre menu WordPress. Vous voulez changer le style ou les couleurs de votre menu ? Voir comment personnaliser votre menu WordPress.
La première méthode de ce guide utilise SeedProd pour un contrôle visuel complet (SeedProd Pro requis). La seconde utilise le plugin gratuit Responsive Menu. Cliquez ci-dessous pour accéder à votre méthode :
Personnaliser les menus mobiles avec le constructeur de sites SeedProd
J'utilise SeedProd sur mon propre site, et les contrôles de visibilité mobile sont l'une des fonctionnalités sur lesquelles je compte le plus. Pour commencer, je vais vous montrer comment utiliser SeedProd pour personnaliser et modifier les menus mobiles visuellement, sans code.
Il est livré avec des centaines de modèles prédéfinis, une interface glisser-déposer et d'innombrables éléments de conception pour personnaliser n'importe quelle page WordPress sans effort. Que votre menu soit dans votre en-tête, votre pied de page, ou la barre latérale WordPress, vous pouvez le modifier facilement avec le constructeur de SeedProd.
De plus, les puissantes options de visibilité de ce plugin vous permettent de masquer des éléments de conception spécifiques sur les écrans mobiles ou de bureau. Par conséquent, vous pouvez adapter vos menus de navigation à différentes tailles d'écran.
Étape 1. Installer et activer SeedProd
Pour commencer, vous devrez télécharger le plugin depuis le site Web de SeedProd. Même si SeedProd a une version gratuite, nous utiliserons SeedProd Pro pour ses fonctionnalités de création de thèmes WordPress.
Note : SeedProd Pro est requis pour le Theme Builder. Lorsque vous activez le thème SeedProd, il remplace votre thème actif actuel. Vous pouvez revenir en arrière à tout moment depuis le tableau de bord du Theme Builder.
Si vous avez besoin d'aide, vous pouvez consulter ce guide sur l'installation d'un plugin WordPress.
Après l'activation, rendez-vous sur SeedProd » Paramètres, où vous pourrez saisir votre clé de licence de plugin. Vous trouverez ces informations dans la section Téléchargements de votre tableau de bord de compte SeedProd.
Collez votre clé dans le champ vide et cliquez sur le bouton Vérifier la clé pour enregistrer votre licence.
Étape 2. Choisir un modèle prédéfini
Ensuite, vous devrez choisir un design prédéfini à utiliser comme point de départ. Vous pouvez soit créer un tout nouveau thème WordPress à partir de zéro avec le Theme Builder, soit créer des pages individuelles avec le constructeur de pages de destination.
Pour ce guide, nous utiliserons le Theme Builder, mais si vous préférez créer une page de destination, vous pouvez suivre ce guide sur comment créer une page de destination dans WordPress.
Pour choisir un design pré-fait pour votre thème WordPress, naviguez vers SeedProd » Theme Builder depuis votre tableau de bord WordPress et cliquez sur le bouton Theme Template Kits.
Cela ouvrira la bibliothèque de SeedProd de modèles de sites Web pré-faits que vous pouvez installer en 1 clic.
Faites simplement défiler les designs jusqu'à ce que vous trouviez un modèle qui vous plaît, puis cliquez sur l'icône de coche pour l'importer.
Une fois que vous avez importé votre kit de site Web, vous verrez toutes les parties du modèle de votre thème dans une liste comme celle-ci :
Ce sont les modèles individuels qui composent votre thème complet, et vous pouvez personnaliser chacun d'eux avec le constructeur de pages par glisser-déposer de SeedProd.
Nous allons vous montrer comment faire cela ensuite ! C'est super facile et ne nécessitera aucune écriture de code HTML, Jquery ou CSS personnalisé.
Étape 3. Personnaliser le modèle d'en-tête
Comme le menu WordPress que nous voulons modifier se trouve dans l'en-tête, faites défiler vos parties de modèle jusqu'à ce que vous trouviez le modèle d'en-tête. Ensuite, survolez-le et cliquez sur le lien « Modifier le design ».
Lorsqu'il s'ouvre, vous verrez une mise en page avec un aperçu en direct de votre en-tête à droite et des blocs WordPress à gauche. Vous pouvez faire glisser n'importe quel bloc vers l'aperçu pour ajouter facilement de nouveaux éléments à votre page.
Cliquer sur les éléments de votre en-tête vous permet de voir leurs paramètres dans la barre latérale gauche. Par exemple, sélectionner le logo ouvrira des options pour changer l'image du logo et sa taille, son alignement et son lien.
De même, cliquer sur le bloc Menu de navigation affichera différents paramètres de menu.
Par exemple, le bloc vous permet de choisir entre un menu « Simple » ou « Menu WordPress ».
L'option Simple vous permet d'ajouter de nouveaux éléments de menu dans l'interface du constructeur de pages. Vous pouvez ajouter des liens vers n'importe quelle page, article, catégorie, étiquette ou page Web externe.
Parce que c'est une approche simple pour la création de menus, vous ne pouvez pas ajouter de menus déroulants, choisir des menus personnalisés que vous avez déjà créés, ou attribuer un menu mobile personnalisé.
Cependant, vous pouvez personnaliser l'alignement du menu, la taille de la police, l'espacement et le séparateur. De plus, dans l'onglet Avancé, vous pouvez choisir entre des menus horizontaux et verticaux et personnaliser la typographie, les couleurs d'arrière-plan, les bordures, les classes CSS, et plus encore.
L'option Menu WordPress a une approche différente. Vous pouvez choisir les emplacements de menu existants dans le menu déroulant et activer le bouton bascule de menu de navigation mobile pour les petites tailles d'écran.
Lorsque vous activez ce paramètre et passez à la vue mobile, vous verrez que votre menu mobile a une icône de hamburger au lieu de liens de menu standard, ce qui est bien mieux pour l'expérience utilisateur mobile.
Il a également un lien vers la page de menu WordPress par défaut pour modifier la mise en page de votre menu. Comme le menu Simple, l'onglet Avancé offre des options de personnalisation et d'animation, et contrairement au menu simple, vous pouvez personnaliser les options de style de votre sous-menu.
Étape 4. Modifier les paramètres de visibilité de votre en-tête
Jusqu'à présent, vous savez comment modifier votre menu principal et activer un menu hamburger pour les écrans mobiles. Mais que faire si des éléments de votre en-tête ne doivent pas s'afficher sur les petits écrans ?
La bonne nouvelle, c'est que vous pouvez modifier les paramètres de visibilité de chaque élément de page et choisir ce qui s'affiche sur différentes tailles d'écran.
Supposons que vous souhaitiez masquer l'appel à l'action (CTA) de votre en-tête sur les appareils mobiles, car cela nuit à l'expérience utilisateur. Dans ce cas, vous pouvez accéder à l'onglet Paramètres avancés de ce bloc et activer le bouton « Masquer sur mobile » dans le menu Visibilité des appareils.
Lorsque vous prévisualisez votre en-tête en mode mobile, vous le verrez grisé, ce qui signifie que le bouton ne sera pas visible pour les visiteurs mobiles.
Continuez à personnaliser les options de votre menu mobile jusqu'à ce que vous soyez satisfait de l'apparence de tous les éléments. Ensuite, cliquez sur le bouton Enregistrer pour sauvegarder vos modifications.
Étape 5. Personnaliser davantage votre thème WordPress
Une fois votre menu mobile fonctionnel, utilisez le constructeur de SeedProd pour personnaliser le reste de votre thème. Vous pouvez modifier votre pied de page, votre page d'accueil, et toute autre partie de modèle depuis le même tableau de bord.
Étape 6. Publier vos modifications
Lorsque vous êtes prêt à mettre vos modifications en ligne sur votre site WordPress, retournez au tableau de bord du constructeur de thèmes SeedProd et recherchez le bouton « Activer le thème SeedProd ». Basculez simplement ce bouton sur la position « Oui » pour activer votre thème SeedProd.
Vous pouvez maintenant visiter votre site Web et voir votre menu mobile en action.
Alternative : Modifier les menus mobiles avec un plugin WordPress gratuit
Une autre façon de modifier vos menus mobiles est d'utiliser un plugin de menu WordPress. Par exemple, avec le plugin que nous utiliserons ensuite, vous pouvez créer un menu hamburger qui se déroule sur les écrans mobiles.
Tout d'abord, vous devrez télécharger, installer et activer le plugin WordPress Responsive Menu.
Une fois le plugin activé, vous verrez une nouvelle étiquette appelée « Responsive Menu » dans votre barre d'administration WordPress. Cliquer dessus vous mènera à l'écran du menu pour ajouter un nouveau menu réactif.
Alors, cliquez sur le bouton Créer un nouveau menu. Vous verrez une fenêtre contextuelle avec différents thèmes de menu parmi lesquels choisir, y compris par défaut, Bleu électrique, Pleine largeur, et plus encore.
Choisissez un thème que vous aimez, puis cliquez sur le bouton Suivant.
Vous pouvez maintenant entrer un nom pour votre menu, choisir un menu WordPress existant à afficher et cliquer sur le bouton Créer le menu.
Maintenant, vous verrez une interface visuelle où vous pouvez modifier les options de votre menu réactif. Vous pouvez afficher et masquer différents éléments et modifier la largeur minimale et maximale de l'écran pour la réponse mobile.
Le plugin de menu réactif offre de nombreuses autres options de menu mobile pour modifier le comportement et l'apparence de votre menu. Vous pouvez les explorer sur cette page et les ajuster si nécessaire.
N'oubliez pas de cliquer sur le bouton « Mettre à jour » pour enregistrer vos paramètres.
À partir de là, vous pouvez visiter votre site Web pour voir le menu réactif en action.
Comment afficher un menu différent sur mobile
Les téléphones mobiles représentent désormais près de 60 % du trafic web mondial, pourtant la plupart des sites WordPress affichent le même menu sur tous les appareils. Vous pouvez afficher un menu plus court et plus simple sur mobile tout en conservant le menu complet sur ordinateur.
Je trouve cela très utile lorsqu'un menu d'ordinateur contient trop d'éléments pour être utilisé sur un petit écran.
Option 1 : Utilisez l'emplacement de menu mobile de votre thème.
Certains thèmes prennent en charge un emplacement de menu distinct juste pour le mobile.
Allez dans Apparence » Menus, créez un second menu simplifié et assignez-le à l'emplacement mobile sous Paramètres du menu » Emplacement d'affichage. Voir comment modifier votre menu WordPress pour le guide complet étape par étape.
Option 2 : Utilisez la visibilité par appareil de SeedProd.
Dans le Theme Builder de SeedProd, ouvrez votre en-tête et ajoutez deux blocs Nav Menu.
Configurez l'un pour qu'il s'affiche uniquement sur ordinateur et l'autre uniquement sur mobile. Chaque bloc peut afficher un menu WordPress différent, vous donnant un contrôle indépendant par appareil.
Pour configurer cela, cliquez sur le bloc Nav Menu, allez dans l'onglet Avancé et utilisez le paramètre Visibilité par appareil. J'en ai parlé à l'étape 4 ci-dessus. Cela prend environ deux minutes à configurer une fois votre second menu créé.
Option 3 : Utilisez le plugin Responsive Menu. Le plugin gratuit Responsive Menu (abordé dans la méthode alternative ci-dessus) crée un menu uniquement mobile qui n'apparaît que sur les petits écrans. Votre menu d'ordinateur existant reste inchangé.
Dépannage des problèmes courants de menu mobile
Je reçois beaucoup de questions sur les menus mobiles qui ne fonctionnent pas correctement. Voici les problèmes les plus courants et comment les résoudre.
L'icône hamburger ne répond pas sur iOS. Un plugin de mise en cache est généralement la cause. Videz votre cache dans W3 Total Cache, WP Rocket, ou quel que soit le plugin que vous utilisez, puis testez à nouveau sur votre téléphone.
Le sous-menu mobile ne s'ouvre pas. Il s'agit presque toujours d'un conflit JavaScript avec votre thème. Essayez de passer temporairement à un thème WordPress par défaut. Si le sous-menu fonctionne, le problème se situe dans les fichiers JS de votre thème.
Les modifications du menu ne s'affichent pas après la sauvegarde. Votre plugin de mise en cache sert l'ancienne version de la page. Videz le cache et effectuez un rafraîchissement forcé dans votre navigateur (Ctrl+Shift+R sous Windows, Cmd+Shift+R sur Mac).
Le menu se casse après une mise à jour du thème. Les mises à jour de thème réinitialisent parfois les affectations d'emplacement de menu. Allez dans Apparence » Menus, ouvrez le panneau Paramètres du menu et réaffectez votre menu à l'emplacement d'affichage correct.
FAQ sur la modification des menus mobiles dans WordPress
J'espère que ce guide vous a aidé à apprendre comment modifier les menus mobiles dans WordPress. Voici quelques autres tutoriels qui pourraient également vous être utiles, y compris les suivants :
- Comment ajouter un message d'alerte personnalisé à WordPress
- Meilleurs plugins WordPress : Top 25 des outils indispensables
- Comment créer un site d'auteur dans WordPress sans coder
Merci de votre lecture ! Nous serions ravis d'entendre vos réflexions, alors n'hésitez pas à rejoindre la conversation sur YouTube, X et Facebook pour plus de conseils et de contenu utiles pour développer votre entreprise.
