Comment faire pour que l'élément de menu de niveau supérieur n'ait pas de lien, mais que les sous-menus soient liés?

25

Je construis un menu horizontal et certaines des entrées de ce menu auront des listes déroulantes (sous-menus), et d'autres non. Ceux qui ont des sous-menus ne sont pas en fait des pages. Ils sont juste destinés à être des guides pour les listes déroulantes.

Par exemple, disons que le menu horizontal est comme suit:

Accueil | À propos de nous | Produits | Directions | Contact

Et l'élément li "produits" est censé avoir 3 pages liées dans une liste déroulante verticale en dessous, donc "produits" lui-même ne représente pas réellement une page, comment puis-je faire cela dans WP?

(J'utilise WP comme CMS, avec des pages d'accueil et intérieures statiques. Je construis mes propres modèles, stylise les menus en CSS, puis enregistre les menus dans le fichier functions.php et les appelle dans les modèles.) Dans WP, vous ajoutez des entrées à les menus via la liste des pages, ou par les liens personnalisés. Mais je ne veux pas que les "produits" soient liés. Si je n'ajoute pas de lien au lien personnalisé, il ne me permettra pas de l'ajouter au menu.

Est-ce faisable via l'administrateur des menus ou dois-je l'aborder d'une autre manière?

Merci pour toute aide!

PVA
la source
1
voici la solution fonctionne très bien allez le vérifier wordpress.org/support/topic/no-page-menu-item
Vous pouvez le faire en utilisant js. essayez cet article. kvcodes.com/2014/07/…
Kvvaradha
Dans la zone URL, laissez-le vide.
AMY WANG
Personne n'a mentionné la classe WP_NAV_MENU_WALKER, vous pouvez écrire votre propre marcheur qui crache ce que vous voulez.
user3135691

Réponses:

12

J'ai quelques idées:

  1. Définissez le lien personnalisé sur # auquel ne retournera rien
  2. Ajoutez une classe personnalisée aux éléments, puis utilisez jQuery pour supprimer les liens.
  3. Utilisez un équivalent PHP à la méthode jQuery
  4. Utilisez le plugin Disable Parent Menu Link (ou démontez-le et écrivez le vôtre)
Brooke.
la source
Merci pour les conseils et les liens! Comme l'a suggéré Gavin, l'utilisation d'un # pour un lien personnalisé "fonctionne"; les autres options peuvent fonctionner mieux, mais ne sont pas aussi faciles. Eh bien, le plugin est probablement facile mais je déteste utiliser des plugins si je peux accomplir la même chose plus directement. Je devrai décider de la meilleure approche. Merci encore!
PVA
Si vous prévoyez de l'utiliser dans des appareils tactiles, faites attention à utiliser vide href=""car la plupart des utilisateurs d'appareils tactiles ne pourront pas voir le menu déroulant sans utiliser JS
Simon
Les liens se brisent. Vous voudrez peut-être intégrer quelques-unes de ces idées dans votre réponse
Karité
De plus, les numéros 2 et 3 font référence wp_list_pages(), et nonwp_nav_menu()
karité
25

La façon la plus simple de le faire sans plugin ou quoi que ce soit est d'utiliser la fonction "Menus" de WordPress. Voici les instructions pour WordPress 4.8:

  1. Depuis votre tableau de bord WordPress, allez dans "Apparence -> Menus"
  2. Dans l'onglet "Modifier les menus", sélectionnez "Liens personnalisés"
  3. Pour l'URL, entrez "#" (sans guillemets)
  4. Pour le texte du lien, entrez le texte souhaité pour le niveau supérieur de votre menu déroulant
  5. Cliquez sur le bouton "Ajouter au menu"
  6. Faites glisser l'élément de menu à la position souhaitée dans votre menu
  7. Pour l'élément de menu que vous venez d'ajouter, cliquez sur la flèche vers le bas à droite de l'élément (il indiquera "lien personnalisé" à gauche de l'élément)
  8. Supprimez le "#" de l'URL. Cela - dans tous les navigateurs - convertira le lien en texte brut.
  9. Cliquez sur le bouton "Enregistrer le menu"
GavinR
la source
Merci pour ce conseil. C'est ez, mais pas parfait dans la mesure où les étiquettes ressemblent toujours à des "liens" lorsque vous passez la souris, mais elles ne vont nulle part. Cela peut donc fonctionner à la rigueur.
PVA
1
Avez-vous lu tout le commentaire? Une fois le lien ajouté, cliquez sur la flèche déroulante à côté du nom du lien et supprimez le "#" de la zone de texte URL. Cela, dans tous les navigateurs, empêchera le lien de cliquer.
GavinR
1
Oui, merci, j'ai lu tout le commentaire. Je suis revenu et j'ai réessayé et j'ai réalisé mon problème. Lorsque je quitte le #, le mot apparaît dans la barre de navigation mais comme un "lien mort". Lorsque j'ai supprimé le #, le mot n'apparaissait pas dans la barre de navigation à moins que je ne le survole et qu'il apparaisse dans un état de survol. Je suppose donc que cela signifie que je dois appliquer CSS au mot pour qu'il apparaisse sans être lié. Je ne sais pas pourquoi l'état de vol stationnaire apparaît ...
PVA
Ceci est toujours en 4.9.5, mais je ne suis pas sûr car cela `` se sent '' comme un hack qui tire avantage d'un bug. Sinon ... ça va sauver beaucoup de maux de tête aux gens ... C'est un peu comme le fait que Wordpress considère "1 2 3 4 5 6" comme un mot de passe fort ... quand même.
brooklynsweb
Pour info, si vous effectuez l'étape 8 (pour une bonne raison), votre curseur ne sera pas un pointeur lorsque vous survolerez le lien personnalisé. Dans ce cas, vous pouvez le styliser avec le pointeur: curseur.
MarsAndBack
7

La méthode la plus simple que j'ai trouvée était de créer un élément de lien personnalisé avec la valeur URL du lien de # . Cela envoie l'utilisateur vers un hachage vide sur la même page, donc en gros, il n'y a aucun lien.

Cependant, il existe certains effets secondaires de l'utilisation de hachages vides pour les liens d'espace réservé. Le lien apparaîtra toujours et se comportera comme un lien, il pourrait donc dérouter un utilisateur lorsqu'il clique sur ce qui semble être un lien mais rien ne se passe. L'autre effet est que cliquer sur un lien de hachage vide remplacera tout hachage existant, envoyant l'utilisateur en haut de la page. Ce n'est peut-être pas si inquiétant pour un menu qui est en haut de la page de toute façon, mais c'est assez choquant lorsque la page saute de manière inattendue lorsque vous ne vous y attendez pas, surtout s'il s'agit d'un menu de pied de page.

La solution consiste à combiner la méthode de hachage vide avec un morceau de code pour détecter quand des liens de hachage vides sont utilisés dans le menu et supprimer hrefcomplètement l' attribut de ce lien. Un aélément sans hrefattribut est la bonne méthode HTML 5 pour créer un lien d'espace réservé.

/**
 * Remove the href from empty links `<a href="#">` in the nav menus
 * @param string $menu the current menu HTML
 * @return string the modified menu HTML
 */
add_filter( 'wp_nav_menu_items', function ( $menu ) {
    return str_replace( '<a href="#"', '<a', $menu );
} );
karité
la source
2

Cela a fonctionné pour moi:

J'ai activé les classes CSS dans Menus> Options d'écran> Classes CSS. Ensuite, j'ai donné l'élément de menu que je voulais désactiver la classe ".nolink" et ajouté ce morceau de code à mon panneau CSS personnalisé:

.nolink {
   pointer-events: none;
   cursor: default;
}
RickyBono
la source
Cela tue également la liste déroulante.
user385917
Utiliser #comme cible de lien, puis appliquer une classe CSS personnalisée à des fins de style, est à mon avis la solution la moins hacky. Cependant, le réglage pointer-events: nonen'a pas beaucoup de sens pour moi, car il cassera les sous-menus. Pourriez-vous expliquer pourquoi vous avez défini cet attribut?
user1438038
1

En utilisant l'approche PHP, j'ai ajouté ce code à functions.php:

function remove_link_contact_menu($item_output, $item) {
    if ($item->post_name == 'contact')
        return '<span>' . $item->title . '</span>';

    return $item_output;
}
add_filter('walker_nav_menu_start_el', 'remove_link_contact_menu', 20, 2);
add_filter('megamenu_walker_nav_menu_start_el', 'remove_link_contact_menu', 20, 2);

Cela remplacera le lien par un élément span pour le menu de l'élément avec le post_name == "contact", ce que je cherchais. Vous pouvez facilement changer cela pour vérifier le titre du menu ou l'ID, ou ajouter du code pour vérifier s'il a des éléments de menu enfant, etc.

Sam Bull
la source
0

J'ai résolu de cette façon: dans header.php (de votre thème) j'ai cherché:

'link_before'     => '',
'link_after'      => '',

et remplacé par:

'link_before'     => '<script>var scriptTag=document.getElementsByTagName("script");scriptTag=scriptTag[scriptTag.length-1];if(scriptTag.parentNode.href)if(scriptTag.parentNode.href.slice(-1)=="#")document.write("<span onclick=\"return false\">")</script>',
'link_after'      => '<script>var scriptTag=document.getElementsByTagName("script");scriptTag=scriptTag[scriptTag.length-1];if(scriptTag.parentNode.href)if(scriptTag.parentNode.href.slice(-1)=="#")document.write("</span>")</script>',

En termes simples, ce script vérifie si son lien parent se termine par "#", dans ce cas, il ajoute un élément span autour du contenu de la balise A, qui désactive le clic.

J'espère que ça aide :-)

niente0
la source
Salut, je sais que c'est une vieille réponse, mais pour référence future, je ne voudrais pas simplement modifier votre fichier d'en-tête de thèmes, car lors de sa prochaine mise à jour, tout votre code sera écrasé. La meilleure solution pour cela est de créer un thème enfant avec votre code personnalisé.
Scott
0

Comme d'autres l'ont suggéré ici, vous pouvez créer un élément de menu de lien personnalisé avec le # comme URL. Effacez ensuite le # une fois qu'il est ajouté au menu. Et enfin, vous pouvez utiliser cette expression régulière simple pour supprimer la balise réelle de ces liens.

preg_replace('/<a>([^<]+)<\/a>/i', '<span class="no-link">$1</span>', $navHTML);
deweydb
la source
0

Cela supprimera le clic (et décortiquera l'élément). De cette façon, vous n'avez pas à utiliser les liens # personnalisés dans votre menu.

add_action( 'wp_footer', function(){
    ?>
    <script>
    (function( $ ) {
        var itemm = $('#main-menu .menu-item-has-children > a');
        itemm.click(function(){
            document.activeElement && document.activeElement.blur();
            return false;
        });
    })(jQuery);
    </script>
<?php
 }, 1, 0 );
Doug Cassidy
la source
0

Appréciez que c'est un vieux fil de discussion, mais pour un moyen rapide et sale d'avoir un lien dans Wordpress, faites l'URL du lien comme:

#_

Remarquez le trait de soulignement après le hashtag. De cette façon, si votre menu défile vers le bas de la page (c'est-à-dire fixe), vous n'obtenez pas un saut en haut de la page lorsque vous cliquez dessus et ne nécessite aucun plugin / script.

user1249523
la source
0

Je me rends compte que je suis en retard dans le jeu, mais ce sont les deux méthodes que j'utilise:

1) Faites de l'élément de menu parent un doublon du premier sous-élément et changez son étiquette. Par exemple, si le premier élément sous "Produits" est "Produit 1", utilisez "Produit 1" comme élément de menu parent, puis changez son étiquette en "Produits". De cette façon, "Produits" et "Produit 1" mèneront à la page Produit 1.

2) Ajoutez une redirection pour que la page Produits soit redirigée vers le produit 1. L'avantage de cette option est qu'elle vous permet de créer une page Produits vierge pour créer une liste hiérarchique dans Pages, mais si quelqu'un essaie d'accéder aux Produits vierges page, ils seront redirigés.

Barry
la source
0

Allez dans Apparence, puis cliquez sur les menus. Dans cette section, allez sous la structure du menu et cliquez sur la flèche vers le bas pour développer la page et vous verrez une boîte qui dit désactiver le lien. Cochez cette case et enregistrez.

Rob
la source
Cette fonctionnalité n'est pas fournie par core. Peut-être qu'un thème ou un plugin l'ajoute à votre configuration?
Dave Romsey
Je l'ai déjà vu auparavant, j'aurais aimé savoir quel plugin ou thème a fait ça.
DavGarcia
0
  1. Définissez le lien personnalisé sur # qui ne renverra rien Élément de la liste
  2. Ajoutez ce filtre:

    add_filter( 'wp_nav_menu_items', 'wpse_remove_empty_links' );
    
    function wpse_remove_empty_links( $menu ) {
    
        return preg_replace("/<a href=\"#\">(.+?)<\/a>/is", "<span>$1</span>", $menu);
    
    }
  3. Modifiez le CSS d'envergure pour obtenir le même style que <a>, n'oubliez pas cursor: context-menu;.

calmohallag
la source
0

Créez l'élément de menu "Liens personnalisés" et ajoutez "javascript :;" (sans guillemets) pour le champ URL. C'est mieux que d'utiliser "#" car cela ne fera pas défiler votre page vers le haut lorsque vous cliquerez dessus.

Tahi Reu
la source
0

En écrivant à partir du 1/2019, la solution qui produit le bon HTML5 est de faire ce qui suit.

  1. Ajoutez un lien personnalisé avec l'URL définie sur # et le nom que vous souhaitez. Les deux champs sont obligatoires.
  2. Modifiez le lien personnalisé nouvellement ajouté afin que l'URL soit vide.
  3. Enregistrez les modifications.

Cela produira une navigation de niveau supérieur <a>Menu</a>qui est la bonne façon de représenter un lien non cliquable.

DavGarcia
la source
0

Vous pouvez désactiver les événements sur la <a>balise pour tous les éléments de menu de premier niveau à l'aide de css pur. .main-menula classe peut avoir un autre nom selon la dénomination de votre menu.

/* disable parent menu items */
ul.main-menu > li > a {
    pointer-events: none;
}
Karl Adler
la source