La plupart des menus mobiles WordPress semblent corrects jusqu'à ce que vous les consultiez sur votre téléphone. Les liens sont entassés les uns sur les autres, l'icône en forme de hamburger ne s'ouvre pas, ou bien vous affichez un menu de bureau comportant dix é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 distinct pour les petits écrans. J'aborderai également les problèmes les plus courants liés aux menus mobiles.
Comment modifier le menu mobile dans WordPress
Vous souhaitez modifier les liens qui apparaissent dans votre menu ? Découvrez comment modifier votre menu WordPress. Vous souhaitez changer le style ou les couleurs de votre menu ? Découvrez comment personnaliser votre menu WordPress.
La première méthode présentée dans 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 à la méthode de votre choix :
Personnalisez les menus mobiles avec le créateur de sites web SeedProd
J'utilise SeedProd sur mon propre site, et les options de gestion de l'affichage sur mobile font partie des fonctionnalités dont je me sers le plus. Pour commencer, je vais vous montrer comment utiliser SeedProd pour personnaliser et modifier visuellement les menus mobiles, sans avoir à toucher au code.
Il est livré avec des centaines de modèles pré-faits, une interface drag-and-drop, et d'innombrables éléments de conception pour rendre la personnalisation de n'importe quelle page WordPress sans effort. Que votre menu soit dans l'en-tête, le pied de page ou la barre latérale de WordPress, vous pouvez le modifier facilement avec le constructeur de SeedProd.
En outre, 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. Vous pouvez ainsi adapter vos menus de navigation à différentes tailles d'écran.
Étape 1. Installer et activer SeedProd
Pour commencer, vous devez télécharger le plugin sur le site de SeedProd. Bien que SeedProd ait une version gratuite, nous utiliserons SeedProd Pro pour ses fonctionnalités de construction de thèmes WordPress.
Remarque : SeedProd Pro est nécessaire pour utiliser le Theme Builder. Lorsque vous activez le thème SeedProd, celui-ci remplace votre thème actuellement actif. Vous pouvez revenir à tout moment à votre thème précédent 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, allez dans SeedProd " Settings, où vous pouvez entrer votre clé de licence du plugin. Vous trouverez cette information dans la section Téléchargements du tableau de bord de votre 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éfabriqué
Ensuite, vous devrez choisir un modèle préétabli qui vous servira de point de départ. Vous pouvez soit créer un tout nouveau thème WordPress à partir de zéro avec le constructeur de thèmes, soit créer des pages individuelles avec le constructeur de pages d'atterrissage.
Pour ce guide, nous utiliserons le Theme Builder, mais si vous préférez créer une page d'atterrissage, vous pouvez suivre ce guide sur la création d'une page d'atterrissage 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é-fabriqués que vous pouvez installer en 1 clic.
Il vous suffit de faire défiler les modèles jusqu'à ce que vous en trouviez un qui vous plaise, puis de cliquer sur l'icône de la 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'entre eux avec le constructeur de pages par glisser-déposer de SeedProd.
Nous vous montrerons ensuite comment faire ! C'est très simple et ne nécessite pas d'écrire du code HTML, Jquery ou CSS personnalisé.
Étape 3. Personnaliser le modèle d'en-tête
Comme le menu WordPress que vous souhaitez modifier se trouve dans l'en-tête, parcourez les différentes parties de votre modèle jusqu'à ce que vous trouviez le modèle d'en-tête. Ensuite, passez la souris dessus 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 sur la droite et des blocs WordPress sur la gauche. Vous pouvez faire glisser n'importe quel bloc sur l'aperçu pour ajouter facilement de nouveaux éléments à votre page.
En cliquant sur les éléments de votre en-tête, vous pouvez voir leurs paramètres dans la barre latérale de gauche. Par exemple, en sélectionnant le logo, vous pourrez modifier l'image du logo, sa taille, son alignement et son lien.
De même, un clic sur le bloc Nav Menu permet d'afficher les différents paramètres du menu.
Par exemple, le bloc vous permet de choisir entre un "Menu simple" ou un "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, balise ou page web externe.
Comme il s'agit d'une approche simple de 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é.
Toutefois, 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, etc.
L'option Menu WordPress a une approche différente. Vous pouvez choisir des emplacements de menu existants dans la liste déroulante et activer le menu de navigation mobile pour les écrans de petite taille.
Lorsque vous activez ce paramètre et que vous passez à l'affichage mobile, vous verrez que votre menu mobile comporte une icône de hamburger au lieu des liens de menu standard, ce qui est bien mieux pour l'expérience de l'utilisateur mobile.
Il contient également un lien vers la page de menu par défaut de WordPress pour modifier la disposition de votre menu. Comme le menu simple, l'onglet Avancé propose des options de personnalisation et d'animation, et contrairement au menu simple, vous pouvez personnaliser les options de style de vos sous-menus.
Étape 4. Modifier les paramètres de visibilité de l'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 votre en-tête contient des éléments que vous ne souhaitez pas afficher sur des écrans plus petits ?
La bonne nouvelle, c'est que vous pouvez modifier les paramètres de visibilité de chaque élément de la 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 parce qu'il nuit à l'expérience de l'utilisateur. Dans ce cas, vous pouvez aller dans l'onglet Paramètres avancés de ce bloc et activer la case à cocher "Masquer sur mobile" dans le menu Visibilité de l'appareil.
Lorsque vous prévoyez votre en-tête en vue mobile, vous verrez qu'il est 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 son aspect. Ensuite, cliquez sur le bouton Enregistrer pour sauvegarder vos modifications.
Étape 5. Poursuivre la personnalisation de votre thème WordPress
Une fois que votre menu mobile fonctionne, utilisez le générateur de SeedProd pour personnaliser le reste de votre thème. Vous pouvez modifier votre pied de page, votre page d'accueil et tout autre élément du modèle depuis le même tableau de bord.
Étape 6. Publier vos modifications
Lorsque vous êtes prêt à faire vos changements sur votre site WordPress, retournez sur le tableau de bord du constructeur de thème SeedProd et cherchez la bascule appelée " Enable SeedProd Theme " (Activer le thème SeedProd). Il vous suffit de mettre ce bouton en 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 consiste à utiliser un plugin WordPress dédié aux menus. Par exemple, grâce au plugin que nous allons utiliser ci-après, vous pouvez créer un menu « hamburger » qui s'affiche par glissement sur les écrans mobiles.
Tout d'abord, vous devez 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 la barre d'administration de WordPress. En cliquant dessus, vous accéderez à l'écran de menu pour ajouter un nouveau menu réactif.
Cliquez donc sur le bouton Créer un nouveau menu. Vous verrez apparaître une fenêtre contextuelle proposant différents thèmes de menu, dont le thème par défaut, le thème bleu électrique, le thème pleine largeur et bien d'autres encore.
Choisissez un thème qui vous plaît, puis cliquez sur le bouton Suivant.
Vous pouvez maintenant saisir un nom pour votre menu, choisir un menu WordPress existant à afficher et cliquer sur le bouton Créer un menu.
Vous verrez maintenant une interface visuelle dans laquelle vous pourrez modifier les options de votre menu responsive. Vous pouvez afficher et masquer différents éléments et modifier la largeur minimale et maximale de l'écran mobile responsive.
Le plugin responsive menu dispose 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 "Mise à 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 portables représentent désormais près de 60 % du trafic Internet mondial, mais 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 pratique lorsqu'un menu du bureau comporte trop d'éléments pour s'afficher correctement sur un petit écran.
Option 1 : Utilisez l'emplacement du menu mobile de votre thème.
Certains thèmes prennent en charge un emplacement de menu distinct réservé aux appareils mobiles.
Rendez-vous dans Apparence » Menus, créez un deuxième menu simplifié, puis attribuez-le à l'emplacement mobile dans Paramètres du menu » Emplacement d'affichage. Consultez le guide détaillé étape par étape pour savoir comment modifier votre menu WordPress.
Option 2 : Utiliser la fonctionnalité de visibilité des appareils de SeedProd.
Dans le SeedProd Theme Builder, 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 pour qu'il s'affiche uniquement sur mobile. Chaque bloc peut afficher un menu WordPress différent, ce qui vous permet de contrôler indépendamment chaque appareil.
Pour configurer cela, cliquez sur le bloc « Menu de navigation », accédez à l'onglet « Avancé », puis utilisez le paramètre « Visibilité de l'appareil ». J'ai abordé ce point à l'étape 4 ci-dessus. La configuration prend environ deux minutes une fois que votre deuxième menu est créé.
Option 3 : Utilisez le plugin Responsive Menu. Le plugin gratuit Responsive Menu (présenté dans la section « Méthode alternative » ci-dessus) crée un menu réservé aux appareils mobiles qui n'apparaît que sur les petits écrans. Votre menu actuel pour ordinateur de bureau reste inchangé.
Dépannage des problèmes courants liés aux menus mobiles
On me pose souvent des questions sur les menus mobiles qui ne fonctionnent pas correctement. Voici les problèmes les plus courants et comment y remédier.
L'icône en forme de hamburger ne réagit pas sous iOS. Cela est généralement dû à un plugin de mise en cache. Videz le cache dans W3 Total Cache, WP Rocket ou tout autre plugin que vous utilisez, puis refaites un test 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 provient des fichiers JS de votre thème.
Les modifications apportées au menu n'apparaissent pas après l'enregistrement. Votre plugin de mise en cache affiche l'ancienne version de la page. Videz le cache et actualisez complètement la page dans votre navigateur (Ctrl+Maj+R sous Windows, Cmd+Maj+R sur Mac).
Le menu ne s'affiche plus correctement après une mise à jour du thème. Les mises à jour de thème réinitialisent parfois les attributions d'emplacement des menus. Rendez-vous dans Apparence » Menus, ouvrez le panneau Paramètres du menu, puis réattribuez votre menu à l'emplacement d'affichage approprié.
FAQ sur l'édition de menus mobiles dans WordPress
J'espère que ce guide vous a aidé à apprendre comment éditer des menus mobiles dans WordPress. Voici quelques autres tutoriels qui pourraient vous être utiles, notamment les suivants :
- Comment ajouter un message d'alerte personnalisé à WordPress
- Les meilleurs plugins WordPress : Les 25 meilleurs outils indispensables
- Comment créer un site d'auteur sous WordPress sans codage
Merci de votre lecture ! Nous aimerions connaître votre avis, alors n'hésitez pas à participer à la conversation sur YouTube, X et Facebook pour obtenir d'autres conseils et contenus utiles pour développer votre entreprise.
