Publié par le 29 décembre 2014 • 338 Commentaires

Aujourd’hui, je tiens à vous parler d’un élément crucial pour beaucoup de sites internet : le menu.

Au départ, je voulais simplement vous parler d’un plugin relatif aux menus que j’ai mis en place pour un client mais en y réfléchissant, je me suis dit qu’un récapitulatif sur la gestion des menus et une présentation de quelques plugins serait une bien meilleure idée.

C’est vrai que cela a pris plus de temps à écrire mais comme vous le savez, je préfère publier des articles de qualité (des bonnes recettes) que de publier pour publier.

Pour revenir aux menus, si vous débutez, vous vous demandez sûrement…

Comment configurer un menu dans WordPress ?

Depuis la sortie de version 3 de WordPress en juin 2010, il est beaucoup plus simple d’ajouter des menus sur un site WordPress.

Si votre thème WordPress a bien été conçu, vous devriez pouvoir vous rendre dans Apparence > Menus :

Allez dans Apparence > Menus

Si ce n’est pas le cas, donnez-moi le nom de votre thème et j’enverrai un email directement à l’auteur pour lui passer une soufflante !

Ensuite, vous arriverez sur la page de gestion des menus. Pour créer le menu de votre site, il faut procéder en deux étapes :

  1. Donner un nom à votre menu (par exemple : Menu Principal)
  2. Cliquer sur Créer le menu

Si vous êtes plus visuel, voilà ce que ça donne :

Créer menu WordPress

Une fois votre menu créé, voyons comment…

Ajouter des éléments dans un menu

Avant de passer à la pratique, je tiens à ouvrir une parenthèse pour vous donner quelques conseils sur ce qu’est un bon menu.

À mon sens, un menu doit posséder 3 caractéristiques :

  1. Un nombre limité d’éléments
  2. Des éléments avec des noms concis
  3. Peu, voire pas de sous-menus

Nous sommes d’accord qu’il peut y avoir des exceptions en fonction des sites (en particulier pour les sous-menus). Toutefois si votre site est un blog ou un petit site vitrine, n’y allez pas trop fort.

Pourquoi ?

Parce que plus vous donnerez de choix à vos visiteurs, plus ils devront réfléchir sur quel élément cliquer, plus cela prendra de temps et au final, ils risqueront d’aller voir ailleurs.

C’est un peu comme le menu d’un restaurant, plus il y en a, plus c’est difficile de choisir.

Rappelez-vous donc d’aller droit au but.

Passons désormais à la pratique en voyant comment structurer votre menu.

Ajouter des pages dans votre menu WordPress

Comme le montre l’image ci-dessous, vous trouverez vos pages dans la partie gauche de l’écran de création de votre menu :

Ajout d'élement au menu WordPress

Pour ajouter une page dans votre menu, cochez la page à insérer dans le menu puis cliquez sur Ajouter au menu.

Vous pouvez effectuer des tris et des recherches pour trouver la bonne page grâce aux onglets Les plus récentes, Afficher tout et Recherche.

Attention, vos pages doivent exister pour figurer dans votre menu. Si ce n’est pas le cas, allez dans Pages > Ajouter pour les créer.

Répéter l’opération pour ajouter toutes les pages dont vous avez besoin.

Toujours sur la gauche, on remarque qu’il est possible de cliquer sur Liens et Catégories.

Inclure des liens dans votre menu

Les liens permettent d’ajouter n’importer quel lien à votre menu. Par exemple, un lien vers un site partenaire ou comme on le voit souvent, un lien vers la page d’accueil de votre site.

Pour cela vous devez entrer le lien en question dans le champ Adresse Web, puis le texte du lien (l’ancre) dans le champ Cible du lien. Cliquez ensuite sur Ajouter au menu pour inclure votre lien.

Ajouter un lien à un menu WordPress

Astuce : Pour ajouter un élément de menu sans lien, insérez le caractère # dans le champ adresse Web. Une fois l’élément ajouté, supprimez le # pour ne pas nuire à votre référencement.

Ajouter des catégories dans votre menu

Il est également possible d’ajouter des catégories dans votre menu. Cela est très pratique sur des blogs. D’ailleurs, c’est la voie que la Marmite a emprunté pour son menu principal.

Sur ce blog vous pouvez trouver les catégories suivantes : Tutoriels WordPress, Thèmes, Plugins et Etudes de cas.

Cliquez sur catégorie pour faire apparaitre le formulaire d’ajout de catégorie.

Ajouter une categorie à un menu

Comme vous pouvez le voir, cela ressemble au système d’ajout des pages. Tout ce que vous avez à faire est de cocher la ou les catégories de votre choix et de cliquer sur Ajouter au menu.

Si vous avez beaucoup de catégories (ce que je ne vous conseille pas), vous pouvez les retrouver en utilisant les onglets Les plus utilisées, Afficher tout ou Recherche.

N’oubliez pas d’enregistrer votre menu pour que WordPress se souvienne de ce que vous avez fait.

Maintenant que vous savez comment ajouter différents types d’éléments dans votre menu, voyons comment…

Formez-vous à WordPress en 8 semaines

avec la formation à distance la plus généreuse du marché (éligible aux financements)

WPChef, la formation WordPress de référence

Organiser les éléments d’un menu sous WordPress

À ce stade, votre menu n’est pas encore bien structuré. Il embarque plusieurs éléments mais ils ne sont pas forcément agencés comme vous le désirez.

Pour réorganiser votre menu, passez votre souris au dessus d’un élément pour voir apparaitre un curseur avec quatre flèches.

Cliquez et maintenez pour déplacer l’élément en question à l’endroit voulu.

Organiser le menu de WordPress

Procédez ainsi jusqu’à ce que votre menu ressemble à ce que vous imaginez.

Notez que l’élément en haut du menu sera affiché en premier sur votre site, c’est à dire sur la gauche.

Créer un sous-menu

Si vous avez pas mal d’éléments à ajouter (attention à la surcharge), vous pouvez créer des sous-menus en déplaçant un élément légèrement sur la droite sous un autre élément.

Créer un sous-menu dans WordPress

Dans l’exemple ci-dessus, la page À propos est un sous-menu de la page Contact.

Théoriquement, il n’y a pas de limite au nombre de niveaux de sous-menus. En pratique, n’allez pas plus loin que le premier niveau.

Imaginez un sous-menu de sous-menu de sous-menu de sous-menu ! Vos visiteurs ne risquent pas de voir le bout du tunnel.

En règle générale, si vous avez trop de niveaux de sous-menus, c’est que votre menu est mal structuré.

Voyons maintenant comment…

Modifier les éléments d’un menu

Récapitulons. Votre menu est presque prêt mais vous réalisez que vous avez commis une erreur. Comment faire pour supprimer un élément d’un menu WordPress ?

Vous l’avez probablement remarqué, chacun des éléments de votre menu possède une petite flèche sur la droite. En cliquant dessus, vous « déplierez » cet élément pour afficher des informations supplémentaires.

Menu déplié WordPress

Selon le type d’élément que vous déplierez (Page, Lien ou Catégorie), différents champs apparaîtront.

  • Titre de la navigation : Le libellé qui s’affichera sur votre site
  • Attribut de titre : Le texte qui s’affichera lorsque vos visiteurs survoleront l’élément. Utilisez-le pour décrire ce que contient la page.
  • Adresse web : Dans le cas d’un lien, cela correspond à l’adresse du lien

Un lien Supprimer est présent pour retirer un élément de votre menu.

Notez que des liens sont présents pour déplacer chacun des éléments. Il ne vous seront utiles que si vous ne pouvez pas effectuer de glisser déposer.

Les options cachées des menus WordPress

Il faut savoir que par défaut, WordPress masque certaines possibilités des menus. Cela permet de gagner en clarté et surtout d’éviter aux débutants d’accomplir de mauvaises actions.

Découvrons ensemble ces options. Veillez bien à les utiliser lorsque la situation en vaut la peine.

Pour afficher ces fameuses options, vous devez cliquer sur le bouton Options de l’écran en haut à droite du tableau de bord :

Options menus WordPress

Plusieurs cases à cocher apparaitront suite à votre clic :

Options cachées des menus WordPress

La première ligne d’options permet d’ajouter de nouveau types de contenus dans votre menu.

On retrouve les Pages, Liens et Catégories ainsi que les Articles, Mots-clés et Format si votre thème le permet.

Clairement, je vous recommande de n’ajouter aucun article à votre menu. Si vous êtes tenté d’en ajouter un, vous auriez probablement dû créer une page.

Pour connaitre la différence entre une page et un article, jetez un oeil à cet article.

Concernant les Mots-clés et les Formats, je ne suis pas trop pour leur utilisation dans les menus.

Je vous recommande d’insérer uniquement des Pages, Catégories et des Liens dans vos menus.

La seconde ligne d’options est plus intéressante. En cochant ces cases, de nouveaux champs apparaitront au sein des éléments de votre menu :

Options avancées des menus WordPress

Voyons à quoi ces options correspondent :

  • Cible du lien : Permet d’afficher une case pour ouvrir la page de destination dans un nouvel onglet. Utilisez cela uniquement si la page de destination est sur un autre site. Il est très désagréable d’avoir de nouveaux onglets qui s’ouvrent lorsque l’on navigue sur un site via un menu.
  • Classes CSS : Si vous voulez personnaliser l’apparence d’un élément de votre menu avec du CSS, placez les classes dont vous avez besoin dans ce champ.
  • Relation avec le propriétaire du site lié (XFN) : Si vous liez un site et que vous tenez à préciser la relation qui vous lie. Vous pouvez utiliser les propriétés XFN. En pratique, je ne me suis jamais servi de cela. Il y a de grandes chances pour que nous n’en ayez pas besoin.
  • Description : Certains thèmes permettent d’afficher une description sous le titre du menu, ils sont toutefois assez rares.

Voilà, vous savez désormais mettre en forme un menu avec WordPress. Peaufinons les derniers détails en nous rendant dans…

Les réglages du menu

Une fois que vous aurez ajouté tous les éléments nécessaires pour constituer votre menu, il faudra vous rendre la section consacrée aux Réglages du menu sous les éléments de votre menu.

Réglages des menus dans WordPress

Plusieurs cases à cocher vous sont proposées :

  • Ajouter automatiquement des pages : Cocher cette case ajoutera automatiquement les pages que vous créerez à votre menu. Cela présente peu d’intérêt car votre menu ne sera pas personnalisé. Veillez donc à ne pas cocher cette case.
  • Emplacements du thème : Les cases à cocher listées ici permettent de déterminer à quel endroit afficher le menu que vous venez de créer.

    Il est donc très important de cocher une de ces cases pour que votre menu s’affiche sur votre site.

    Les intitulés des emplacements de menus disponibles seront différents en fonction de votre thème. Vous devrez normalement y trouver une case pour le menu principal (main menu ou primary menu en anglais).

Une fois que les réglages seront configurés, cliquez sur Enregistrer le menu pour mettre votre nouveau menu en service.

Note : Un lien pour supprimer votre menu est présent en bas à gauche pour effacer un menu dont vous n’avez plus besoin.

Besoin d’un hébergeur pour votre site ?

Faites comme WPMarmite, choisissez o2switch. Non seulement les performances sont au rendez-vous mais le support est exceptionnel.

Gérer les emplacements

Vous avez probablement remarqué que la page de gestion des menus comporte deux onglets. Pour le moment nous nous sommes intéressés qu’au premier : Modifier les menus.

Ne perdons pas de temps et intéressons-nous à ce que renferme le second onglet nommé Gérer les emplacement.

Gérer les emplacements des menus dans WordPress

Comme son nom le suggère, cet onglet va vous donner la possibilité d’assigner les menus que vous aurez créés aux emplacements proposés par votre thème.

En fait, cet onglet vous permet de voir où s’affichent vos menus d’un seul coup d’oeil.

Pour attribuer ou modifier le menu pour un emplacement, utilisez le menu déroulant. Si vous avez besoin de créer un nouveau menu cliquez sur le lien Utiliser le nouveau menu.

Un clic sur Modifier vous emmènera sur la page d’édition du menu associé.

Note : La liste des menus présents dans cet onglet sera différente en fonction de votre thème.

Une fois que tous les menus seront à leur place, n’oubliez pas de cliquer sur Enregistrer les modifications.

Placer des menus à d’autres endroits

Au delà des emplacements proposés par votre thème WordPress, vous pouvez insérer des menus dans la barre latérale de votre site (si votre thème en propose une) et dans le pied de page via le widget Menu Personnalisé.

Pour cela, créez un nouveau menu et ne lui attribuez pas d'emplacement.

Ensuite, rendez-vous dans Apparence > Widgets et ajoutez un widget Menu Personnalisé à la zone de widgets de votre choix.

Utilisez le widget menu personnalisé de WordPress

Rédigez éventuellement un titre puis sélectionnez le menu à afficher dans le widget. Cliquez ensuite sur Enregistrer pour mettre ce nouveau menu en service.

Note : Il va de soi que cela est facultatif. Il y a de grandes chances pour que les emplacements par défaut de votre thème suffisent largement.

Pour conclure cette partie, je vous conseille de jeter un oeil à cette vidéo :

Bon, je crois que nous avons bien avancé sur l’utilisation des menus. Avant de nous quitter, je veux toutefois…

Aller plus loin avec les menus WordPress

Jusqu’à présent nous nous sommes contentés de voir comment fonctionnent les menus dans WordPress.

Voyons maintenant deux extensions bien utiles pour enrichir les menus de votre site.

La première servira à…

Ajouter un bouton de connexion/déconnexion à votre menu

L’ami Julio Potier a créé le plugin BAW Login/Logout menu pour permettre à vos utilisateurs de se connecter ou déconnecter de votre site.

Utilisant ce plugin sur le Chaudron, je vous le recommande vivement si votre site possède un espace membre.

En pratique, le plugin ajoute un nouvel encart sur la gauche avec 4 cases à cocher :

  • Se connecter
  • Se déconnecter
  • Se connecter|Se déconnecter
  • Inscription
Connexion/Déconnexion du menu WordPress

La 3ème case à cocher affichera automatiquement un lien Se Connecter si le visiteur n’est pas connecté et un lien Se déconnecter s’il l’est.

Vous pouvez aussi modifier le libellé de ces liens de connexion, de déconnexion et d’inscription en modifiant le champ Titre de la navigation.

Attention toutefois à laisser le caractère | dans le cas de Se connecter|Se déconnecter pour que le plugin sache quel texte afficher dans chacun des cas.

Télécharger BAW Login/Logout menu

La seconde extension dont je veux vous parler aujourd’hui va vous permettre de…

Cacher des éléments du menu dans certains cas

Dans un précédent article, nous avons vu comment afficher/masquer des widgets sur des pages particulières grâce à un plugin bien pratique.

Saviez-vous qu’il est possible de faire la même chose avec les éléments d’un menu ?

Pour cela vous aurez besoin du plugin If Menu :

Découvrez le plugin WordPress if menu

Une fois que vous aurez installé et activé ce plugin, une nouvelle case à cocher apparaitra au sein des éléments de vos menus.

Cochez là pour personnaliser l’affichage des éléments que vous voulez modifier. Voici comment cela se présente :

Configuration du plugin if menu

Le premier menu déroulant permet de choisir si WordPress doit afficher (Show) ou masquer (Hide) l’élément en question.

Le second menu déroulant détermine la condition pour laquelle il faudra afficher ou masquer l’élément. Vous avez le choix entre les conditions suivantes :

  • User is logged in : L’utilisateur est connecté
  • User is Admin : L’utilisateur est un administrateur
  • User is Editor : L’utilisateur est un éditeur
  • User is Subscriber : L’utilisateur est un abonné
  • User is Author : L’utilisateur est un auteur
  • User is Contributor : L’utilisateur est un contributeur
  • Front Page : L’utilisateur se trouve sur la page d’accueil
  • Single Post : L’utilisateur se trouve sur un article
  • Page : L’utilisateur se trouve sur une page

Je regrette tout de même que les conditions ne soient pas plus élaborées, cela dit c’est un très bon point de départ.

Télécharger If Menu

Conclusion

Quelque soit le site que vous allez concevoir avec WordPress, vous aurez forcément besoin d’un ou plusieurs menus pour rendre votre contenu accessible à vos visiteurs.

WordPress possède une interface relativement simple pour créer des menus cependant il ne faut pas tomber dans certains pièges (menu trop long, éléments inutiles, etc.).

Pour aller plus loin, j’ai préparé un atelier vidéo pour vous aider à concevoir de bons menus. Le but ? Vous aider à faire les bons choix et vous présenter d’autres extensions pour aller encore plus loin.

Si cet article vous a aidé d’une quelconque manière, partagez-la sur les réseaux sociaux grâce aux boutons ci-dessous. Cela sera votre moyen de me retourner l’ascenseur. Merci 🙂