Créer des menus parents non cliquable avec WordPress

Depuis WordPress 3.0 et la prise en charge des menus de navigation, de nombreux utilisateurs se demandent comment faire en sorte que l'élément parent d'un menu ne soit pas cliquable. Voici la réponse tout en image et bien ultra-simple dans sa mise en application.

Vous recherchez un développeur WordPress capable de vous créer un thème sur-mesure ? C'est mon métier depuis plus de 8 ans, prenez contact et discutons de votre projet.

Connectez-vous dans un premier temps au back-office de WordPress  puis rendez-vous dans le module Apparence. Déroulez ce dernier puis cliquez sur Menus.

Vous devriez retrouver votre navigation principale. Il suffit de remplacer chaque élément parent d’un menu par un lien externe avec les informations suivantes :

  • Adresse Web : # ;
  • Titre : le nom de votre menu non cliquable ;

 

custom-item-link-wordpress

Cliquez sur le bouton Ajouter au menu puis créez la hiérarchie comme vous avez l’habitude de le faire, par simple glisser / déposer.

Capture d'écran - Création d'une hiérarchie de menu
Positionnez l’élément parent en respectant votre hiérarchie initiale

Pour confirmer, faites Enregistrer le menu.

Vous pouvez créer autant de liens non cliquables en suivant cette manière. Simple et efficace vous ne trouvez pas ?

83 commentaires
  1. Une astuce mais excellente.
    Bonne continuation.
    Thierry

    1. jparuitte

      Superbe astuce ! Je cherchais comment faire, et c’est ultra simple. Merci.

  2. Génial et trop simple, ça faisait des semaines que je cherchais. Merci!

  3. Sauf que je constate que si on met http://# on obtient un signal d’erreur (URL non valide) dans IE9, Firefox et Opéra, en cliquant sur l’élément du menu.
    Si j’enlève le http:// et ne laisse que le Dièse (#) ça marche sans signal d’erreur.

    1. Provoque une rreur d’URL non valide dans Safari (Mac) également.

  4. Toujours sur Mac, si on ne laisse que le dièse, le menu reste cliquable (le curseur se transforme en main) mais le clic n’aboutit pas. Vérifié avec Safari, Firefox et Opera.

    À mon humble avis, une solution plus élégante serait d’envoyer le visiteur directement sur le premier élément du sous-menu.

  5. Fallet Steve

    Une bonne solution consiste à mettre # comme url et d’ajouter une classe CSS spécifique à l’élément du menu « non cliquable ».

    Exemple de classe CSS :
    /*Au liens de 1er niveau des éléments de la classe .noclic*/
    .noclic> a {cursor:default !important;}

    Pour ajouter facilement une classe à une élément du menu :
    https://wpchannel.com/options-cachees-menus-navigation-wordpress/

    Fonctionne sur Chrome, Firefox, IE9 et Opéra

  6. En fait pas la peine de mettre le # dans l’URL. Laissez le champ vide et ajouter la ligne :
    .noclic {cursor:default !important;}
    à votre feuille de style et le tour est joué.
    Merci pour l’info car cela m’a fait gagné beaucoup de temps

    1. Un grand merci pour ce commentaire, car il est vrai que le # n’est pas parfait.

    2. Monstrueux c’est exacement ce que je cherchais (non cliquable, pas mousehoverable)

  7. expert wordpress

    Ça fait des mois que je recherche cet astuce.
    Merci beaucoup

  8. Pour tout ceux qui ne sont pas satisfait de # (parce que peu importe le style qu’on lui donne, ça fait toujours l’effet d’un ancre), dans la partie « Adresse web » au lieu de http:// ou de # ou de http://#, écrivez ceci :

    javascript: return false;

    En gros, ça désactive le suivi du lien et donc le lien « n’existe plus ». C’est tout, pas de css, juste cette ligne! Pour ceux qui ne serait pas satisfait de cette solution, faites nous profiter de la vôtre si elle est plus efficace!

    Merci!

    1. Aurélien Denis auteur de l’article

      Testé et approuvé pour un client !

    2. Une solution très élégante; merci de l’avoir partagée !

    3. Attention quand même avec la technique javascript: return false; plutôt qu’un # .

      Sur les appareils tactiles (notamment, iPad), impossible de faire dérouler menu déroulant en « cliquant » dessus du coup… !

      1. djeycognard

        eh oui, quelqu’un à trouvé une solution pour les ipad?

    4. Solution parfaite. Merci !
      (ce serait bien de l’ajouter à l’article, ça évitera de chercher dans les commentaires.

    5. Le deux solutions marche nickel, pour l’instant. chrome et firefox

    6. YES!!! le # me faisait une page blanche, là c’est impec, l’élément de menu est non clickable mais ses sous menus se déroulent quand on passe dessus. Merci!!!

    7. Absolument fabuleux ! Même des années plus tard, cette astuce aide encore et toujours !!

      Mille mercis !

      MaxR

  9. bonjour, cette fonction ne marche pas pour moi une autre solution ? bien à vous

  10. On peut pousser le truc encore plus loin et transformer les éléments dont le href est # en span. Il suffit d’utiliser un Walker personnalisé, et de l’utiliser sur le menu.

    Personnellement j’en ai aussi profité pour virer les liens sur les éléments courants (car j’aime pas que mes contenus fassent des liens vers eux-mêmes…)

    Un petit tuto du comment faire : Faire son Walker personnalisé

    1. Aurélien Denis auteur de l’article

      Je viens de survoler ton article… énorme ! Non seulement, je n’avais jamais trouvé de ressources francophones à ce sujet mais l’image est tout aussi géniale.

  11. Steve Fallet

    Avec la nouvelle version de WP il suffit de créer le lien personnalisé en mettant ce que vous voulez comme adresse web (#, toto, …).

    Une fois votre lien placé dans le menu, supprimer l’adresse web et le tours est joué !

    WP créer pour cet élément de menu un lien sans attribut href : Mon menu

    1. Aurélien Denis auteur de l’article

      Oui par contre il me semble qu’il faut rajouter une propriété CSS pour avoir le bon curseur de lien, non ?

      1. Steve Fallet

        Oui malheureusement tant que l’élément du menu sera contenu dans une balise de lien il faudra utiliser le subterfuge d’une classe css spécifique avec cursor: default;

  12. Atomicfryer

    Tellement simple que cela ne m’a même pas traversé l’esprit…
    Un Grand merci à wpchannel, grave a vous j’apprend tout les jours !

  13. Pierre-Yves Tavernier

    Pour régler le problème sur un wp avec le theme vulcan, j’utilise le plugin : Ambrosite Unlink Parent Pages.
    C’est la solution la plus simple que j’ai trouvée.

  14. Agence web FD

    Génial le petit « javascript: return false; » ! Merci beaucoup.

  15. Bonjours a tous, ça marche sauf pour le megamenu pour les liens colonne, si quelqu’un a une solution je prend, merci

  16. Bonsoir, Comment je peux ajouter un lien en php avec une date dynamique. du type /?s=cal_event&m=20131002.

    merci

  17. La solution est de laisser le champ libre et ne rien mettre. Javascript c’est pas bon, css pas fonctionnel, et # c’est encore pire.

    1. Aurélien Denis auteur de l’article

      On ne peut rien mettre car WordPress ne l’autorise pas…

  18. stigmamaxStigma

    ça ne marche pas pour moi. J’ai supprimé les pages que j’utilisais pour mes entrées de menu pour les remplacer par la méthode que vous montrez. Résultat : Le premier élément disparait et toutes les entrées de menu se retrouvent alignées côte à côte dans la barre ! pourtant la hierarchie existe toutjours dans l’admin menu !!!!????

  19. Bonjour;
    Quelle est donc la meilleure et la plus fiable des solutions au final??? j’avoue qu’avec toutes celles qui ont étaient données je suis complètement perdu maintenant….

    que pensez vous de ce plug-in? Ambrosite Unlink Parent Pages cité plus haut?

    Aurélien viens à notre secours!!

    1. xavier de Kéroullas

      Si on met un dièse seul comme lien d’adresse web l’inconvénient est que on se repositionne en début de page , en général on y est déjà mais ce n’est pas toujours le cas , donc pour éviter ce retour en début de page il faut définir une vraie ancre de positionnement, n’importe laquelle , le nom du menu par exemple , pour faire ‘propre’.
      Là c’est ok , mais il y a toujours cette petite main quand on positionne la souris ,indiquant la présence du lien, et le non initié peut croire qu’il ne se passe rien par erreur quand il clique dessus …

  20. A priori cela ne fonctionne plus avec la version 3.8.

    Il faut simplement enlever tout le lien et laisser la case « adresse web » complètement blanche.

    En tout cas cette astuce fonctionne sur mon site. Et c’est plus logique. Puisqu’il n’y a pas de lien, il n’y a pas d’hypertexte.

  21. Bonjour,

    Auriez-vous une solution pour que ces liens non cliquables apparaissent dans le fil d’ariane ? J’ai créé des liens, avec des catégories en sous menu, mais seuls ces sous menus apparaissent.

    Merci!

    1. Aurélien Denis auteur de l’article

      J’ai vaguement une idée en passant par l’appel du menu mais ça risque de ne pas tenir bien longtemps… Le mieux reste de créer une vraie hiérarchie.

  22. conduisant

    merci pour cette astuce qui fonctionne toujours bien sur wp 3.8.1.

    par contre une question, lorsque j’ai fais un sitemap du site, je n’ai donc pas l’ensemble des menus non cliquables dans mon sitemap : je me retrouve avec une liste de pages très longue…existe-t-il une (autre) astuce pour générer un sitemap avec tous les menus non cliquables ???

    1. Aurélien Denis auteur de l’article

      En utilisant la fonction wp_nav_menu dans le sitemap.

  23. Bonjour,
    je suis sur wordpress 4.0 et cette astuce ne semble pas fonctionner…toute idée sera la bienvenue!
    Merci d’avance

    1. Au temps pour moi, avec WP 4.0 il suffit de ne rien mettre dans le champ « adresse web », comme l’a préciser Gilles ci-dessus…merci quand meme pour l’info et bonne continuation a tous.

  24. Bonjour
    J’ai découvert avec joie votre comm,
    déception 5 minutes plus tard,
    sur ma page j ai Navigation Label et Title Attribute
    mais aucune trace d’adresse web
    helppp

  25. Oui oui Apparence / Menu/ , et clique sur le petit onglet sur la page en question…

    1. Aurélien Denis auteur de l’article

      En ne définissant pas de pages parentes mais en n’utilisant que les menus pour faire la hiérarchie.

      1. Bonjour,
        c’est la solution que je fais, j’avais pensé qu’il y avait peut être un autre moyen, merci

  26. Bonjour,
    j’ai la version 4, j’ai tenté de suivre les étapes énoncées sans résultat.Besoin d’aide!!!

    1. j.howlett

      Bonjour,
      la solution est donné dans les commentaire,s mettre dans le menu, ligne Class CSS, ce code
      noclic cursordefault important

  27. encore plus simple mettre « javascript: return false; » sans les «  » à la place du lien

    1. Aurélien Denis auteur de l’article

      Astuce déjà évoquée plusieurs fois dans les commentaires mais qui pose des soucis sur du tactile notamment.

  28. Bonsoir, cette technique ne fonctionne pas pour moi, elle me renvoie sur une page erreur du navigateur.
    Donc je mets juste « # » et non « http://# » et ça fonctionne.
    En tout cas un grand merci pour cet article.

    1. Aurélien Denis auteur de l’article

      Bonne remarque, l’article n’est plus à jour et il faut effectivement n’utiliser qu’un dièse.

  29. On ne doit pas mettre le dièse après « http://# » mais supprimer http:// et le remplacer par # si non c’est comme si tu pointais ton url de lien externe vers un nom de domaine http://#
    Une url interne doit toujours partir de la racine du nom de domaine et/ou à la racine du lien de la page actuelle (relatif), mais là en l’occurrence « Lien personnalisé » est fait pour des liens externes de base, si l’on veut overrider le lien absolue par un lien relatif il faut supprimer toute la partie « http:// ».
    Afin que # s’accole à la suite de l’url courante.
    Ce sont les bases des liens relatifs et absolues dans le web.

  30. guillaume

    Bonjour,

    Je suis entrain de créer un site wordpress avec le thème twenty fifteen.
    J’ai créer des sous elements (= des « sous menu ») au menu principal mais les sous éléments ne s’affichent pas !
    et je ne sais pas comment faire pour que cela fonctionne…
    Je pensais avoir trouvé la solution du problème (en cochant dans chaque pages représentant les sous éléments du menu , dans « Attribut de la page », le nom de la « page parent » mais ça ne fonctionne pas non plus !

    Savez vous comment resoudre cela ?

    A l’avance, merci beaucoup

    1. Aurélien Denis auteur de l’article

      Dans Apparence > Menus, l’arborescence est-elle correcte ? Autrement dit, les sous-éléments sont-ils bien indentés ?

      La notion de Page parent / enfant est quasi-obsolète sous WordPress et inutile ici.

  31. guillaume

    Bonjour,

    Merci pour votre réponse. Oui l’arborescence est bien correcte. (les sous éléments sont sur la droite dans le menu)

    Pour être plus précis => en mode admin : lorsque je place les sous élément sur la droite dans le menu , tout est OK mais ces sous éléments ne sont plus visible sur mon site lorsque je quitte le mode admin et que je vais sur mon site via le navigateur .
    Toujours Hors mode admin, lorsque je clique sur l’élément parent , j’arrive sur la page parent mais à aucun moment j’ai accès aux sous élément. (ceux ci ne sont pas visible)

    Dois je reinstaller le theme ?

  32. Bonsoir,
    Vous n’avez un plugin cache ?
    Si cela fonctionne quand vous êtes connecté et que du moment que vous êtes déconnecté, donc simple visiteur, c’est que vous avez une version de votre site avant les sous-menu, une version mise en cache.
    il faut vider son cache.

  33. Guillaume

    tout d abord, Merci pour votre reponse.
    Comment faire pour vider le cache?
    Via un login cache si j ai bien compris ? En avez vous un a me conseiller ?
    Merci beaucoup

  34. Bonjour,
    Avez vous un plugin cache ? Comme WP Super Cache? Zencache? W3 Total Cache? Wp_Rocket ? etc….
    Dommage de ne pas mettre l’adresse de votre site, on pourrait voir le problème.
    Vous videz bien le cache déjà de votre navigateur, voir à utiliser un logiciel de nettoyage comme Ccleaner.

  35. Mettre un # n’empêche pas de cliquer sur le bouton du menu il renvoie simplement à la même page;

    ne rien mettre du tout dans le champ lien et le menu n’est plus du tout cliquable !!

  36. Oui mais ne rien mettre du tout fait buger le menu sur tablettes.
    On tourne en rond !

  37. silencesim

    Bonjour,

    Et pour faire le contraire ?
    J’ai un menu avec des sous elements, l’élément parent n’est pas cliquable. Auriez-vous une idée de comment faire pour le rendre cliquable ?

    Merci

    1. Aurélien Denis auteur de l’article

      Bonjour,

      si vous faites un clic milieu avec la souris sur l’élément parent, est-ce que vous obtenez une page 404 ou non ?

  38. silencesim

    Bonjour,

    Non pas du tout. Le menu est composé de différents éléments est notamment la partie en question :
    La saison (page saison 2015 -2016)
    – la saison 2015 (page saison 2015)
    – la saison 2016 (page saison 2016)

    http://theatredeloulle.com/

  39. Je cherchais désespérément ; un grand merci pour l’info

  40. Bonjour !
    Cette astuce est superbe en effet mais un lien personnalisé ne peut apparaître dans un fil d’Ariane je me trompe ? Comment peut on faire pour le considérer comme le parent d’une page ou d’une catégorie ?

  41. Dans le sillage d'Anne

    Oh la la, merci, cela faisait un moment que je renonçais aux menus car je trouvais que c’était le bazar, mais voilà la super astuce, ça va être tout beau et surtout bien pratique sur mon blog !

Les commentaires sont fermés.