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.

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 ?

82 commentaires

  1. Phil D

    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.

  2. Jobeleau

    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.

  3. Haka

    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

  4. Maxim

    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. Mickaël

      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… !

    2. Laure

      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!!!

  5. Willy

    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é

  6. 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

  7. 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 !

  8. 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 !!!!????

  9. Manuel

    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 …

  10. gilles

    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.

  11. eb

    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!

  12. 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. Spayn

      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.

  13. Jack05

    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.

  14. shadoo

    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.

  15. 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.

  16. 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 ?

  17. darknote

    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.

  18. 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

  19. darknote

    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.

  20. bouboune

    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 !!

  21. 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

Laisser un commentaire