web-dev-qa-db-fra.com

Comment faire en sorte que l’élément de menu principal n’ait pas de lien, mais des sous-menus liés?

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

Par exemple, supposons que le menu horizontal ressemble à ceci:

Accueil | À propos de nous | Produits | Directions Contact

Et l'élément "produits" li est censé avoir 3 pages liées dans une liste déroulante verticale en dessous, de sorte que "produits" ne représente pas réellement une page. Comment puis-je le faire dans WP?

(J'utilise WP en tant que système de gestion de contenu, avec des pages d'accueil statiques et internes. Je crée 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 aux menus via la liste de pages ou 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é, cela ne me permettra pas de l'ajouter au menu.

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

Merci pour toute aide!

menus
24
PVA

J'ai quelques idées:

  1. Définissez le lien personnalisé sur # qui ne renverra rien
  2. Ajoutez une classe personnalisée aux éléments, puis utilisez jQuery pour supprimer les liens.
  3. Utilise un PHP équivalent à la méthode jQuery
  4. Utilisez le lien Disable Parent Menu Link plugin (ou démontez-le et écrivez le vôtre)
12
Brooke.

Le moyen le plus simple de le faire sans plugin ou quoi que ce soit consiste à 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 "Éditer 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 située à droite de l'élément (le lien "lien personnalisé" apparaît à gauche de l'élément).
  8. Supprimez le "#" de l'URL. Dans tous les navigateurs, ceci convertira le lien en texte brut.
  9. Cliquez sur le bouton "Enregistrer le menu"
22
GavinR

La méthode la plus simple que j'ai proposée consistait à créer un élément de lien personnalisé avec la valeur d'URL de lien #. Cela envoie l'utilisateur à un hachage vide sur la même page, donc essentiellement des liens nulle part.

Cependant, l'utilisation de hachages vides pour les liens fictifs présente certains effets secondaires. Le lien apparaîtra toujours et se comportera comme un lien, ce qui risquerait de dérouter un utilisateur qui 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 et enverra l’utilisateur en haut de la page. Cela peut ne pas être si inquiétant pour un menu qui est en haut de la page de toute façon, mais c'est assez choquant quand la page saute de façon inattendue quand 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 le moment où des liens de hachage vides sont utilisés dans le menu et pour supprimer complètement l'attribut href de ce lien. Un élément a sans attribut href est la méthode HTML 5 correcte de la création d’un lien fictif.

/**
 * 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
 */
function wpse_remove_empty_links( $menu ) {
    return str_replace( '<a href="#">', '<a>', $menu );
}

add_filter( 'wp_nav_menu_items', 'wpse_remove_empty_links' );
6
shea

Cela a fonctionné pour moi:

J'ai activé Classes CSS dans les menus> Options d'écran> Classes CSS Ensuite, j'ai indiqué à 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;
}
1
RickyBono

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

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

1
Sam Bull

Appréciez qu’il s’agit d’un ancien fil de discussion, mais pour créer un lien dans Wordpress, il suffit de créer l’URL du lien comme suit:

#_

Notez 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 corrigé), vous ne recevez pas de saut en haut de la page lorsque vous cliquez dessus et ne nécessite aucun plugin/script.

0
user1249523

En écrivant à partir de 1/2019, la solution qui produit le bon format HTML5 consiste à procéder comme suit.

  1. Ajoutez un lien personnalisé avec l'URL définie sur # et le nom de votre choix. Les deux champs sont obligatoires.
  2. Modifiez le lien personnalisé que vous venez d'ajouter pour que l'URL soit vide.
  3. Enregistrez les modifications.

Cela produira un fichier de navigation de niveau supérieur qui s'appelle <a>Menu</a>, ce qui est la manière correcte de représenter un lien non cliquable.

0
DavGarcia
  1. Définissez le lien personnalisé sur # qui ne renverra rien. Élément de liste

  2. Ajouter 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 span CSS pour obtenir le même style que <a>, n'oubliez pas cursor: context-menu;.

0
calmohallag

Créez un é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 cliquez dessus.

0
Tahi Reu

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

0
niente0

Vous pouvez désactiver les événements sur la balise <a> pour tous les éléments de menu de premier niveau à l'aide de fichiers CSS purs. La classe .main-menu peut avoir un autre nom en fonction du nom de votre menu.

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

Cela supprimera le clic (et déshabillera 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 );
0
Doug Cassidy

Comme d'autres l'ont suggéré, vous pouvez créer un élément de menu de lien personnalisé avec le # en tant qu'url. Ensuite, effacez le # une fois qu’il est ajouté au menu. Et enfin, vous pouvez utiliser cette simple expression régulière pour retirer la balise réelle de ces liens.

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

Je réalise 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 duplicata du premier sous-élément et modifiez 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 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 vides page, ils seront redirigés.

0
Barry

Allez à Apparence, puis cliquez sur les menus. Dans cette section, allez dans 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.

0
Rob