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.
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 ?
Une astuce mais excellente.
Bonne continuation.
Thierry
Superbe astuce ! Je cherchais comment faire, et c’est ultra simple. Merci.
Génial et trop simple, ça faisait des semaines que je cherchais. Merci!
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.
Provoque une rreur d’URL non valide dans Safari (Mac) également.
Merci pour l’astuce de l’astuce 🙂
c pas le # juste laisse le champ vide
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.
Essaie de mettre le domaine du site avec le dièse comme ceci : https://wpchannel.com/#
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
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 🙂
Un grand merci pour ce commentaire, car il est vrai que le # n’est pas parfait.
Monstrueux c’est exacement ce que je cherchais (non cliquable, pas mousehoverable)
Ça fait des mois que je recherche cet astuce.
Merci beaucoup
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!
Testé et approuvé pour un client !
Une solution très élégante; merci de l’avoir partagée !
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… !
eh oui, quelqu’un à trouvé une solution pour les ipad?
Solution parfaite. Merci !
(ce serait bien de l’ajouter à l’article, ça évitera de chercher dans les commentaires.
nickel. Merci ca marche très bien
merci, nickel 🙂
Le deux solutions marche nickel, pour l’instant. chrome et firefox
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!!!
Absolument fabuleux ! Même des années plus tard, cette astuce aide encore et toujours !!
Mille mercis !
MaxR
Bonjour. J’ai executé javascript: return false; à la place du # dans un lien personalisé de l’entête du menu de mon thème builder. Après validation le code disparaît (où s’est il enregistré ? Pas dans functions.php…). Le champ du lien est devenu vide. Ca fonctionne, mon pseudo lien n’est plus cliquable MAIS dans ma page de contact le bouton ENVOER du formulaire DIVI ne fonctionne plus non plus. HELP ! je ne trouve pas comment régler ce problème
Super.
Merci.
Bonne continuation.
Nathan
Super ! Merci !!
bonjour, cette fonction ne marche pas pour moi :/ une autre solution ? bien à vous
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é
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. 🙂
Super ton blog, je m’y abonne de suite.
Merci ! 😎
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
Oui par contre il me semble qu’il faut rajouter une propriété CSS pour avoir le bon curseur de lien, non ?
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;
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 !
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.
Génial le petit “javascript: return false;” ! Merci beaucoup.
Le javascript: return false; de Maxim est parfait merci !
Ca marche pas chez moi 🙁
Bonjours a tous, ça marche sauf pour le megamenu pour les liens colonne, si quelqu’un a une solution je prend, merci
Encore une fois “Merci Aurélien” 😉
Bonsoir, Comment je peux ajouter un lien en php avec une date dynamique. du type /?s=cal_event&m=20131002.
merci
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.
On ne peut rien mettre car WordPress ne l’autorise pas…
ç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 !!!!????
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!!
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 …
L’homme de la situation !! tu es magique !!
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.
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!
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.
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 ???
En utilisant la fonction wp_nav_menu dans le sitemap.
Bonjour,
je suis sur wordpress 4.0 et cette astuce ne semble pas fonctionner…toute idée sera la bienvenue!
Merci d’avance
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.
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
Dans Apparence > Menus ?
Oui oui Apparence / Menu/ , et clique sur le petit onglet sur la page en question… :/
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
En ne définissant pas de pages parentes mais en n’utilisant que les menus pour faire la hiérarchie. 😉
Bonjour,
c’est la solution que je fais, j’avais pensé qu’il y avait peut être un autre moyen, merci
Bonjour,
j’ai la version 4, j’ai tenté de suivre les étapes énoncées sans résultat.Besoin d’aide!!!
Bonjour,
la solution est donné dans les commentaire,s mettre dans le menu, ligne Class CSS, ce code
noclic cursordefault important
encore plus simple mettre “javascript: return false;” sans les “” à la place du lien 😉
Astuce déjà évoquée plusieurs fois dans les commentaires mais qui pose des soucis sur du tactile notamment. 😉
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.
Bonne remarque, l’article n’est plus à jour et il faut effectivement n’utiliser qu’un dièse.
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.
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
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.
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 ?
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.
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
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.
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 !!
Oui mais ne rien mettre du tout fait buger le menu sur tablettes.
On tourne en rond !
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
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 ?
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/
Je cherchais désespérément ; un grand merci pour l’info
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 ?
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 ! 🙂
Bonjour
j’ai une question concernant les produits. En effet je dois gérer les stocks de mes fournisseurs en me rendant quotidiennement sur leur site internet.
Pour aller plus vite je souhaiterais ajouter quelques part un lien privé qui me permet de me rendre directement vers la page produit de mon fournisseur.
Où puis je mettre ce lien dans woocommerce et surtout qu il reste en privé?
Merci pour vos réponses
Bonjour, votre question est hors sujet avec cet article. Merci de poser votre question sur le support de WPFR.
Hello!
Mille mercis pour cette astuce. Cela faisait des mois que je cherchais cela et, curieusement, c’est très mal expliqué globalement sur le net.
Je suis donc passé à côté maintes et maintes fois.
Enfin j’ai trouvé. Merci 😉
Bonjour le problème de cette astuce est que cela ne fonctionne pas en responsive. Les sous-menus de s’affichent pas.
Cela dépend directement de la façon de gérer les sous menus dans votre thème et non directement de l’astuce proposée. En approche mobile first, les sous menus sont à bannir dans la mesure du possible.
Comment ça la façon de gérer les sous-menus ? Je ne comprends pas. Je ne veux pas me passer de sous-menus.
Merci d’avoir résolution mon problème en 2 minutes !!
Merci énormément pour cette solution, ça m’enlève une sacrée épine du pied !!