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 ;
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.
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 ?
thierry
Une astuce mais excellente.
Bonne continuation.
Thierry
jparuitte
Superbe astuce ! Je cherchais comment faire, et c’est ultra simple. Merci.
Phil D
Génial et trop simple, ça faisait des semaines que je cherchais. Merci!
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.
Jobeleau
Provoque une rreur d’URL non valide dans Safari (Mac) également.
Balystick
Merci pour l’astuce de l’astuce
Itech PC
c pas le # juste laisse le champ vide
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.
Aurélien Denis auteur de l’article
Essaie de mettre le domaine du site avec le dièse comme ceci : https://wpchannel.com/#
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
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
Pixnel
Un grand merci pour ce commentaire, car il est vrai que le # n’est pas parfait.
Hugues
Monstrueux c’est exacement ce que je cherchais (non cliquable, pas mousehoverable)
expert wordpress
Ça fait des mois que je recherche cet astuce.
Merci beaucoup
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!
Aurélien Denis auteur de l’article
Testé et approuvé pour un client !
Jobeleau
Une solution très élégante; merci de l’avoir partagée !
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… !
djeycognard
eh oui, quelqu’un à trouvé une solution pour les ipad?
foxprime
Solution parfaite. Merci !
(ce serait bien de l’ajouter à l’article, ça évitera de chercher dans les commentaires.
mlpdlr
nickel. Merci ca marche très bien
Cyril
merci, nickel
Patrice
Le deux solutions marche nickel, pour l’instant. chrome et firefox
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!!!
MaxR
Absolument fabuleux ! Même des années plus tard, cette astuce aide encore et toujours !!
Mille mercis !
MaxR
PRIGENT
Super.
Merci.
Bonne continuation.
Nathan
Chlouby
Super ! Merci !!
sb
bonjour, cette fonction ne marche pas pour moi une autre solution ? bien à vous
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é
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.
Steve Fallet
Super ton blog, je m’y abonne de suite.
Aurélien Denis auteur de l’article
Merci !
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
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 ?
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;
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 !
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.
Agence web FD
Génial le petit « javascript: return false; » ! Merci beaucoup.
Dom
Le javascript: return false; de Maxim est parfait merci !
skoop
Ca marche pas chez moi
eric
Bonjours a tous, ça marche sauf pour le megamenu pour les liens colonne, si quelqu’un a une solution je prend, merci
Stephane Dessenne
Encore une fois « Merci Aurélien »
Fred
Bonsoir, Comment je peux ajouter un lien en php avec une date dynamique. du type /?s=cal_event&m=20131002.
merci
Anouar
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.
Aurélien Denis auteur de l’article
On ne peut rien mettre car WordPress ne l’autorise pas…
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 !!!!????
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!!
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 …
Josepe
L’homme de la situation !! tu es magique !!
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.
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!
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.
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 ???
Aurélien Denis auteur de l’article
En utilisant la fonction wp_nav_menu dans le sitemap.
Spayn
Bonjour,
je suis sur wordpress 4.0 et cette astuce ne semble pas fonctionner…toute idée sera la bienvenue!
Merci d’avance
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.
djmehhh
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
Aurélien Denis auteur de l’article
Dans Apparence > Menus ?
djmehhh
Oui oui Apparence / Menu/ , et clique sur le petit onglet sur la page en question…
Darknote
Bonjour,
Je connaissais l’astuce mais il me reste un souci pour les pages, les pages enfants ont dans leurs urls toujours le nom de la page parent, il n’y a pas un moyen de ne pas avoir le nom de la page parent ?
http://nomdedomaine.fr/page-parent/page-enfant en http://nomdedomaine.fr/page-enfant ?
Merci
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.
Darknote
Bonjour,
c’est la solution que je fais, j’avais pensé qu’il y avait peut être un autre moyen, merci
Gégé
Bonjour,
j’ai la version 4, j’ai tenté de suivre les étapes énoncées sans résultat.Besoin d’aide!!!
j.howlett
Bonjour,
la solution est donné dans les commentaire,s mettre dans le menu, ligne Class CSS, ce code
noclic cursordefault important
BriceL
encore plus simple mettre « javascript: return false; » sans les « » à la place du lien
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.
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.
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.
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.
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
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.
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 ?
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.
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
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.
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 !!
ph
Oui mais ne rien mettre du tout fait buger le menu sur tablettes.
On tourne en rond !
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
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 ?
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/
florence
Je cherchais désespérément ; un grand merci pour l’info
Tot
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 ?
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 !