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?

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!

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)

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"

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 );
} );

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;
}

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.

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 :-)

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);

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 );

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.

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.

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.

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

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.

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.

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;
}

Une solution beaucoup plus simple peut être trouvée sur une autre question:

Menu Admin - Mettez en surbrillance le menu de niveau supérieur sur une page de sous-menu (sans afficher le sous-menu)

Recherchez la réponse d'Askelon. Fonctionne parfaitement, sans avoir besoin de faire de preg_replaces ou de jquery.