Le menu d’un site web, c’est un peu comme la carte d’un restaurant. Il est organisé de manière logique avec les entrées, les plats et les desserts. En bas de la carte : les softs, les cocktails et les vins.
Le menu doit vous faire saliver et vous donner envie de commander.
Sur un site WordPress, c’est la même chose. Vous devez proposer un menu qui soit à la fois clair et appétissant, comme une carte de restaurant.
Pour cela, vous allez proposer les contenus que vos visiteurs vont chercher en priorité pour faciliter la navigation sur votre site web.
Dans cet article, je vais vous donner des conseils et des astuces pour concevoir un menu efficace. On passera également par la technique pour savoir comment créer un menu sous WordPress.
1. A quoi ressemble un bon menu dans WordPress ?
La navigation sur un site web est un critère essentiel. Pour cela, vos visiteurs vont s’appuyer sur vos menus de navigation pour parcourir les différentes rubriques de votre site.
Qu’est ce qu’un menu de navigation ?
Le menu de navigation contient les principaux contenus d’un site internet. Ils forment un ensemble de liens qui redirigent les internautes vers les différentes pages ou sections d’un site.
On distingue deux grands types de menu sur un site web :
- Le menu présent dans l’en-tête : il est obligatoire pour tout site internet. On y retrouve les pages importantes pour faciliter la navigation. Sur Himalaya Academy, j’ai par exemple placé les pages de présentation des formations.
- Le menu présent dans le pied de page (footer) : On y retrouve souvent les pages obligatoires comme les mentions légales, la politique de confidentialité ou encore les conditions générales d’utilisation (CGU) ou les conditions générales de vente (CGV). En fonction de l’importance de votre site, vous allez aussi y placer des pages importantes. Souvent négligé, le menu du pied de page sert très souvent de boussoles pour vos visiteurs.
Avant de vous expliquer la technique pour créer un menu sur WordPress, je souhaite vous donner au préalable les critères de réussite d’un bon menu.
Sans plus attendre, voici les critères :
- Vos intitulés doivent être clairs et courts. Par exemple, j’ai un intitulé “Formation WordPress” dans le menu de Himalaya Academy. Une mauvaise pratique serait de mettre : “Créer un site internet avec WordPress.” C’est beaucoup trop long et on ne sait pas si c’est une formation.
- L’apparence de votre menu doit être soignée. Les codes de votre charte graphique doivent être présents dans le menu en terme de police et de couleur. Une mauvaise pratique serait d’avoir un menu avec une police de très petite taille par exemple.
- Votre menu ne doit pas être encombré avec 10 000 intitulés. Pour un site vitrine, vous pouvez mettre : “Mes Services”, “Mes réalisations”, “A propos” et “Contact”. C’est 4 intitulés peuvent amplement suffire.
- Placer les intitulés les plus importants au début de votre menu. Vous pouvez également mettre un intitulé sous la forme d’un CTA (Call to Action). Il s’agit d’un bouton avec une couleur primaire en arrière-plan. L’œil des visiteurs sera davantage attiré par le bouton.
- Le menu doit pouvoir s’adapter à toutes les largeurs d’écrans : ordinateur, tablette et mobile. On parle également de responsive. A partir d’une certaine largeur d’écran, le menu prend la forme d’un hamburger.
Respectez ces différents critères vous permettra d’améliorer l’expérience de navigation pour vos visiteurs.
Prêt à créer votre premier menu ?
C’est parti !
2. Créer votre premier menu
Pour créer votre premier menu de navigation sous WordPress, deux solutions s’offrent à vous :
- Méthode #1 : Par le menu Apparence > Menus.
- Méthode #2 : Par le menu Apparence > Personnaliser > Menus
Dans les deux cas de figure, vous arriverez au même résultat final. A vous de voir celle que vous préférez. Pour notre exemple, je vais vous indiquer comment faire en passant par la première méthode. La logique est la même pour la méthode 2.
Voici la marche à suivre pour créer votre menu :
- Dans le tableau de bord WordPress, accédez au menu Apparence, puis cliquez sur Menus pour faire apparaître l’éditeur.
- Saisissez le nom de votre menu dans le champ Nom du Menu. Vous pouvez l’appeler Menu Principal par exemple.
- Ne cochez pas la case pour ajouter automatiquement les pages de premier niveau à ce menu. Cela présente peu d’intérêt car vous ne pourrez pas personnaliser votre menu comme bon vous semble.
- Choisissez l’emplacement en cochant la case Menu Principal ou En-tête pour que votre menu puisse apparaître en haut de votre site. Sachez que les emplacements de menu diffèrent selon le thème que vous utilisez.
- Cliquez sur le bouton Créer le Menu
Votre menu est maintenant créé. Pour autant, il n’est pas encore visible sur votre site web. Vous allez maintenant devoir ajouter des éléments à votre menu pour qu’il puisse s’afficher.
N’hésitez pas à ouvrir un nouvel onglet avec votre site pour voir les changements au fur et à mesure. Il vous suffira de rafraîchir la page à chaque fois que vous ajoutez un nouvel élément.
3. Ajouter des éléments au menu
Vous pouvez intégrer plusieurs éléments à votre menu.
- Des pages
- Des articles
- Des liens personnalisés
- Des catégories
- Des étiquettes
D’un point de vue méthodologique, je vous recommande de créer l’ensemble des éléments que vous voulez insérer à votre menu avant de passer à cette partie.
Attention car pour les pages et les articles, ceux-ci doivent être en statut publié. Autrement, vous ne pourrez pas les ajouter dans votre menu.
Ajouter des pages à votre menu
Les pages sont les principaux éléments que vous allez ajouter à vos menus. Pour en ajouter, rien de plus simple.
Dans la colonne latérale de gauche, identifiez la section intitulée Pages. Cochez les pages que vous voulez intégrer à votre menu, puis cliquez sur le bouton Ajouter au Menu. N’oubliez pas de cliquer sur le bouton Enregistrer le menu en bas à droite de votre page.
Deux petits conseils :
- N’ajoutez pas votre page d’accueil dans votre menu. Le lien est déjà accessible depuis le logo de votre site. Par défaut, il est placé en haut à gauche de votre site.
- N’ajoutez pas non plus vos pages légales comme les mentions légales, la politique de confidentialité ou encore vos CGU/CGV. J’ai d’ailleurs rédigé un article complet sur comment rédiger les mentions légales. Vous pouvez aller y jeter un coup d’œil.
N’hésitez pas à vous rendre sur votre site pour voir le résultat. Pensez à rafraîchir la page au préalable.
Ajouter des articles à votre menu
La méthode pour ajouter des articles dans votre menu est identique à celle des pages.
Même si WordPress vous laisse la possibilité d’ajouter des articles dans votre menu, ce n’est pas une pratique que j’encourage. Privilégiez les pages aux articles.
Pourquoi me direz-vous ?
Les articles se définissent par un contenu avec une date, un auteur, des commentaires,… Alors que les pages sont intemporelles, sans auteur et sans commentaires.
Rappelez-vous. Votre menu a pour objectif de guider vos visiteurs vers le bon contenu. Qui vous dit qu’ils seront intéressés précisément par l’article que vous allez mettre dans votre menu ? C’est beaucoup trop précis.
Par contre, vous pouvez ajouter une page qui regroupe plusieurs articles dans votre menu. C’est bien plus pertinent. On appelle cela les pages catégories.
Ajouter des catégories à votre menu
Comme pour les pages et les articles, vous pouvez ajouter des catégories depuis la colonne latérale de gauche.
Les catégories présentent l’avantage de regrouper des articles sous une même thématique. C’est idéal quand on tient un blog.
Pour le blog d’himalaya Academy, les différents éléments que vous pouvez voir dans le menu sont des catégories. Ainsi lorsque vous cliquez sur WordPress, vous accédez à tous les articles rattachés à la catégorie WordPress.
Pratique non 😉
Ajouter des étiquettes à votre menu
Les étiquettes sont une autre manière de classer vos articles. A l’instar des catégories, elles ne sont pas obligatoires pour vos articles et ne reposent pas sur un système hiérarchique.
Je vous recommande de ne pas utiliser les étiquettes dans votre menu principal. Par contre, vous pouvez parfaitement les utiliser :
- Dans votre pied de page
- Dans une colonne latérale. Elle est généralement située sur la droite de vos articles de blog ou page catégorie. Elle permet d’afficher du contenu complémentaire autre que dans le corps de l’article.
Ajouter des liens personnalisés à votre menu
L’ajout de liens personnalisés dans votre menu est une solution idéale si vous voulez rediriger vos internautes vers un autre site.
Dans le cas d’Himalaya Academy, j’ai utilisé un lien personnalisé pour la rubrique blog présente dans le sous menu Ressources.
J’utilise un sous-domaine pour le blog. Il s’agit de blog.himalaya.academy La seule manière de l’intégrer au menu est donc d’utiliser un lien personnalisé.
Pour ajouter un lien personnalisé, il vous suffit d’indiquer l’url et le texte du lien (ou ancre).
4. Configurer les éléments du menu
Changer l’ordre des éléments
Vous avez inséré l’ensemble des éléments dans votre menu. Par contre, vous avez un petit problème. Les éléments de votre menu ne sont pas forcément agencés dans le bon ordre.
Pour changer l’ordre des éléments, il vous suffit de maintenir le clic sur l’un d’eux et de le déplacer à l’endroit que vous souhaitez : vers le haut ou vers le bas. On parle également de glisser-déposer.
Si vous souhaitez voir certains éléments de votre menu regrouper sous un élément principal, je vous conseille de lire la suite 😉
Créer un menu à plusieurs niveaux
L’éditeur de menu WordPress vous permet également de créer des menus à plusieurs niveaux. Le principe est le même que pour changer l’ordre des éléments. Maintenez le clic sur un élément et déplacez-le vers la droite ou la gauche. Puis, relâchez le bouton de la souris.
Dans l’exemple ci-dessous, “Formation WordPress”, “Formation SEO” et “Formation marketing Digital” sont des sous éléments à la page “Nos Formations”.
Soyez vigilant à garder une bonne lisibilité de votre menu. Ne faites pas de sous-menu de sous-menu. Faites quelque chose de simple.
Petite astuce
Vous pouvez ajouter un élément de menu non cliquable. Ceci peut être pratique pour un élément contenant des sous-menus par exemple. Ajoutez un lien personnalisé en indiquant le symbole # dans l’url. Enregistrez votre menu, puis retirez le symbole # de votre lien personnalisé. Enregistrez à nouveau.
Si vous laissez le symbole #, vous aurez des effets négatifs sur votre référencement naturel.
Modifier les éléments d’un menu
Chaque élément du menu dispose d’une petite flèche de configuration située sur le côté droit. En cliquant sur cette flèche, vous allez ouvrir une petite boîte de configuration.
A ce stade, vous pouvez faire 4 choses :
- Modifier le titre de navigation
- Déplacer l’élément
- Cliquer sur le lien pour afficher la page en question
- Supprimer l’élément du menu en cliquant sur “Retirer”
WordPress vous permet d’afficher des propriétés supplémentaires dans cette boîte de configuration. A ce stade, elles ne sont pas encore visibles.
Pour les afficher, cliquez sur “Options de l’écran” situé en haut à droite de votre écran. Puis cochez toutes les cases en dessous présentes dans “Afficher les propriétés avancées du menu”.
En cochant l’ensemble des cases, la boîte de configuration des éléments affichera des propriétés supplémentaires.
Voici en résumé ce que vous pouvez faire avec les propriétés avancées :
- Titre de la navigation : il s’agit du titre qui sera affiché dans votre menu
- Attribut de titre : cette option vous permet d’afficher l’attribut lorsque le curseur survole l’élément du navigateur. Personnellement, je n’utilise pas cette option car je n’y voit pas une réelle utilitée.
- Cible du lien : en cliquant sur la case, la cible du lien s’affichera dans un nouvel onglet. Cette option est utile si vous envoyez vos visiteurs sur un site externe. Cela permet de garder votre site dans le navigation de l’internaute.
- Classe CSS : ce champ vous permet de personnaliser l’apparence d’un élément de votre menu.
- Relation avec le propriétaire du site lié (XFN) : Ce champ vous permet de qualifier la nature du lien que vous réalisez avec un site externe au vôtre (dans le cas des liens personnalisés). Voir les liens de relation. Pour ma part, je considère que ça ne sert pas à grand-chose.
- Description : Ce champ permet d’afficher une description dans le menu. La plupart des thèmes ne prennent pas en charge ce champ. Je vous conseille de ne pas l’utiliser.
5. Gestion de l’emplacement
Si vous êtes arrivés jusqu’ici, c’est que la configuration d’un menu n’a plus de secret pour vous 😉 Je vais maintenant vous montrer comment gérer les emplacements de votre menu. Pour cela, cliquez sur “Gérer les emplacements” en haut à gauche de votre écran.
Vous allez pouvoir assigner un menu que vous avez créé à un ou plusieurs emplacements de votre site. Ici, vous pouvez voir que “Menu Principal” est assigné à en-tête. “Menu Principal” est le nom du menu que j’ai créé au préalable.
Lorsque vous créez un nouveau menu, vous choisissez toujours son emplacement. Je vous ai indiqué la marche à suivre dans la partie 2 de cet article.
Pour attribuer un menu existant à un emplacement, utilisez le menu déroulant et sélectionnez le menu. Puis cliquez sur le bouton “Enregistrer les modifications”
En cliquant sur modifier, vous serez redirigé vers l’écran d’édition du menu.
Notez qu’avec ce thème, j’ai 2 emplacements à ma disposition : en-tête et Pied de page. Selon le thème que vous utilisez, d’autres emplacements seront susceptibles d’apparaître.
Pour connaître les emplacements de votre thème, cliquez sur le bouton en haut à gauche “Gérer avec la prévisualisation en direct”.
6. Aller plus loin dans la personnalisation du menu
Vous vous sentez limités dans la création de votre menu ? Si vous utilisez l’un des thèmes natifs de WordPress, c’est probablement le cas. Les options de personnalisation restent très limitées.
Par exemple, vous ne pouvez pas créer de méga menu sans mettre les mains sous le capot de votre site.
D’autres thèmes populaires comme Astra proposent des réglages plus avancés. Malgré tout, vous n’y trouverez peut-être pas votre bonheur.
Je vais vous présenter ici un plugin qui va vous permettre d’améliorer le menu de votre site WordPress. Il s’agit de Max Mega Menu.
Ce plugin est le plus populaire pour créer un méga menu dans la bibliothèque WordPress. Il est noté 4.5/5 et compte plus de 400 000 installations actives.
Avant de rentrer dans le détail, qu’est ce qu’un mega menu ?
C’est un menu de navigation qui est très souvent utilisé par les sites e-commerces. Il apparaît lorsque la souris survole un élément présent dans le menu situé dans l’en-tête de votre site. Le méga menu est très utile car il permet de réunir un grand nombre de catégories et de sous-catégories.
Voici un exemple :
Si votre but est de créer un site vitrine ou un site proposant des prestations de service, un mega menu ne vous sera d’aucune utilité.
Rentrons dans le détail :
- Max Mega Menu s’intègre parfaitement dans le menu natif de WordPress comme vous pouvez le voir sur l’image ci-dessus
- Le plugin utilise le système de glisser-déposer : maintenir le clic sur un élément et le déplacer à l’endroit que vous souhaitez. Hyper facile.
- Votre méga menu vous propose plusieurs types d’affichage : en colonne ou en ligne.
- Vous avez accès à un très grand nombre d’options de personnalisation : dimension du menu, hauteur de ligne, choix de la police, des couleurs, des marges internes, le point de bascule responsive, …
- Vous avez également la possibilité d’ajouter des images et des icônes
Notez que Max Mega Menu est également disponible depuis le menu verticale de gauche de votre interface WordPress.
Une version payante de ce plugin est disponible à partir de 29$/an si vous vous sentez à l’étroit avec la version gratuite.
Parmi les options supplémentaires, vous avez la possibilité de créer un menu collant (le menu se fixe en haut de la fenêtre de navigation), un méga menu à onglets (pour organiser soigneusement les structures de menu riches en contenu) ou encore la possibilité de créer un méga menu à la verticale.
7. Des questions à propos du menu ?
Nous voilà au terme de cet article. J’espère qu’il vous aura été utile.
Créer un menu sous WordPress est plutôt facile. Ce qui compte, ce sont les éléments que vous allez intégrer dans votre menu pour rendre la navigation facile et agréable pour vos visiteurs. C’est d’abord à eux qu’il faut penser.
Dans cet article, nous n’avons pas évoqué le menu du pied de page de votre site. Sachez que de nombreux internautes s’y arrêtent souvent avant de poursuivre leur navigation. Soignez votre menu de pied de page autant que votre menu d’en-tête.
N’hésitez pas à nous faire part en commentaires de vos interrogations sur la création de votre menu.
Nous y répondrons avec plaisir 🙂
Vous souhaitez créer un site complet avec WordPress ? Rejoignez notre formation WordPress complète et finançable à 100%. Vous serez accompagné par un mentor expert pour créer votre site internet.