Comment faire en sorte que les éléments de menu de niveau supérieur n'aient pas de lien, mais des sous-menus liés?

22

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 ne sont que 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 "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 CMS, 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.) ajoutez des entrées aux menus via la liste de 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é, cela ne me permettra pas de l'ajouter au menu.

Est-ce faisable via les menus de l'administrateur ou dois-je l'aborder autrement?

Merci pour votre aide!

    
posée PVA 05.10.2011 - 04:47
la source

14 réponses

13

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. Utilisez un équivalent de PHP à la méthode jQuery
  4. Utilisez le plug-in Désactiver le lien du menu parent (ou supprimez-le et écrivez le vôtre).
réponse donnée BandonRandon 05.10.2011 - 04:59
la source
17

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. Dans votre tableau de bord WordPress, accédez à "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, cela convertira le lien en texte brut.
  9. Cliquez sur le bouton "Enregistrer le menu"
réponse donnée GavinR 05.10.2011 - 05:02
la source
4

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 de # . Cela envoie l'utilisateur à un hachage vide sur la même page, donc, fondamentalement, 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. C’est peut-être moins inquiétant pour un menu qui se trouve en haut de la page, mais c’est assez bouleversant lorsque la page saute inopinément lorsque vous ne l’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 afin de détecter les cas où des liens de hachage vides sont utilisés dans le menu et de supprimer entièrement l'attribut href de ce lien. Un élément a sans attribut href est la méthode HTML 5 correcte de créer un lien de substitution.

/**
 * 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' );
    
réponse donnée shea 27.09.2014 - 13:00
la source
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);

Ceci remplacera le lien par un élément span pour le menu des éléments 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 contient des éléments de menu enfants, etc.

    
réponse donnée Sam Bull 11.11.2017 - 19:39
la source
0

J'ai résolu le problème de la manière suivante: dans header.php (de votre thème), j'ai recherché:

'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, ce qui désactive le clic.

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

    
réponse donnée niente0 28.07.2014 - 11:06
la source
0

Comme d'autres l'ont suggéré ici, 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 rationnelle pour retirer la balise de ces liens.

preg_replace('/<a>([^<]+)<\/a>/i', '<span class="no-link">$1</span>', $navHTML);
    
réponse donnée deweydb 07.05.2015 - 06:09
la source
0

Ceci supprimera le clic (et supprimera 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 );
    
réponse donnée Doug Cassidy 18.03.2016 - 13:54
la source
0

Cela a fonctionné pour moi:

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

.nolink {
   pointer-events: none;
   cursor: default;
}
    
réponse donnée RickyBono 13.10.2016 - 23:37
la source
0

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

#_

Notez le trait de soulignement après le hashtag. De cette façon, si votre menu fait défiler 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.

    
réponse donnée user1249523 20.11.2017 - 23:41
la source
0

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". Ainsi, "Produits" et "Produit 1" mèneront à la page "Produit 1".

2) Ajoutez une redirection afin 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 que quelqu'un essaie d'accéder à ce site. la page vierge des produits, ils seront redirigés.

    
réponse donnée Barry 21.12.2017 - 17:55
la source
0

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.

    
réponse donnée Rob 26.01.2018 - 20:06
la source
0
  1. Définissez le lien personnalisé sur # qui ne renverra aucun é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 les CSS pour obtenir le même style que <a> , n'oubliez pas cursor: context-menu; .

réponse donnée calmohallag 22.06.2018 - 18:28
la source
0

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

    
réponse donnée Tahi Reu 13.08.2018 - 22:22
la source
-1

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

Menu Admin - Mettez en surbrillance le menu principal lorsque vous êtes sur une page de sous-menu (sans afficher le sous-menu)

.

Cherchez la réponse d'Askelon. Le travail est parfait, sans avoir besoin de faire de preg_replaces ou de jquery.

    
réponse donnée Jeff 03.02.2015 - 21:05
la source

Lire d'autres questions sur les étiquettes