Tout savoir sur les menus de WordPress : spécial débutants


WordPress possède un excellent système pour gérer les menus mais les débutants ne pensent pas toujours à l’utiliser car il n’est pas actif par défaut. Vous pouvez en effet commencer à publier sur votre blog sans pour autant créer un menu. De même, si vous créez des pages statiques sur votre blog (une page « A propos » par exemple), elles sont souvent ajoutées automatiquement au menu principal. On peut pourtant créer des menus très facilement avec WordPress, une excellente manière de mieux mettre en valeur le contenu de votre blog !

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

> Note : vous pouvez aussi lire mon article sur l’importance d’avoir un bon menu sur son site.

La rubrique Menus sur WordPress

Tout se joue dans la rubrique Apparence > Menus. Comment se présente-t-elle ?

Parlons d’abord de la zone principale :

  • En haut (en violet), vous avez la possibilité de créer un nouveau 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.
  • 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.

La rubrique 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 des menus encore plus puissants !

Comment créer son menu ?

Pour créer un menu, nous devons d’abord définir quels éléments il contient puis personnaliser chaque élément et, enfin, décider où le menu s’affichera.

Choisir le contenu de son menu

Dans la zone que je vous ai indiquée en violet, cliquez sur « Créer un nouveau menu ». Vous avez juste à lui donner un nom et à valider en cliquant sur « Créer le menu ». Pensez à choisir un nom évident : « menu du haut », « menu du bas », menu principal » par exemple.

Ensuite, vous devez choisir quels éléments ajouter à votre 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 « Rechercher » 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
  • Une catégorie (sur ce blog, c’est comme ça que j’affiche par exemple mes « conseils blogging ») – Là aussi, il faut juste cocher la case 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).

Astuces en plus

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 « Mots clés » par exemple, vous aurez la possibilité de créer des liens de menu vers un mot clé précis ou un article précis.

Options de l'écran sur WordPress

Il est aussi très facile sur WordPress de créer un lien qui ne mène nulle part. Vous allez me dire : à quoi ça sert ? Quand vous avez des sous-menus, vous n’avez pas forcément envie que l’élément « parent » de votre menu mène quelque part. Sur mon blog par exemple, si vous cliquez sur « Conseils blogging », vous voyez tous les articles de tous les sous-menus de la rubrique… mais j’aurais pu décider que « Conseils blogging » ne mènerait nulle part pour vous obliger à choisir l’une des sous-rubriques.

Pour y parvenir, il faut créer un élément de menu de type « Lien »… mais au lieu d’indiquer une adresse web commençant par http://, vous indiquez juste le signe #. L’intitulé apparaîtra bien dans le menu mais rien ne se passera si on clique dessus.

Créer un lien parent inactif sur WordPress

Personnaliser ses éléments de menu

Une fois que nous avons choisi tous nos éléments, ils s’affichent les uns sous les autres. Pour changer leur ordre par exemple, il suffit de cliquer dessus avec la souris puis de les faire glisser dans l’ordre souhaité en maintenant le bouton de la souris enfoncé.

De même, pour créer un sous-menu, il suffit de décaler légèrement vers la droite les éléments du sous-menu. Ici par exemple, la rubrique « Créer son site » sera un sous-menu de la rubrique « Conseils blogging » :

Créer un sous-menu sur WordPress

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. Vous pouvez notamment personnaliser l’intitulé (le « Titre de la navigation » est celui que vos visiteurs verront s’afficher dans le menu) et l’attribut du titre (c’est sa description pour les moteurs de recherche et pour les malvoyants qui utilisent des lecteurs d’écran).

Là encore, si vous cliquez sur « Options de l’écran » tout en haut de la page, vous aurez accès à deux options supplémentaires intéressantes :

  • Cible du lien : pour chaque élément de menu, vous pourrez cocher une case si vous voulez que le lien s’ouvre dans une nouvelle fenêtre.
    Ouvrir un lien de menu dans une nouvelle fenêtre
  • Classes CSS : ceux qui maîtrisent le langage CSS peuvent ici définir une classe personnalisée pour chaque élément de menu afin d’avoir des possibilités de customisation très fines !

Choisir l’emplacement du menu

Une fois que tout est personnalisé, ne reste plus qu’à cocher une case en bas de la page 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 personnalisé » à l’endroit de votre choix et de décider quel menu s’affichera dedans, comme ceci :

Le widget Menu Personnalisé sur WordPress

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

Thèmes : Navigation WordPress 

Poster un commentaire

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

38 commentaires sur “Tout savoir sur les menus de WordPress : spécial débutants

  • 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 (je pense en revanche qu’il y a un espace en trop dans les codes fournis, au lieu de < ?php if il faut écrire <?php if). 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
  • Fred

    Comme d’hab, c’est du top de chez top ! Peux tu me donner ton avis entre les thèmes WP « pinnacle » et « catch responsive ».

    Merci

    Répondre à Fred
  • Myfrenchseasons

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

    Répondre à Myfrenchseasons
  • Ludo

    Merci pour cette article qui est bien précieux :-D

    Répondre à Ludo
  • 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.