Juil
24

Sous-menus personnalisés (dropdown) dans WordPress

La gestion des sous-menus dans WordPress est assez simple quand il s’agit du menu par défaut mais elle est beaucoup moins intuitive quand il s’agit de menus personnalisés.
Je parle ici des menus déroulants de la barre de menus principale (dans Apparence->Menus), pas d’éventuels plugins qui rajoutent en rajoutent dans les widgets (Apparence->Widgets).

Menus déroulants dans WordPress

Situation par défaut

Dans ce cas, si vous allez dans Apparence->Menus, le champ Primary Website Navigation est vide.

Si vous avez des pages imbriquées, c’est à dire que vous utilisez le champ Parent de la rubrique Attributs de la page, ceux-ci sont pris en compte et votre sous-menu apparaît quand vous passez la souris dessus.

Définition d'une page parente

Votre arborescence est donc respectée.

Par contre WordPress va afficher toutes vos pages sans exception.

Si vous avez, par exemple une page « Politique de confidentialité » vous aurez peut-être envie qu’elle apparaisse dans le footer de votre site plutôt que dans le menu.

Pour la supprimer de la barre de menus vous devrez donc créer un menu personnalisé dans laquelle cette page n’apparaît pas.

Menus et sous-menus personnalisés

Pour créer vos propres menus, rendez vous dans Apparence->Menus puis nommez votre nouveau menu et cliquez sur +.

Création d'un menu sous WordPress

Votre menu est alors créé mais pas actif.

Pour ça, il faut le sélectionner dans Primary Website navigation et enregistrer.

Sélectionner le menu créé pour l'activer

Et c’est à partir de là que les menus déroulants ne marchent plus si vous ne connaissez pas l’astuce pour les mettre en place.

Ajout de pages dans le nouveau menu

Dans la boîte Page, sélectionnez toutes les pages et sous-pages que vous souhaitez voir apparaître dans votre barre de menus puis cliquez sur Ajouter au menu.

Toutes vos pages sont maintenant en vrac dans votre menu et le champ « Parent » que vous aurez configuré dans chacune des pages ne sert plus à rien et rien n’est indiqué pour mettre des pages en sous-menus.

Il suffit en fait de faire du drag and drop. Cliquez sur le sous-menu en ne relâchant pas la souris et déplacez-le en dessous de la page parente mais surtout décalez là un petit peu sur la droite. Puis relâchez.

Mise en place des sous-menus

Si vous la laissez au même niveau elle s’affichera comme un autre onglet et non comme un sous-menu.

Vous pouvez répéter l’opération sur plusieurs niveaux.

Plusieurs niveaux de sous-menus

N’oubliez pas, bien sûr d’enregistrer.

Vous n’êtes pas obligés de n’utiliser que des pages, vous pouvez aussi le faire avec des catégories ou des liens.

L’astuce est certes toute bête mais elle n’est pas indiquée et rien ne fait penser qu’il faut procéder ainsi.

Résultat

Résultat du menu et ses sous-menus

Articles similaires :

26 Comments to “Sous-menus personnalisés (dropdown) dans WordPress”

  • LOUIS 13 octobre 2012 à 12 h 41 min

    Merci pour ce renseignement! Débutant sur wp j’ai chercher toute une journée!
    Louis

  • Arnaud 13 octobre 2012 à 16 h 08 min

    Oui moi aussi j’ai cherché un moment alors que c’est d’une simplicité enfantine :)

  • GeekPress from WordPress 21 octobre 2012 à 9 h 41 min

    Très bon tuto, c’est très accessible pour les débutant.

    Par contre, un petit bémol avec les menu personnalisés de WordPress, c’est qu’il bouffe énormément en requêtes SQL. Pour afficher un menu, il faut plus de 14 requêtes par menu !

    Donc si vous êtes développeur et que vous n’avez pas besoin de modifier tous les jours les éléments du menu, des liens en dur ça suffira largement !
    GeekPress@WordPress Articles récents..Booster la rapidité de son site en préchargeant les pages avec HTML5My Profile

  • romain 27 décembre 2012 à 10 h 18 min

    mais bien sûr! merci!

  • Alex 13 février 2013 à 14 h 25 min

    Merci beaucoup pour votre aide!

    Ai eu du mal à trouver l’info… je vais enfin pouvoir avancer!
    Merci.

    A.
    Alex Articles récents..A proposMy Profile

  • Sonia 16 février 2013 à 10 h 42 min

    Bonjour,

    Merci pour ce super tuto, clair et très simple. Je suis passée plusieurs fois devant cette page de menu en me demandant à quoi elle pouvait bien servir. :p

  • Arnaud 16 février 2013 à 10 h 44 min

    La page de menus sert juste à les organiser comme bon vous semble.

    Là c’est juste une astuce à utiliser avec parcimonie. Pour remplacer tout les menus par des images il vaut mieux passer par des plugins ;)

  • roshanak 29 avril 2013 à 0 h 10 min

    troooo bien merci, c’est tellement simple quand on apprend

  • jessica 14 mai 2013 à 14 h 06 min

    milles merci

  • Manon 23 mai 2013 à 14 h 46 min

    Merci beaucoup pour ces explications.

    Par contre j’ai un problème, quand sur mon site je fais glisser ma souris vers l’onglet du sous-menu, celui-ci disparaît 2 fois sur 3 avant que j’ai pu cliquer dessus. Les autres fois, non.
    Pourriez-vous m’aider?
    Merci

  • Arnaud 23 mai 2013 à 14 h 52 min

    Effectivement ça disparait trop vite.
    Est-ce que, si vous activez un autre thème (juste le temps de tester) comme twenty ten par exemple, vous avez le même problème ?

  • Manon 27 mai 2013 à 7 h 52 min

    Bonjour,
    Sous Twenty je n’ai pas ce problème en effet. Avez-vous une idée pour résoudre ce problème?

    Merci

  • Arnaud 27 mai 2013 à 7 h 55 min

    Diificile à dire comme ça.
    J’ai essayé Evolve pour voir et je n’ai pas rencontré ce problème.

    Peut-être qu’un plugin n’est pas compatible avec Evolve.
    Essayez éventuellement de désactiver les plugins puis d’en réactiver, de vérifier si ça marche, en réactiver un autre et ainsi de suite.

  • Sandy 31 mai 2013 à 12 h 12 min

    Bonjour,
    Je cherchais depuis hier comment créer des sous-menus. Je commençais à désespérer. C’est très bien expliqué. Je suis trop contente.
    Merci pour ce tuto.
    Sandy

  • camille 5 juin 2013 à 8 h 13 min

    Bonjour,
    Pour ce qui est des sous menus j’avais réussi mais mon problème se trouve un peu plus loin…
    J’ai bien un menu déroulant
    J’ai un sous menu
    j’ai un sous sous menu

    et lorsque j’essaye d’intégrer un sous menu de troisième niveau, il se déroule au dessus du sous menu de niveau 2 rendant la navigation très compliquée.

    Avec vous un plan de secours? un bout de code ou une manip simple?

    Bonne journé à tous

  • Arnaud 6 juin 2013 à 13 h 15 min

    Bonjour,

    Ca dépend beaucoup de votre thème.
    Peut-être que le menu s’adapte à la taille de l’écran et que c’est mal géré au boût de plusieurs sous menus.

    Vous pouvez éventuellement tenter d’utiliser un plugin qui gère les menus.
    Peut-être que outrepassera le codage de votre thème avec un peu de chance.

  • Jean 11 juin 2013 à 10 h 34 min

    Bonjour,

    Merci pour ce tuto.
    J’ai cependant un petit problème que je ne parviens pas pour l’instant à résoudre.
    J’ai 2 niveaux de rubrique dans mon menu (rubriques / sous-rubriques). Comment faire pour qu’une rubrique pointe vers sa première sous-rubrique (sous-rubrique par défaut) ou, ce qui revient à peu près au même, que les rubriques ne soient pas cliquables ?

    bonne journée à tous,
    jean

  • Arnaud 11 juin 2013 à 14 h 17 min

    Ah oui j’ai eu ce problème aussi :)

    Pour rendre un menu non cliquable pouvez utiliser l’une des deux façons suivantes :
    – méthode qui je pense ne fonctionne plus avec les versions actuelles mais essayez toujours, c’est la plus simple :
    Dans Apparence>Menu créez votre menu en tant que lien personnalisé et remplacez le lien par #

    – méthode que j’ai utilisé récemment :
    Faire comme précédemment.
    Ensuite dans le menu « Options » tout en haut, cochez « classes CSS »
    Dans le lien personnalisé que vous avez créé entre par exemple « noclic » dans le champ « classes Css »
    Rendez-vous ensuite dans Apparence>Editeur
    Sélectionnez votre feuille de style (ca peut varier suivant les thèmes)
    Rajouter ceci à la fin :

    .noclic
    {
    cursor:default !important;
    }

  • dock iphone 5 août 2013 à 17 h 19 min

    très intéressant merci du partage

  • coque iphone 4s 7 août 2013 à 10 h 37 min

    très intéressant! ça va bien m’aider

  • Dan 8 octobre 2013 à 10 h 43 min

    Voilà qui est efficace ! ! Par contre j’ai des soucis CSS (sur les couleurs des sous-menus), un petit complément CSS serait le bienvenu. Joli boulot !

  • Arnaud 8 octobre 2013 à 16 h 59 min

    Souvent les couleurs sont configurables dans les options du thème.

    Si ce n’est pas le cas il y’a plusieurs solutions :
    – il faut trouver comment s’appelle la classe CSS qui gère l’affichage du menu et aller la modifier dans Apparence>Editeur>Feuille de style

    – ou alors il faut aller dans le menu puis cliquer en haut sur « Options de l’écran » et cocher « Classes CSS » , ensuite dans le ou les menus remplir le champ Classes CSS et aller dans la feuille de style rajouter la même classe dans laquelle on inclut le changement de couleur.

  • Paul Mumu 22 janvier 2014 à 16 h 36 min

    Pas dur à faire en combinant HTML 5 et CSS3 mais toujours un plus de le maîtriser sur CMS
    Paul Mumu Articles récents..Bons plans Rakabulle : UBER, votre chauffeur privéMy Profile

  • sitraka 6 février 2014 à 11 h 24 min

    thanks a lot, it’s the only page from 15mn of google search who give the solution to my problem

  • Gold'n Blog 6 juillet 2014 à 13 h 38 min

    Merci beaucoup pour cette astuce ! ça aide ! Surtout lorsqu’on a des centaines d’articles à classer/trier !
    Gold’n Blog Articles récents..Terra Nova : la série SFMy Profile

  • fulbert 12 mars 2015 à 19 h 00 min

    Bonjour,
    Ok pour la partie administration mais comment implémenter le code dans le theme pour prendre en compte le sous menu avec les class css souhaiter?
    fulbert Articles récents..Adhérer à l’associationMy Profile