Un menu de navigation bien structuré est essentiel pour guider les internautes sur votre site WordPress et s’assurer qu’ils trouvent facilement les informations dont ils ont besoin.
Que vous configuriez votre premier site web ou que vous essayiez d’améliorer l’expérience des utilisateurs sur un site existant, apprendre à ajouter et à personnaliser un menu de navigation est une compétence importante.
WordPress est livré avec une interface de menu par glisser-déposer que vous pouvez utiliser pour créer facilement des menus d’en-tête, des menus avec des options déroulantes, et bien plus encore.
Au fil des ans, nous avons créé une variété de menus pour nos différentes marques, ce qui nous a permis d’acquérir une expérience de première main en matière de conception de styles de menus. Nous avons appris quels types de menus conviennent le mieux aux différentes entreprises, quels liens et quelles pages inclure, et comment optimiser la navigation pour une meilleure expérience des utilisateurs/utilisatrices.
Dans ce guide étape par étape, nous allons vous afficher comment ajouter facilement un menu de navigation dans WordPress.
Qu’est-ce qu’un menu de navigation ?
Un menu de navigation est une liste de liens pointant vers les zones importantes d’un site. Ils se présentent généralement sous la forme d’une barre horizontale de liens en haut de chaque page d’un site WordPress.
Ces menus donnent une structure à votre site et aident les internautes à trouver ce qu’ils cherchent. Voici à quoi ressemble le menu de navigation sur WPBeginner :
WordPress facilite grandement l’ajout de menus et de sous-menus. Vous pouvez ajouter des liens vers vos pages les plus importantes, des catégories ou des sujets, des articles de blog, et même des liens personnalisés tels que votre profil de réseau social.
L’Emplacement exact de votre menu dépendra de votre thème WordPress. La plupart des thèmes auront plusieurs options, de sorte que vous pouvez créer différents menus qui peuvent être affichés à différents endroits.
Par exemple, la plupart des thèmes WordPress ont un menu principal qui apparaît en haut. Certains thèmes peuvent également inclure un menu secondaire, un menu de pied de page ou un menu de navigation mobile.
Cela dit, voyons comment vous pouvez créer un menu de navigation personnalisé dans WordPress.
- Creating Your First Custom Navigation Menu
- Creating Drop-Down Menus in WordPress
- Adding Categories to WordPress Menus
- Adding Custom Links to Your WordPress Navigation Menus
- Editing or Removing a Menu Item in WordPress Navigation Menus
- Adding Navigational Menus in Full Site Editor (FSE)
- Adding WordPress Menus in Sidebars and Footers
- Going Further with Navigation Menus
- Video Tutorial
- FAQs About WordPress Menus
Création de votre premier menu de navigation personnalisé
Pour créer un menu de navigation, vous devez vous rendre sur la page Apparence » Menus dans votre tableau de bord WordPress.
Note: Si vous ne voyez pas l’option‘Apparence » Menus‘ sur votre site et voyez uniquement‘Apparence » Éditeur’, cela signifie que votre thème a activé l’Éditeur de site complet (Éditeur de site). Vous pouvez cliquer ici pour aller à la section Éditeur de site ci-dessous.
Une fois que vous y êtes, donnez un nom à votre menu, par exemple « Menu de navigation supérieur », puis cliquez sur le bouton « Créer un menu ».
La zone de menu se dépliera et ressemblera à ceci :
Ensuite, vous pouvez choisir les pages que vous souhaitez ajouter au menu. Vous pouvez soit ajouter automatiquement toutes les nouvelles pages de niveau supérieur, soit sélectionner des pages spécifiques dans la colonne de gauche.
Cliquez d’abord sur l’onglet « Tout voir » pour afficher toutes les pages de votre site. Ensuite, cliquez sur la case située à côté de chacune des pages que vous souhaitez ajouter à votre menu, puis cliquez sur le bouton « Ajouter au menu ».
Une fois vos pages ajoutées, vous pouvez les déplacer en les faisant glisser et en les déposant dans la section « Structure du menu ».
Vous pouvez ainsi en modifier l’ordre et les réorganiser.
Note : Tous les éléments de menu sont présentés dans une liste verticale (de haut en bas) dans l’éditeurs/éditrices de menu. Lorsque vous mettez le menu en direct sur votre site, il s’affiche verticalement ou horizontalement (de gauche à droite), en fonction de l’emplacement que vous avez sélectionné.
La plupart des thèmes disposent de plusieurs emplacements différents où vous pouvez placer des menus. Dans cet exemple, nous utilisons le thème Astra, qui propose 5 emplacements différents.
Après avoir ajouté des pages au menu, sélectionnez l’Emplacement où vous souhaitez l’afficher et cliquez sur le bouton « Enregistrer le menu ».
Astuce : si vous n’êtes pas sûr de l’emplacement de chaque site, essayez d’enregistrer le menu à différents endroits, puis visitez votre site pour voir ce que cela donne. Vous ne voudrez probablement pas utiliser tous les Emplacements, mais vous voudrez peut-être en utiliser plusieurs.
Pour plus de détails à ce sujet, vous pouvez consulter notre tutoriel sur la création d’un menu de navigation vertical dans WordPress.
Voici notre menu terminé sur le site :
Créer des menus déroulants dans WordPress
Les menus Avancée, parfois appelés menus imbriqués, sont des menus de navigation comportant des éléments de menu parent et enfant.
Lorsque vous passez votre curseur sur un article parent, tous les articles enfants apparaissent en dessous dans un sous-menu.
Pour créer un sous-menu, faites glisser un article sous l’article parent, puis faites-le glisser légèrement vers la droite. C’est ce que nous avons fait avec 3 sous-éléments sous « Services » dans notre menu :
Vous pouvez même ajouter plusieurs calques de menus déroulants afin que votre sous-menu puisse avoir un sous-menu. Cela peut finir par donner l’impression d’être un peu encombré, et de nombreux thèmes ne supportent pas les menus déroulants multicouches.
Pour des instructions plus détaillées, veuillez consulter notre tutoriel sur la création d’un menu déroulant dans WordPress.
Voici le sous-menu en direct sur notre site de démonstration :
Ajout de catégories dans les menus de WordPress
Si vous utilisez WordPress pour gérer un blog, vous pouvez ajouter les catégories de votre blog sous forme de menu déroulant dans votre menu WordPress.
Nous le faisons sur WPBeginner et avons plusieurs catégories comme les nouvelles, les thèmes, les tutoriels, et plus encore.
Vous pouvez facilement ajouter des catégories à votre menu en cliquant sur l’onglet Catégories sur le côté gauche de l’écran du menu. Vous pouvez également cliquer sur l’onglet « Voir tout » pour afficher toutes vos catégories.
Il vous suffit de sélectionner les catégories que vous souhaitez ajouter au menu, puis de cliquer sur le bouton « Ajouter au menu ».
Les catégories apparaîtront comme des éléments de menu normaux au bas de votre menu.
Ensuite, vous pouvez les faire glisser et les déposer en position. Par exemple, nous allons placer toutes ces catégories sous l’élément de menu Blog.
Pour plus d’instructions, veuillez consulter notre guide du débutant sur l’ajout de sujets dans les menus de navigation de WordPress.
Voici comment les différentes catégories apparaissent dans le menu de navigation de notre site de démonstration :
Ajouter des Outil de personnalisation aux menus de navigation de WordPress
Outre les catégories et les pages, WordPress rend également super facile l’ajout de liens personnalisés à votre menu. Vous pouvez l’utiliser pour créer des liens vers vos profils de réseaux sociaux, votre magasin en ligne et d’autres sites que vous possédez.
Pour ce faire, vous devez utiliser l’onglet « Liens personnalisés » de l’écran Menu. Il vous suffit d’ajouter le lien ainsi que le texte que vous souhaitez utiliser dans votre menu et de cliquer sur le bouton « Ajouter au menu ».
Vous pouvez même faire preuve de créativité et ajouter des icônes de réseaux sociaux à votre menu ou à vos boutons d’appel à l’action pour obtenir davantage de conversions.
Modifier ou Retirer un élément de menu dans les menus de navigation de WordPress
Lorsque vous ajoutez des pages ou des catégories à votre menu de navigation personnalisé, WordPress utilise le titre de la page ou le nom de la catégorie comme texte du lien. Vous pouvez modifier cela si vous le souhaitez.
Tout élément de menu peut être modifié en cliquant sur la flèche vers le bas située à côté.
Vous pouvez ensuite modifier le nom de l’élément de menu à partir d’ici. Vous pouvez également cliquer sur « Retirer » pour supprimer le lien de votre menu.
Si vous avez des difficultés avec l’interface « glisser-déposer », vous pouvez également déplacer l’élément de menu en cliquant sur le lien « Déplacer » approprié.
Ajout de menus de navigation dans l’Éditeur de site complet (Éditeur de site)
Le nouvel éditeur de site complet vous permet de personnaliser vos thèmes WordPress à l’aide de l’éditeur de blocs. Il est apparu dans WordPress 5.9 et vous permet d’ajouter différents blocs à vos modèles pour créer un design unique.
Pour ajouter un menu de navigation à l’aide de l’éditeur de site complet, rendez-vous dans l’onglet Apparence » Éditeur de votre tableau de bord WordPress.
Nous utiliserons le thème par défaut Twenty Twenty-Three pour ce tutoriel. Pour plus de modifications, vous pouvez consulter notre article sur les meilleurs thèmes WordPress d’édition de site complet.
Une fois dans l’éditeur, cliquez sur l’onglet « Navigation » pour le déplier.
Cela ouvrira de nouveaux Réglages dans la colonne de gauche.
À partir de là, il suffit de cliquer sur l’icône « Modifier » en haut de la page.
L’éditeur/éditrice de site complet s’affiche alors à l’écran, où vous pouvez cliquer sur l’icône « + » pour ajouter un élément de menu de navigation.
Un prompt s’ouvre alors, et vous pouvez sélectionner une option dans le menu déroulant.
Toutefois, si vous souhaitez ajouter un lien personnalisé, vous pouvez ajouter un libellé et une URL pour l’élément du menu de navigation dans le panneau de blocs. Vous pouvez également ajouter une option de recherche à votre menu.
Une fois que vous avez ajouté un article, passez à l’onglet « Styles » dans la colonne de droite.
Vous pouvez désormais modifier la typographie, l’apparence, la hauteur, l’espacement, la casse des lettres et la décoration du texte de vos éléments de menu.
Vous pouvez également ajouter un module en cliquant sur son icône dans la barre d’outils du bloc.
Lorsque vous avez terminé, vous pouvez prévisualiser les modifications pour voir à quoi ressemble le menu en temps réel. N’oubliez pas de cliquer sur le bouton « Enregistrer » en haut de la page.
Ajout de menus WordPress dans les colonnes latérales et les pieds de page
Vous n’êtes pas obligé de vous en tenir aux emplacements d’affichage de votre thème. Vous pouvez ajouter des menus de navigation dans n’importe quelle zone qui utilise des widgets, comme votre colonne latérale ou votre pied de page.
Il vous suffit de vous rendre dans Apparence » Widgets, puis de cliquer sur le bouton » Ajouter un bloc » (+) en haut et d’ajouter le bloc de widgets » Menu de navigation » à votre colonne latérale.
Ensuite, ajoutez un titre au widget et sélectionnez le menu approprié dans la liste déroulante « Select Menu ».
Lorsque vous avez terminé, cliquez simplement sur le bouton « Mettre à jour ».
Voici un exemple de menu personnalisé de pied de page WordPress réalisé sur le site de notre fondateur, Syed Balkhi.
Aller plus loin avec les menus de navigation
Si vous souhaitez créer un menu vraiment épique avec de nombreux liens, nous vous proposons un tutoriel sur la création d’un méga menu dans WordPress.
Cela vous permet de créer une liste déroulante avec de nombreux articles, y compris des images.
Les méga menus sont une excellente option si vous avez un site de grande taille, comme une boutique en ligne ou un site d’actualités. Ce type de menu est utilisé par des sites comme Reuters, Buzzfeed, Starbucks, etc.
Tutoriel vidéo
Si vous préférez regarder ce tutoriel, consultez notre vidéo ci-dessous :
FAQ sur les menus WordPress
Voici quelques-unes des questions les plus fréquentes que se posent les débutants sur les menus de navigation de WordPress.
1. Comment ajouter un lien vers la page d’accueil dans un menu WordPress ?
Pour ajouter votre page d’accueil à un menu de navigation, vous devez cliquer sur l’onglet « Tout voir » sous Pages. À partir de là, vous devriez voir votre page d’accueil.
Cochez la case à côté de « Accueil » et cliquez sur « Ajouter au menu ». N’oubliez pas d’enregistrer vos modifications.
2. Comment ajouter plusieurs menus de navigation dans WordPress ?
Dans WordPress, vous pouvez créer autant de menus que vous le souhaitez. Pour placer un menu sur votre site, vous devrez l’ajouter à l’un des Emplacements de menu de votre thème ou à une zone de widget, comme nous l’avons affiché ci-dessus.
Si vous souhaitez ajouter plusieurs menus de navigation à votre site WordPress, commencez par créer les menus en suivant notre tutoriel ci-dessus.
Pour les placer sur votre site, cliquez sur l’onglet « Gérer les emplacements ».
À partir de là, vous pouvez sélectionner le menu que vous souhaitez afficher dans les Emplacements de menu disponibles dans votre thème.
Si vous souhaitez ajouter un nouvel emplacement de menu à votre site, consultez notre tutoriel sur la façon d’ajouter des menus de navigation personnalisés aux thèmes WordPress.
Nous espérons que cet article vous a aidé à apprendre comment ajouter un menu de navigation sur WordPress. Vous pouvez également consulter nos guides sur la façon de styliser les menus de navigation dans WordPress et sur la façon de créer un menu de navigation flottant épinglé dans WordPress.
Si vous avez aimé cet article, veuillez alors vous abonner à notre chaîne YouTube pour obtenir des tutoriels vidéo sur WordPress. Vous pouvez également nous trouver sur Twitter et Facebook.
Jiří Vaněk
Regarding adding pages to the menu, don’t know how to solve the search problem? Or if you haven’t met him. I have a website where there are currently about 600 pages, which are mainly used for dictionary purposes. The problem is, when I want to add one of the pages to the menu, I write its link in the search, so wordpress does not find it and I have to first display all and find it alphabetically. It delays my work quite a bit and I haven’t figured out where the problem is.
WPBeginner Support
You would want to try writing the title of the page, otherwise you could use custom links and link to the page if you have the URL directly.
Administrateur
Jiří Vaněk
Yes, I do. I type the site name into the search box and WordPress lists similar sites, but usually not the one I’m looking for. So I will search further where the problem might be.
David Keevis
Thanks so much for a really excellent tutorial. We’re building our site with multiple CPT’s and this post clearly explained what was needed. Had it implemented in a couple minutes. We’re using Generate Press/Generate Blocks and the query loop is exceptionally powerful. Y’all just made our day!!!!
WPBeginner Support
Glad to hear our guide helped!
Administrateur
NPH LLC
If I « remove » a link within my main navigation menu, can I bring it back easily? We want to take a page offline while we are reconfiguring it.
Thanks!
WPBeginner Support
Yes, you can easily add and remove menu items and if the menu items even if the item is not currently on the menu. You would want to ensure you clear any caching on your site so your visitors see the up-to-date menu.
Administrateur
Akanksha
Thank you ..This was very helpful to me
WPBeginner Support
Glad it was helpful!
Administrateur
Sunny
A very basic question. How can you link your website URL to your homepage? Meaning, having the website URL, also as your homepage section in the menu. Thanks
WPBeginner Support
You could either set the menu to the homepage you have set under Settings>General for your site or create a custom URL and add your domain there to point to your homepage.
Administrateur
Lisa
I’m confused about how to get my posts where I want them to go… I have a recipe blog. On the top of my site, I have categories you can click such as « Dinner recipes » and « Side dishes »… How do I get my specific posts to go on those specific pages when you click on the title at the top of the page?
aberry
Is there a way that when you add a category it automatically adds the sub categories?
WPBeginner Support
You would want to take a look at one of our older articles covering this below for showing subcategories on the parent category page:
https://www.wpbeginner.com/wp-tutorials/display-subcategories-on-category-pages-in-wordpress/
Administrateur
HJ
Very basic question, but how to enable menu on a subpage? I designed some subpages, but the menu is not visible on top. In my main pages the menu is visible. How to enable the menu to make it visible on the sub-pages?
WPBeginner Support
You would want to reach out to the support for your specific theme, it sounds like your theme may remove the menu for certain pages. If you reach out to the support they should let you know how to add the menu back.
Administrateur
Janien
I’m trying to get a navigation menu that is sticky and is not transparent. I’ve tried everything. Am I allowed to change the navigation bar in a theme?
WPBeginner Support
You are but it would require some coding knowledge, we would recommend reaching out to your theme’s support and they can normally assist.
Administrateur
Miranda
I have made a navigation menu but it won’t show up on the mobile site and when I go to navigation menu settings it does not have mobile menu as an option. Do you know how I can fix this or do I need to find a different theme?
WPBeginner Support
You would need to reach out to the support for your specific theme for it not displaying properly and they would be able to assist.
Administrateur
sadik
Thenk you Wp Begginer
WPBeginner Support
You’re welcome
Administrateur
Nanyc
This helped a lot. I wanted a heads up before I started. Presented very well.
WPBeginner Support
Glad our article was helpful
Administrateur
atta
Thanks for the detailed guide. I have a question: how can we add a navbar (for a landing page) which links the landing page sections/elements instead of navigating to other pages. An example is Wikipedia. On any Wikipedia page, you can click on the name of the section and it will immediately go down to that section.
WPBeginner Support
For that, you would want to use anchor links which we cover in our article below:
https://www.wpbeginner.com/beginners-guide/how-to-easily-add-anchor-links-in-wordpress-step-by-step/
Administrateur
Gina
Hi,
I created categories and added to my menu so that once a reader clicks they can find all the blog posts on that category. My problem is that I don’t want the blog name to appear at the top of the page, that is, Blogging category => Blogging category description => blog posts, how do I remove that?
WPBeginner Support
That would depend on your specific theme’s styling. If you reach out to your theme’s support they should be able to assist with changing what is shown
Administrateur
wan
i try to add menu item on my menu structure. even when i save menu, the website doesn’t change. why?
WPBeginner Support
You would want to ensure your site or your hosting provider does not have a cache that could be causing your issue.
Administrateur
Keith
Great resources
WPBeginner Support
Thank you
Administrateur
Linda McMillan
Hello, I am using Elementor and OceanWP. I set up a custom link in my menu so that when clicking on it goes to the Home page. How can I make it go instead of just to the Home page, but down the page to a certain section? I appreciate your help.
WPBeginner Support
You would want to take a look at making an anchor link: https://www.wpbeginner.com/beginners-guide/how-to-easily-add-anchor-links-in-wordpress-step-by-step/
Administrateur
Annie
Pretty much there with the navigation. One question though, I have one point in my navigation « products » from there it splits into 3 other sections (drop down menu coming up). I don’t want visitors be able to access this product page as it will be empty, I want them to choose directly from the drop down menu instead of accessing the products page first. So products will be still displayed in the navigation but will be inaccessible, visitors have to click onto the drop down menu to choose what they are after. How do I do this? I m I m removing the whole products section it wont be displayed in the navi anymore, how can I make the products page inaccessible?
WPBeginner Support
You can create a custom link under Appearance>Menus titled Products and link it to either a different page or # which should keep the users on the same page they are on.
Administrateur
Ishan
Thank you for your help.I was facing the same problem
Terry L. Cooper
How old is this anyway?? I’m not seeing any of this on the WP page.
WPBeginner Support
The steps in this article should still work for WordPress.org sites, are you on WordPress.com? https://www.wpbeginner.com/beginners-guide/self-hosted-wordpress-org-vs-free-wordpress-com-infograph/
Administrateur
Azizi
Sorry sir, which WordPress theme you’re using on WPbeginner.com?????
WPBeginner Support
We are using a theme we created for our site built on the Genesis Framework, for more on what we’re using on our site you would want to take a look at our blueprint page here: https://www.wpbeginner.com/blueprint/
Administrateur
Inzamam ul haq
It really helped me. very informative.Thanks
Natalie V
Hi! Thanks so much for this post. It helped me a lot. I have the « Karuna » theme. Whenever I add more menu options (I have 4) they are displayed in two row. I would like them all to be in one row. Is there a way to fix this? Thank you so much!
David
Needed to link a buy now button to woo commerce cart page. Spent two days going in circles. Tried to contact woo with little success. Then found you guys who helped solve the problem.
Often it is the little things which can stop us in our tracks. A big thank you for the simplified set of clear instructions.
Elliot Kershaw
Hello,
I am making a website with Ocean WP and Elementor, however I am unable to see the menu at the top of all of my pages. It only appears at the top of the home page. So people can navigate to any page from the home page, however if anyone wanted to navigate back to the home page or to another page from there, it would tricky. Do you have a solution for this? Thank you!