Tout savoir sur les menus de WordPress : le guide pour bien les gérer !


Il est particulièrement simple de créer des menus sur WordPress, grâce à un système présent par défaut sur tous les blogs. Pourtant, les débutants ne pensent pas toujours à l’utiliser ou sont parfois surpris de voir certaines pages statiques s’ajouter automatiquement au menu !

Dans ce tutoriel, je vais vous expliquer où et comment créer un menu sur WordPress et vous donner de petites astuces utiles pour exploiter les possibilités cachées de la rubrique Menus !

Avoir un bon menu est un excellent moyen de retenir les visiteurs plus longtemps sur votre blog et de mettre en valeur vos contenus.

Découvrir la rubrique des menus WordPress

Tout se joue dans la rubrique Apparence > Menus. C’est parti pour une présentation (très) colorée de cet espace qui permet de modifier son menu WordPress.

Parlons d’abord de la zone principale :

  • En haut (en violet), vous avez la possibilité de créer un menu ou de passer d’un menu à un autre si votre blog en comporte plusieurs.
  • La colonne de gauche (en orange) vous permet de choisir quels éléments vous voulez ajouter à votre menu.
  • La zone de droite (en jaune) vous montre quels éléments sont actuellement ajoutés à votre menu. On peut personnaliser un menu WordPress en y incluant des liens vers des pages, des articles, des étiquettes, des catégories ou encore des liens externes (vers d’autres sites web).
  • En bas (en bleu), vous pouvez choisir l’emplacement du menu en question : chaque thème WordPress propose un ou plusieurs emplacement(s) de menus, c’est-à-dire des endroits prévus pour afficher un menu. Sur un thème très simple, vous aurez souvent une seule possibilité (un menu qui s’affiche en haut, sous le logo) mais sur des thèmes un peu plus complexes, les possibilités peuvent être bien plus nombreuses : un menu dans le footer, un menu supplémentaire en haut de page, etc.
Modifier les menus sur WordPress
Modifier les menus sur WordPress

Ensuite, nous avons deux autres zones :

  • L’onglet « Gérer les emplacements » (en rose) : je vous l’ai dit, votre thème WordPress peut comporter différents emplacements prévus pour afficher des menus. Quand vous créez un menu, vous décidez à quel endroit il va s’afficher en cochant l’une des cases de la zone en bleu. Mais si vous avez plusieurs menus, vous pouvez aussi voir leurs emplacements respectifs depuis cet onglet « Gérer les emplacements ». Je vous avoue que je ne m’en sers jamais, je pense qu’il est surtout utile pour les énormes sites qui ont de très nombreux menus à gérer.
  • Le menu « Options de l’écran » (tout en haut, en vert) : un petit menu bien caché qui vous donne accès à des options supplémentaires pour personnaliser son menu WordPress encore davantage.

Pour créer un menu WordPress, vous devez d’abord définir quels éléments il contient puis personnaliser chaque élément et, enfin, décider où le menu s’affichera. Je vais à présent vous parler de ces différentes étapes.

Modifier un menu WordPress : le contenu

Dans la zone que je vous ai indiquée en violet, cliquez sur « Créer un nouveau menu ». Vous avez juste à donner un nom à votre menu WordPress et à valider en cliquant sur « Créer le menu ».

Pensez à choisir un nom évident : « Menu du haut », « Menu du bas », « Menu principal » par exemple. Vos visiteurs ne le verront pas, c’est un nom « pour vous » donc autant qu’il vous aide à vous repérer !

Ensuite, vous devez choisir quels éléments ajouter à votre menu.

Ajouter une page, une catégorie ou un lien externe au menu

Les cas les plus courants sont les suivants :

  • Une page (par exemple, votre page A propos ou votre page « Contact ») – Bien sûr, il faut que cette page existe déjà. WordPress liste les pages que vous avez créées récemment mais vous pouvez aussi faire une recherche en cliquant sur le lien « Recherche » et en entrant le titre ou un bout du titre de la page. Il suffit ensuite de cocher la case correspondant à la page souhaitée et de cliquer sur « Ajouter au menu ».
    Ajouter une page au menu sur WordPress
    Ajouter une page au menu sur WordPress
  • Une catégorie – Là aussi, il faut juste cocher la case de la catégorie puis cliquer sur « Ajouter au menu ».
  • Un lien – Ça peut servir par exemple pour créer un lien vers la page d’accueil ou pour renvoyer vers un site extérieur (exemple : votre site pro, une boutique Etsy, etc). Dans ce cas, il suffit de rentrer l’adresse du site vers lequel vous renvoyez vos visiteurs (exemple : https://www.notuxedo.com si je crée un lien vers ma propre page d’accueil) et le nom que cet élément aura dans le menu (« Accueil » dans mon exemple).
    Créer un lien vers la page d'accueil sur WordPress

A chaque fois, vous pouvez si vous le souhaitez sélectionner plusieurs éléments (ex : ajouter plusieurs catégories au menu d’un seul coup).

Ajouter une étiquette ou un article au menu

Le menu « Options de l’écran » (en vert sur ma capture d’écran) vous donne accès à des options supplémentaires.

En cochant les cases « Articles » et « Étiquettes » par exemple, vous aurez la possibilité de créer des liens de menu vers une étiquette précise ou un article précis.

Options de l'écran pour un menu WordPress
Options de l’écran pour un menu WordPress

Comment créer un sous-menu sur WordPress ?

Une fois que nous avons choisi tous nos éléments, ils s’affichent les uns sous les autres. Pour créer un sous-menu, il suffit de décaler légèrement vers la droite les éléments que vous voulez mettre dans un sous-menu.

Ici par exemple, les rubriques « Analyser son site web » et « Monétiser son blog » deviennent des sous-menus de la rubrique « Vers un blog + pro » :

Créer un sous-menu sur WordPress
Créer un sous-menu sur WordPress

Les éléments du sous-menu sont signalés par la mention « sous-élément » qui apparaît à côté de l’intitulé.

L’apparence visuelle du sous-menu dépend de votre thème WordPress.

Certains thèmes WordPress prévoient la possibilité de créer des sous-menus esthétiques… mais d’autres thèmes n’ont pas prévu cette possibilité et vous allez alors constater que vos sous-menus ne s’affichent pas bien.

Si c’est le cas, il faut malheureusement modifier le code du thème, parfois de manière assez lourde, pour créer un vrai menu déroulant… ou envisager de changer de thème WordPress.

Comment personnaliser l’apparence du menu WordPress ?

Déjà, vous pouvez contrôler l’ordre des éléments de menu par un simple glisser-déplacer. Vous cliquez sur un élément avec la souris et le faites glisser à l’endroit souhaité en maintenant le bouton de la souris enfoncé.

Ensuite, vous remarquerez que chaque élément de menu comporte une petite flèche sur la droite. En cliquant dessus, vous allez accéder à des options supplémentaires pour personnaliser…

  • L’intitulé de l’élément de menu (le « Titre de la navigation » est celui que vos visiteurs verront s’afficher dans le menu) ;
  • L’attribut du titre (c’est sa description pour les moteurs de recherche et pour les malvoyants qui utilisent des lecteurs d’écran).

Pour personnaliser le design de chaque élément de menu, il faut maîtriser le langage CSS. Cliquez sur « Options de l’écran » tout en haut de la page et cochez « Classes CSS ». Ça fera apparaître, pour chaque élément de menu, la possibilité de créer une classe CSS unique.

Classe CSS pour un menu WordPress
Classe CSS pour un menu WordPress

Si je crée par exemple la classe « menuanalyse » comme ci-dessus, je pourrai ensuite lui donner des propriétés précises dans la feuille de style CSS de mon thème WordPress : afficher une icône Font Awesome avant l’intitulé du menu par exemple, comme je le faisais à une époque !

Menu WordPress avec icônes
Menu WordPress avec icônes

Choisir l’emplacement du menu WordPress

Une fois que tout est personnalisé, ne reste plus qu’à cocher une case en bas de la rubrique Apparence > Menus pour décider à quel emplacement s’affichera votre menu.

N’oubliez pas de cliquer sur « Enregistrer le menu » pour valider. Ici par exemple, je choisis d’afficher un menu dans le footer (= en bas) du site :

Afficher un menu de bas de page sur WordPress

Vous pouvez aussi afficher un menu dans un widget WordPress. Pratique par exemple quand on veut afficher des liens sur le côté de son blog, dans la sidebar ! Ça se passe dans la rubrique Apparence > Widgets de WordPress : il suffit d’ajouter le widget « Menu de navigation » à l’endroit de votre choix et de décider quel menu s’affichera dedans, comme ceci :

Le widget Menu de navigation sur WordPress
Le widget Menu de navigation sur WordPress

Questions fréquentes sur le menu WordPress

Pour compléter cet article, je vous propose quelques réponses à des questions que je reçois fréquemment de visiteurs qui souhaitent modifier un menu WordPress.

Comment afficher une liste d’articles depuis un menu ?

C’est une question que je reçois souvent de la part des débutants : vous voulez qu’en cliquant sur un élément du menu, ça affiche plusieurs articles sur un sujet précis… mais vous ne savez pas trop comment ça s’appelle et comment procéder !

C’est possible grâce aux catégories WordPress. Vous devez d’abord avoir créé une catégorie dans le menu Articles > Catégories, sur le sujet qui va regrouper plusieurs articles (par exemple, sur No Tuxedo, j’ai une catégorie qui s’appelle « Créer un blog » avec tous les conseils pour créer et personnaliser son blog).

Ensuite, quand vous rédigez un article sur le sujet en question, vous le mettez dans la catégorie correspondante en cochant une case à droite de l’article, comme ceci :

Ajouter un article à une catégorie WordPress
Ajouter un article à une catégorie WordPress

Une fois que vous avez fait tout ça, vous pouvez créer un lien de type « Catégorie » dans votre menu WordPress (rubrique Apparence > Menus)… vers la catégorie de votre choix (« Créer un blog » dans mon exemple) :

Créer un lien de menu vers une catégorie
Créer un lien de menu vers une catégorie

Vous pouvez aussi utiliser ce même principe si vous avez utilisé des tags sur vos articles. Cette fois-ci, au lieu d’ajouter un lien de menu vers une « Catégorie », il faudra ajouter un lien de menu vers une « Étiquette »… mais le principe est exactement le même.

Pourquoi mon menu WordPress se met à jour tout seul ?

Sur beaucoup de thèmes WordPress, les pages statiques sont ajoutées automatiquement au menu principal par défaut. Autrement dit, quand vous installez le thème, celui-ci crée un menu sans vous demander votre avis… et ajoute dans ce menu toutes les pages créées dans la rubrique « Pages ».

Pour désactiver cette option, il faut créer un menu personnalisé à votre goût et surtout, décocher la case « Ajouter automatiquement les pages de premier niveau à ce menu » dans la rubrique Apparence > Menus.

Désactiver le menu automatique de WordPress
Désactiver le menu automatique de WordPress

Comment créer un lien non cliquable ?

Si votre blog comporte un élément de menu avec des sous-menus, vous n’avez pas forcément envie que l’élément « parent » soit cliquable. Mais comment créer un lien non cliquable dans le menu ?

C’est très simple : il suffit de créer un « Lien personnalisé »… mais au lieu d’entrer l’adresse d’une page web, vous écrivez simplement un dièse (#).

Lien non cliquable sur WordPress
Lien non cliquable sur WordPress

Vous verrez bien l’intitulé dans le menu mais le lien ne sera pas cliquable.

Comment créer un lien qui s’ouvre dans un nouvel onglet ?

Il faut d’abord cliquer sur « Options de l’écran » en haut à droite de la page puis cocher la case « Cible du lien ».

Cliquez ensuite sur l’élément de menu que vous voulez ouvrir dans un nouvel onglet et cochez la case « Ouvrir le lien dans un nouvel onglet ».

Ouvrir un lien de menu dans un nouvel onglet
Ouvrir un lien de menu dans un nouvel onglet

Que signifie l’option « Relation avec le propriétaire du site lié (XFN) » ?

Dans le menu « Options de l’écran », vous verrez peut-être cette option étrange intitulée Relation avec le propriétaire du site lié (XFN). Que signifie ce charabia ?

Le système XFN vous permet en fait de spécifier la relation que vous entretenez avec un site externe vers lequel vous faites un lien. Ca ne concerne donc pas les liens entre vos propres pages sur votre propre site… mais les liens que vous faites vers d’autres sites.

C’est une norme codifiée, vous ne pouvez donc pas écrire n’importe quoi n’importe comment (« C’est le site de Tata Jeanine »). Il y a une liste des paramètres possibles sur le site de WordPress, certains sont assez insolites (on peut par exemple indiquer que le site vers lequel on fait un lien est celui de notre « crush », la personne sur qui on a flashé).

Hum. On est d’accord, ça ne sert pas à grand-chose et vous n’avez vraiment pas besoin de compléter ce champ. En revanche, l’option XFN peut être utile si vous avez besoin de mettre un lien de menu en nofollow dans le cadre d’un partenariat avec une marque par exemple.

Je n’ai jamais vu ce genre de situation car en général, un partenariat se déroule plutôt à l’échelle d’un article ou en affichant un widget/des bannières. Mais si vous avez besoin de signaler un lien de menu sponsorisé, activez l’option « Relation avec le propriétaire du site lié (XFN) » et dans le champ prévu, mettez « nofollow ».

Lien de menu en nofollow
Lien de menu en nofollow

Pour ma part, j’utilise cette option sur mon lien de menu vers la page A propos ainsi que vers la page Contact. En effet, comme ces deux pages sont présentes dans le menu, elles reçoivent beaucoup de liens (puisque le menu s’affiche sur toutes les pages du blog).

Google avait tendance à les considérer comme des pages ultra-super-méga importantes et les affichait sous forme de sitelinks (les « sous-menus » que vous voyez dans les résultats de recherche) :

Sitelinks de No Tuxedo
Sitelinks de No Tuxedo

A ce jour, ça ne m’intéresse pas trop que l’on voie ma page A propos ou ma page Contact directement depuis Google, je préfère mettre l’accent sur mes articles ou mes rubriques. Mettre ces liens en nofollow a permis d’inciter Google à ne pas les suivre et donc à les considérer comme « peu importants » dans l’architecture du site.

J’espère que cet article vous aidera à utiliser au mieux les menus de WordPress !


Poster un commentaire

Votre adresse de messagerie ne sera pas publiée. Les champs obligatoires sont indiqués avec *

Lorsque vous postez un commentaire sur le blog, le nom indiqué dans la case "Prénom" ainsi que votre message apparaîtront publiquement. Votre adresse e-mail restera confidentielle.

34 commentaires sur “Tout savoir sur les menus de WordPress : le guide pour bien les gérer !

  • Léa

    Bonjour Marlène !
    Dis moi, j’aimerais mettre plusieurs rubrique dans mon main menu, mais je ne peux mettre q’une seule chose ! Il en a marqué entre parenthèse ; actuellement réglé sur : …
    et si je change, ca supprime l’autre ! Or j’en voudrais plein :(

    Répondre à Léa
    • Marlène

      Bonjour Léa, le « Actuellement réglé sur » ne correspond pas du tout au contenu du menu :) En fait, ça indique simplement quel menu est affiché au niveau de l’emplacement prévu par ton thème. Pour ajouter des éléments au menu, il faut utiliser la partie située à gauche de « Structure du menu ».

      Répondre à Marlène
  • Kasia

    Bonjour
    Ton article m’intéresse car je bloque désespérément pour faire un menu (résultat un article que j’avais prévu de publié ne l’est pas). Mais je n’ai pas de rubrique Apparence. Je ne sais plus quoi faire J’ai l’impression de mettre lancer comme projet d’habiter sur Jupiter…

    Répondre à Kasia
    • Marlène

      Hello, c’est possible que tu n’utilises pas le menu complet de WordPress : tape chenillenvol.wordpress.com/wp-admin/ pour te connecter en ayant accès à l’administration complète de WordPress ;)

      Répondre à Marlène
  • magali

    Bonjour,
    Je souhaiterai ajouter le logo « home » dans mon menu afin de retourner à la page d’accueil. Pouvez vous me dire comment dois-je faire ?
    Merci d’avance

    Répondre à magali
    • Marlène

      Bonjour, pour ma part j’utilise la police d’icônes Font Awesome et je personnalise le CSS du menu pour qu’il affiche une icône à la place du lien. On peut aussi le faire avec un plugin (Menu Icons par exemple permet d’associer une icône à un élément de menu).

      Répondre à Marlène
    • Magali

      Merci beaucoup pour votre coup de pouce ! Je vais mettre votre site et favoris tellement tout est clair et compréhensible !

      Répondre à Magali
  • Camille Lebras

    hello

    Pour le choix de l’emplacement du menu, je n’ai pas l’option « footer » sur mon WP (thème gratuit nisarg)
    comment je peux y remédier ???
    je voudrai mettre mes CGU en bas de page mais je n’y arrive pas du coup …

    Répondre à Camille
    • Marlène

      Bonjour Camille, quand un emplacement n’existe pas par défaut dans un thème, il faut le créer soi-même… en mettant les mains dans le code. Il y a des tutoriels comme celui-ci. J’espère que ça t’aidera !

      Répondre à Marlène
    • Camille Lebras

      Merci Marlène !

      Répondre à Camille
    • Nathalie

      Bonjour Camille,
      j’ai le même problème que toi mais je ne suis pas assez douée en informatique pour utiliser le tuto donné par Marlène, est-ce que tu as réussi ? ou trouvé une autre astuce ? Merci d’avance

      Répondre à Nathalie
    • Marlène

      Bonjour Nathalie, si un thème ne prévoit pas d’emplacement de menu, le seul moyen d’avoir un menu vraiment à l’endroit de son choix est de modifier le code du thème. Un plugin peut aider, il y a par exemple WP Custom Widget Area (je ne l’ai pas testé) qui permet de générer le code d’un nouvel emplacement mais ensuite, il faut quand même aller le copier soi-même dans le code du thème.

      Sinon, on peut tricher avec des plugins qui ajoutent une barre dans le footer par exemple, dans laquelle on peut mettre ce qu’on veut. J’avais évoqué WP Front Notification Bar par exemple.

      Répondre à Marlène
  • Florian

    Bonsoir !

    Un grand merci car je n’arrivais pas à trouver comment faire un item dans le menu qui ne mène sur aucune page !
    Je voyais bien, en allant dans le code de certains sites, un « # », mais impossible de savoir comment le faire !

    Et à force de fouiller, je suis tombé sur votre site ! Et EN – FIN !!!

    Bonne continuation à vous !

    Répondre à Florian
    • Marlène

      Merci et contente d’avoir pu lever le voile sur le « grand mystère du dièse » ;) Bon dimanche !

      Répondre à Marlène
  • Alain

    Bonjour,

    Comment obtenir un menu qui reste en haut de la page malgré la navigation, comme par exemple sur cette page où le menu reste collé en haut et « suit » la navigation.

    Merci

    Répondre à Alain
    • Marlène

      Bonjour Alain, j’ai pour ma part utilisé un mélange entre du CSS et du Javascript. Le Javascript calcule si l’internaute est en train de scroller la page et au-delà d’une certaine « hauteur de scroll » (correspondant au moment où le menu sort du champ visuel), il ajoute une classe CSS au code du menu… classe qui définit que le menu devient fixe. Ce tuto a l’air bien et correspond plus ou moins à ce que j’ai fait sur No Tuxedo.

      Répondre à Marlène
  • bgin

    Je découvre ce blog en recherchant comment modifier le format des éléments d’un menu : je trouve la réponse !
    Et je vois que le lien vide, que je venais de de découvrir car j’avais besoin de créer des sous-menus, est très bien expliqué dans cet article.
    Merci et bravo.
    Je vais garder un oeil sur ce blog.

    Répondre à bgin
  • Lithium

    Salut ! Très bon article !
    Savez vous si il est possible d’ajouter dans mon menu une catégorie automatiquement lorsqu’elle est créé ?
    ( j’ai un menu déroulant de catégories )

    Répondre à Lithium
    • Marlène

      Hello, je pense que ça doit pouvoir se faire en créant une fonction sur mesure dans le fichier functions.php, en se servant de wp_get_nav_menu_items et en mettant la catégorie comme argument de la fonction… Mais sans code sur mesure, je ne pense pas que ce soit possible.

      Répondre à Marlène
    • Lithium

      Salut !
      Merci de ta réponse je vais chercher encore un peu et tester de créer cette fonction ;P

      Répondre à Lithium
  • Myfrenchseasons

    Super article! Merci pour toutes ces informations précieuses!

    Répondre à Myfrenchseasons
  • Max mg

    Ça résume bien tout se qu’il y a savoir. En particulier pour les liens (très utiles) ou encore les sous menu souvent mal gérer.

    Répondre à Max
  • Letizia

    Encore des petits trucs que je ne savais pas comme le lien qui ne mène nulle part!!! J’ai fait quelques petites modifications suite à tes deux articles et je voulais te remercier pour tous les questionnements que tu provoques toujours chez moi et qui me permettent de m’améliorer. Mon blog n’est pas professionnel car je ne gagne pas ma vie avec mais puisque je viens de la communication, c’est aussi un peu ma carte de visite. Je tiens à l’améliorer surtout si des gens prennent le temps de me faire des remarques constructives :)
    J’ai mis des sous-catégories et des liens qui ne mènent à rien sous « sur la route » et sous « dans mon sac à dos » qui précisent le contenu de la catégorie. Je trouve que c’est tout de suite plus clair et qu’on se retrouve mieux. Par contre, je vais devoir trouver une autre solution pour « à ma table ». Tu as parfaitement raison de me dire qu’on s’attend à des recettes de cuisine… J’hésite à utiliser le widget menu pour différencier cette catégorie avec les autres. A creuser…
    Je ne sais pas pourquoi je t’explique toutes ces modifications alors si un jour tu doutes de ton potentiel à aider les gens, tu te souviendras de mes commentaires stupides :p Encore merci!

    Répondre à Letizia
  • Kenza

    Merci pour le conseil du lien vide, je cherchais une solution !

    Répondre à Kenza
  • JULE

    J’avais déjà trouvé comment les menus fonctionnent par moi-même, sauf pour ce qui est de mettre un élément qui ne mène nulle part! Je prends le truc en note pour le futur! :)

    Répondre à JULE
    • Marlène

      Oui, cette petite astuce est parfois bien pratique ! Merci de ton commentaire :)

      Répondre à Marlène
  • Audrey

    Génial, merci ! J’ai fait un petit test sur notre blog, et ça marche bien ! Du coup, on va vraiment trier nos catégories, pour partir de là et faire un menu simple et efficace.
    Mais c’est aussi là qu’on voit les limites de notre thème : le menu n’est pas très bien placé, ni très pratique quand on le déroule …
    Je crois qu’un jour, il faudra bien qu’on finisse par s’en payer un, de thème, qui soit un peu plus flexible !
    Encore merci pour ces super conseils, en tout cas.

    Répondre à Audrey
    • Marlène

      Parfois il suffit de fouiller un peu parmi les thèmes gratuits pour trouver son bonheur, certains sont plus « évolués » que d’autres et proposent plus d’options :)

      Répondre à Marlène
    • Audrey

      Oui, on a déjà changé une fois, il faudrait que l’on refasse un tour dans les thèmes gratuits : au fur et à mesure que l’on avance, on voit ce dont on a vraiment besoin et ce qui n’est pas nécessaire, du coup, on sait mieux ce que l’on cherche !

      Répondre à Audrey
Si vous aimez les articles du site, n'hésitez pas à faire vos achats sur Amazon.fr via ce lien ; il me permettra de toucher une commission grâce au programme Partenaires Amazon EU.