La navigation sur le site est essentielle pour aider vos utilisateurs à se rendre là où ils veulent aller. Un menu bien conçu peut grandement contribuer à améliorer l’expérience de l’utilisateur (UX), et même à diminuer votre taux de rebond. Cependant, une navigation mal conçue peut faire tout le contraire.
Heureusement, WordPress vous permet de créer des menus personnalisés pour répondre aux besoins de votre site. Vous pouvez même utiliser les fonctions natives pour ajouter un menu WordPress déroulant compact qui permet de gagner de l’espace tout en offrant une orientation claire à vos visiteurs.
Dans cet article, nous allons voir pourquoi la navigation sur les sites web est importante et comment les menus déroulants peuvent être particulièrement utiles. Nous vous expliquerons ensuite comment les créer dans WordPress, et nous vous ferons part de quelques extensions qui peuvent vous aider.
Plongeons dans le vif du sujet !
Une introduction à la navigation et aux menus déroulants de WordPress
Bien qu’ils soient sans prétention, les menus de navigation sont un élément essentiel de tout site web. Ils aident les utilisateurs à trouver rapidement les pages les plus pertinentes pour atteindre leurs objectifs, tout en donnant aux nouveaux visiteurs une idée de ce que vous avez à offrir :
Un menu de navigation bien conçu est essentiel pour stimuler les conversions et réduire votre taux de rebond. Lorsque les utilisateurs peuvent facilement trouver les pages où votre produit, votre formulaire d’inscription par e-mail, ou tout autre contenu de conversion est situé, vous aurez plus de facilité à les faire acheter ou à les faire s’inscrire.
De plus, si les utilisateurs peuvent s’orienter en toute confiance sur votre site, ils n’auront pas à rebondir sur vos pages parce qu’elles se sont retrouvées au mauvais endroit. En les aidant à faire les choses correctement du premier coup, on peut à la fois améliorer l’UX et réduire les frustrations.
Dans WordPress, les menus sont une fonctionnalité inhérente. Tout site créé avec la plateforme peut afficher un ou plusieurs d’entre eux. Cependant, les thèmes WordPress jouent également un rôle important lorsqu’il s’agit de concevoir et de placer votre ou vos menus.
Pour cette raison, votre menu WordPress peut prendre de nombreuses formes différentes. Le plus connu est le menu d’en-tête standard :
Vous pouvez aussi souvent inclure un menu de pied de page supplémentaire au bas de vos pages. Il peut afficher le même contenu que votre menu principal ou offrir des options légèrement différentes :
Un autre style est le menu superposé, que les utilisateurs peuvent ouvrir et fermer à volonté :
Vous pouvez également envisager d’utiliser un menu latéral :
Vous pouvez également intégrer un menu déroulant, parfois appelé menu « imbriqué » :
Ce type de navigation est idéal pour de nombreux types de sites. Il n’obscurcira pas votre contenu comme un menu superposé mais n’est pas aussi intrusif qu’une grande barre d’en-tête ou un menu latéral.
En dissimulant certains contenus jusqu’à ce qu’ils soient nécessaires, vous économiserez de l’espace sur l’écran tout en offrant aux utilisateurs un moyen facile de se déplacer.
Comment créer un menu déroulant dans WordPress (en 5 étapes)
Si vous avez décidé qu’un menu déroulant pourrait convenir à votre site WordPress, il est assez simple de le mettre en place. En utilisant les fonctions natives de menu disponibles dans WordPress, vous pouvez créer un système de navigation personnalisé qui répond à vos besoins en seulement cinq étapes.
Étape 1 : Créer vos éléments de menu
La première étape de la création d’un menu consiste à décider de ce qu’il doit contenir. Commencez par vous rendez sur Apparence > Menus dans votre tableau de bord WordPress :
Ce que vous voyez dans l’éditeur de menu varie légèrement en fonction de votre thème.
Cependant, ce qu’il est important de noter pour l’instant, c’est la première option de l’onglet « Modifier les menus ». Vous devriez voir une option qui vous permet de sélectionner un de vos menus existants pour le modifier, ainsi qu’une option pour créer un nouveau menu :
Pour cet exemple, nous allons choisir cette dernière option et créer un nouveau menu. Cela implique d’ajouter un titre et de cliquer ensuite sur le bouton « Créer un menu » :
Vous êtes maintenant prêt à ajouter des éléments dans votre menu WordPress. Dans la plupart des cas, il est préférable de garder votre menu aussi simple que possible, tout en donnant aux utilisateurs suffisamment d’informations pour se rendre là où ils veulent aller.
L’intégration d’un trop grand nombre de pages peut submerger les visiteurs et rendre la navigation plus difficile au lieu de la faciliter.
Il existe plusieurs façons d’ajouter des éléments à votre menu. Les deux premiers sont les Pages et les Articles, et ils fonctionnent de manière très similaire.
Dans la barre latérale de l’éditeur de menu, il suffit de cocher les cases de chaque page ou article que vous souhaitez inclure, et de cliquer sur le bouton Ajouter au menu :
Votre prochaine option est d’intégrer des liens personnalisés. Cela implique de fournir l’URL de la page vers laquelle vous souhaitez diriger les utilisateurs, puis de créer un libellé court mais descriptif pour cette page. Après cela, vous pouvez cliquer à nouveau sur Ajouter au menu :
Enfin, vous pouvez également ajouter des pages de catégories et d’articles à votre menu de navigation. Les utilisateurs accèdent ainsi à une page d’archives où ils peuvent consulter tout le contenu sur un sujet particulier.
Les blogs et autres sites à fort contenu peuvent trouver cette fonctionnalité particulièrement utile :
Comme pour les options Pages et Articles, il suffit de cocher les cases des catégories que vous souhaitez inclure et de choisir Ajouter au menu.
Étape 2 : Organisez votre menu WordPress
Une fois que vous avez ajouté tous les éléments de votre menu, vous devriez les voir listés dans les différentes cases de la rubrique Structure du menu dans l’éditeur :
Dans un premier temps, les éléments du menu apparaîtront dans l’ordre dans lequel vous les avez ajoutés. Cependant, vous pouvez facilement modifier leur organisation en les faisant glisser et en les déposant là où vous le voulez. Cela vous permettra de créer un menu simple sans fonction de liste déroulante.
Il existe plusieurs façons d’ajouter des menus déroulants dans votre menu WordPress.
Le plus simple est de continuer à faire des glisser-déposer, mais de commencer à imbriquer certains éléments du menu sous d’autres :
Par exemple, dans l’image ci-dessus, nous avons déplacé les trois catégories d’articles qui sont ajoutées au menu sous Blog, pour en faire des « sous-éléments ». Sur l’interface publique, cela créera un menu déroulant qui ressemblera à ceci :
Si vous souhaitez ajouter un menu déroulant qui inclut toutes les catégories de votre site, vous pouvez le faire en ajoutant un lien personnalisé dans votre menu. Utilisez « # » comme URL et « Catégories » ou quelque chose de similaire pour le libellé :
Vous pouvez alors ajouter toutes vos catégories au menu et les imbriquer sous ce libellé. Chaque catégorie sera cliquable, mais le libellé ne le sera pas :
En utilisant une technique similaire, vous pouvez également masquer tous les éléments de votre menu dans un seul menu déroulant.
Ajoutez un autre lien personnalisé, en utilisant « # » comme URL et « Menu » comme libellé. Ensuite, imbriquez tous les autres éléments de votre menu sous celui-ci :
Le résultat sur l’interface publique sera un menu déroulant qui comprendra les pages clés de votre site.
Comme vous pouvez le voir dans l’élément Catégories ci-dessous, tout contenu imbriqué sous un sous-élément apparaîtra dans un sous-menu :
En utilisant ainsi l’éditeur de menu en glisser-déposer, vous pouvez créer n’importe quel style et combinaison de menus déroulants WordPress. N’oubliez pas, cependant, qu’un trop grand nombre d’éléments de menu peut être déroutant pour les utilisateurs.
Il est également préférable de limiter le nombre de sous-menus que vous intégrez, pour éviter de trop encombrer votre navigation.
Étape 3 : Intégrez des images dans votre menu WordPress
Si à la fin de l’étape 2, votre menu déroulant ressemble exactement à ce que vous aviez imaginé, vous pouvez passer à l’étape 5 pour le publier. Toutefois, vous pouvez prendre d’autres mesures si vous souhaitez améliorer votre menu en le personnalisant.
Une tactique à envisager consiste à intégrer des éléments visuels dans vos menus pour mieux guider les visiteurs. Si les libellés descriptifs sont essentiels, une image ou une icône peut parfois aider les utilisateurs à déterminer plus rapidement où mène un lien de navigation particulier.
Il est possible d’ajouter des images en utilisant des CSS personnalisés, dont nous parlerons bientôt. Toutefois, nous recommandons de prendre une extension telle que Menu Image, Icons Made Easy :
De cette façon, vous n’avez pas à vous soucier de vous encombrer d’un code pour ajouter un intérêt visuel à votre menu déroulant.
Il suffit d’installer l’extension, puis de retourner sur Apparence > Menus :
Vous verrez qu’il y a maintenant des options d’image pour chaque page que vous avez incluse dans votre menu. Vous pouvez sélectionner la photo, la taille et la position de chaque page. N’oubliez pas d’enregistrer les changements lorsque vous avez terminé.
Étape 4 : Ajouter du CSS personnalisé à votre menu déroulant
Bien que cela ne soit pas recommandé pour les débutants, les utilisateurs intermédiaires et avancés peuvent vouloir incorporer leur propre style dans leurs menus déroulants WordPress. Mais avant de vous lancer dans votre CSS, vous devez ajouter une classe à votre menu.
Si vous sautez cette étape, votre CSS personnalisé peut poser des problèmes pour tout autre menu de votre site. Par exemple, vous pouvez par inadvertance appliquer à votre menu de bas de page un style que vous ne vouliez que pour votre menu déroulant principal.
Dans l’éditeur de menu, cliquez sur Options d’écran dans le coin supérieur droit :
Ensuite, cochez la case pour les classes CSS :
Cela ajoutera un champ « Classes CSS » à chaque page de votre menu :
Une fois que vous avez ajouté une ou plusieurs classes CSS aux éléments de votre menu, tout code personnalisé que vous incluez dans votre feuille de style ne s’appliquera qu’aux éléments de votre menu avec la classe que vous aurez spécifiée.
Vous pouvez maintenant vous rendre sur votre feuille de style ou dans l’outil de personnalisation, et vous mettre au travail sur votre style personnalisé.
Étape 5 : Publiez votre menu dans des lieux de premier choix
Une fois que votre menu déroulant WordPress est structuré pour répondre à vos besoins et que vous avez intégré les personnalisations que vous souhaitez, vous serez prêt à le publier sur votre site.
Ce processus varie légèrement en fonction de votre thème et les emplacements de menu qu’il prend en charge. Pour cet exemple, nous allons utiliser le thème Twenty Twenty.
Dans l’éditeur de menu, faites défiler le menu jusqu’à la section Réglages du menu :
Vous pouvez cocher la première case si vous souhaitez que de nouvelles pages soient automatiquement ajoutées à votre menu. Si vous commencez tout juste à travailler sur votre site et que vous n’avez pas encore ajouté toutes vos pages clés, ce guide peut vous être utile. Veillez toutefois à ne pas ajouter accidentellement trop d’éléments dans votre menu.
Sous cette option, vous verrez une liste de cases à cocher indiquant les différentes zones de votre site où vous pouvez afficher votre menu.
Le thème Twenty Twenty comprend différentes zones de menu : Menu horizontal grands écrans, Menu étendu grands écrans, Menu sur mobile, Menu du pied de page, Menu réseaux sociaux.
Dans ce cas, le menu que nous avons créé est le mieux adapté à l’emplacement du menu horizontal grands écrans, qui se trouve dans l’en-tête du site :
Vous pouvez également envisager de naviguer dans l’onglet « Gérer les emplacements » dans la zone « Menus » de votre tableau de bord. Ici, vous pouvez voir tous les emplacements de menu qui sont pris en charge par votre thème, ainsi que le menu que vous avez assigné à chacun d’eux :
Lorsque vous placez vos menus, il peut être utile de voir à quoi ils ressembleront sur l’interface publique.
Cliquez sur le bouton Gérer avec l’aperçu en direct pour voir comment votre menu apparaîtra à l’endroit que vous lui avez choisi, en utilisant la personnalisation de WordPress :
Vous pouvez ensuite publier votre ou vos menus directement à partir de la personnalisation. Si jamais vous devez ajouter ou supprimer des éléments de votre menu déroulant, vous pouvez simplement retourner à l’éditeur de menu et faire les ajustements nécessaires.
Extensions WordPress pour améliorer vos menus déroulants
Bien que vous puissiez créer des menus de navigation WordPress entièrement fonctionnels sans aucun outil supplémentaire, il peut parfois être utile d’étendre les fonctionnalités de votre menu. Si c’est le cas de votre site, vous pourriez vouloir examiner certains des extensions de menu WordPress populaires.
Nested Pages est un moyen efficace pour des blogs à fort contenu pour créer des menus déroulants. Bien qu’elle soit principalement utilisée pour organiser les articles et les pages, cette extension génère également automatiquement un menu qui reflète la structure de votre contenu :
S’il n’est pas forcément conseillé d’intégrer un grand nombre d’éléments dans vos menus, c’est parfois inévitable.
Si c’est le cas de votre site, Max Mega Menu peut vous aider à combiner vos menus WordPress existants pour former un « méga menu » :
Avec l’essor de la navigation mobile, il est essentiel de s’assurer que vos menus sont toujours lisibles sur les appareils mobiles.
WP Mobile Menu s’associe à n’importe quel thème responsive pour vous aider à créer un système de navigation pour les utilisateurs de votre site qui sont en déplacement :
Enfin, comme nous l’avons déjà dit, il peut y avoir des situations dans lesquelles les éléments descriptifs du menu ne suffisent pas. Dans ces situations, vous pouvez envisager d’utiliser Menu Image, Icons Made Easy comme nous l’avons décrit à l’étape 3 ci-dessus.
Vous pouvez utiliser n’importe laquelle de ces extensions pour améliorer votre système de navigation actuel et rendre votre menu déroulant WordPress plus efficace. N’oubliez pas que parfois, en matière de navigation, plus c’est simple, mieux c’est. N’ajoutez des fonctionnalités supplémentaires que si cela peut améliorer votre UX et éviter d’encombrer votre site.
Dépannage de votre menu déroulant WordPress
Si vous avez configuré votre menu comme décrit ci-dessus, mais que la fonctionnalité de menu déroulant ne fonctionne pas, il y a plusieurs causes possibles.
Bien que nous ne puissions pas les couvrir toutes ici, nous pouvons vous aider à cerner la cause de votre problème afin que vous puissiez trouver la bonne solution.
Souvent, un menu qui ne fonctionne pas est le résultat d’un conflit de code entre votre menu personnalisé et votre thème. La première chose à faire si votre menu ne fonctionne pas est de passer à un thème par défaut tel que Twenty Twenty. Si votre menu recommence à fonctionner, vous saurez que le problème est lié à votre thème. Vous pouvez alors contacter le développeur de votre thème pour chercher une solution.
Parmi les autres causes possibles, on peut citer
- Code mal saisi : Vérifiez que les CSS personnalisés que vous avez ajoutés sont corrects et que vous utilisez les classes CSS comme décrit à l’étape 4.
- Incompatibilité des extensions : Essayez de désactiver toutes les extensions liées aux menus que vous avez installés, pour voir si cela résout le problème.
- JQuery obsolète : Passez à la dernière version de jQuery et essayez d’ouvrir à nouveau le menu déroulant.
Cependant, comme nous l’avons déjà mentionné, les causes potentielles d’un menu défectueux sont nombreuses. Si aucune des solutions ci-dessus ne semble fonctionner, nous vous recommandons de vous rendre sur les forums de support de WordPress, de contacter notre équipe de support Kinsta experte sur WordPress, ou d’engager un développeur WordPress pour le réparer pour vous.
Résumé
Bien que cela puisse sembler être une petite chose, la navigation de votre site WordPress peut faire ou défaire son succès. L’utilisation de menus déroulants permet de gagner de la place sur les écrans des utilisateurs, tout en leur permettant de se déplacer facilement sur votre site et d’améliorer vos conversions.
