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

J'ai quelquesidées:

1. Définissez le lienpersonnalisé sur # quine renverra rien
2. Ajoutez une classepersonnalisée aux éléments,puis utilisezjQuerypour supprimer les liens.
3. Utilisez un équivalent PHP à laméthodejQuery
4. Utilisez leplugin Désactiver le lien dumenuparent (ou démontez-leet écrivez le vôtre)

I have a few ideas:

1. Set the custom link to # which won't return anything
2. Add a custom class to the items and then use jQuery to remove the links.
3. Use a PHP equivalent to the jQuery method
4. Use the Disable Parent Menu Link plugin (or take it apart and write your own)

Lemoyen leplus simple de lefaire sansplugin ou quoi que ce soitest d'utiliser lafonction "Menus" de WordPress.Voici lesinstructionspour WordPress 4.8:

1. Depuis votretableau debord WordPress,accédez à "Apparence -> Menus"
2. Dans l'onglet "Modifier lesmenus",sélectionnez "Lienspersonnalisés"
3. Pour l'URL,saisissez "#" (sansguillemets)
4. Pour letexte du lien,entrez letexte de votre choixpour leniveau supérieur de votremenu déroulant
5. Cliquez sur lebouton "Ajouter aumenu"
6. Faitesglisser l'élément demenujusqu'à laposition souhaitée dans votremenu
7. Pour l'élément demenu que vous venez d'ajouter,cliquez sur laflèche vers lebas à droite de l'élément (il affichera "lienpersonnalisé" àgauche de l'élément)
8. Supprimez le "#" de l'URL.Cela - danstous lesnavigateurs - convertira le lienen textebrut.
9. Cliquez sur lebouton "Enregistrer lemenu"

The easiest way to do it without a plugin or anything is to use the "Menus" function of WordPress. Here are the instructions for WordPress 4.8:

1. From your WordPress dashboard, go to "Appearance -> Menus"
2. In the "Edit Menus" tab, select "Custom Links"
3. For the URL, Enter "#" (no quotes)
4. For the link text, enter your desired text for the top level of your drop-down menu
5. Click the "Add to Menu" button
6. Drag the menu item to its desired position within your menu
7. For the menu item you just added, click the down arrow to the right of the item (it will read "custom link" to the left of the item)
8. Remove the "#" from the URL. This - in all browsers - will convert the link to plain text.
9. Click on the "Save Menu" button

Laméthode laplus simple quej'aiproposée était de créer un élément de lienpersonnalisé avec la valeur URL du lien #. Celaenvoie l'utilisateur vers un hachage vide sur lamêmepage,doncessentiellement des liensnullepart.

Cependant,l'utilisation de hachages videspour les liens d'espace réservéprésente certainseffets secondaires. Le lien apparaîtratoujourset se comportera comme un lien,de sorte qu'ilpourrait dérouter un utilisateur lorsqu'il clique sur ce qui semble être un lienmais que rienne sepasse. L'autreeffet est que cliquer sur un lien de hachage vide remplaceratout hachageexistant,envoyant l'utilisateuren haut de lapage. Cen'estpeut-êtrepas siinquiétantpour unmenu qui setrouveen haut de lapage detoutefaçon,mais c'est assez choquant lorsque lapage saute demanièreinattendue lorsque vousne vous y attendezpas,surtout s'il s'agit d'unmenu depied depage.

La solutionest de combiner laméthode de hachage vide avec unmorceau de codepour détecter quand des liens de hachage vides sont utilisés dans lemenuet pour supprimer complètement l'attribut href de ce lien. Un élément a sans attribut hrefest le méthode HTML 5 correcte 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 );
} );
 

The simplest method I came up with was to create a Custom Link item with the Link URL value of #. This is sending the user to an empty hash on the same page, so basically links nowhere.

However, there are some side-effects of using empty hashes for placeholder links. The link will still appear and behave like a link, so it could confuse a user when they are clicking on what appears to be a link but nothing happens. The other effect is that clicking on an empty hash link will override any existing hash, sending the user to the top of the page. This might not be so worrying for a menu which is at the top of the page anyway, but it is quite jarring when the page unexpectedly jumps when you are not expecting it, especially if this is for a footer menu.

The solution is to combine the empty hash method with a piece of code to detect when empty hash links are used in the menu and to remove the href attribute from that link entirely. An a element without a href attribute is the correct HTML 5 method of creating an placeholder link.

/**
 * 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 afonctionnépourmoi:

J'ai activé Classes CSS dans Menus> Options d'écran> Classes CSS Puisj'ai donné l'élément demenu queje voulais désactiver la classe ".nolink" etj'ai ajouté cemorceau de code àmonpanneau CSSpersonnalisé:

 .nolink {
   pointer-events: none;
   cursor: default;
}
 

This worked for me:

I activated CSS Classes in Menus > Screen Options > CSS Classes Then I gave the menu element that I wanted to deactivate the class ".nolink" and added this piece of code to my custom CSS panel:

.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 lienpar un élément spanpour lemenu des éléments avec lepost_name=="contact",ce queje recherchais.Vouspouvezfacilement changer celapour vérifier letitre dumenu ou l'ID,ou ajouter du codepour vérifier s'il contient des éléments demenuenfant,etc.

Using the PHP approach I added this code to 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);

This will replace the link with a span element for the item menu with the post_name == "contact", which is what I was looking for. You can easily change that to check for the menu title or the ID, or add some code to check if it has any child menu items etc.

J'apprécie que ce soit un vieuxfil de discussion,maispour unmoyen rapideet sale d'avoir un lien dans Wordpressest de créer l'URL du lien comme suit:

< #_

Notez letrait de soulignement après le hashtag.De cettefaçon,si votremenu défile vers lebas de lapage (c'est-à-dire corrigé),vousn'obtenezpas de sauten haut de lapage lorsque vous cliquez dessuset nenécessite aucunplugin/script.

Appreciate this is an old thread, but for a quick and dirty way of having a link in Wordpress is by making the link URL as:

#_

Notice the underscore after the hashtag. This way if your menu scrolls down the page (ie. fixed), you don't get a jump to the top of the page when clicking on it and doesn't require any plugins/script.

Créez l'élément demenu "Lienspersonnalisés"et ajoutez "javascript :;"(sansguillemets)pour le champ URL.C'estmieux que d'utiliser "#" carilne ferapas défiler votrepage vers le haut lorsque vous cliquez dessus.

Create "Custom Links" menu item and add "javascript:;" (without quotes) for the URL field. This is better way than using "#" because it won't scroll your page to the top when clicked.

J'ai résolu de cettefaçon: dans header.php (de votrethè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>',
 

Entermes simples,ce script vérifie si son lienparent seterminepar "#",dans ce casil ajoute un élément span autour du contenu de labalise A,qui désactive le clic.

J'espère que cela aide :-)

I solved this way: in header.php (of your theme) I searched for:

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

and replaced with:

'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>',

In simple words, this script checks if its parent link ends with "#", in this case it adds a span element around the content of the A tag, that disables the click.

Hope it helps :-)

Comme d'autres l'ont suggéréici,vouspouvez créer un élément demenu de lienpersonnalisé avec le # comme URL.Puiseffacez le # unefois qu'ilest ajouté aumenu.Etenfin,vouspouvez utiliser cette simpleexpression régulièrepour supprimer labalise réelle de ces liens.

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

As others here have suggested you can create a custom link menu item with the # as its url. Then erase the # once it is added to the menu. And finally, you can use this simple regex to strip the actual tag from those links.

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

Cela supprimera le clic (et supprimera le style de l'élément).De cettefaçon,vousn'avezpas à utiliser les # lienspersonnalisés dans votremenu.

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

This will remove the click (and unstyle the item). This way, you dont have to use the custom # links in your 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 );

Jeme rends compte queje suisen retard dans lejeu,mais ce sont les deuxméthodes quej'utilise:

1) Faites de l'élément demenuparent une copie dupremier sous-élémentet modifiez son étiquette.Parexemple,si lepremier élément sous "Produits"est "Produit 1",utilisez "Produit 1" comme élément demenuparent,puis changez son étiquetteen "Produits".De cettefaçon,les deux "Produits"et "Produit 1"mèneront à lapage Produit 1.

2) Ajoutez une redirectionpour que lapage Produits soit redirigée vers leproduit 1. L'avantage de cette optionest qu'elle vouspermet de créer unepage Produits viergepour créer une liste hiérarchique dans Pages,mais si quelqu'unessaie d'accéder àlapage Produits vierge,ils seront redirigés.

I realize I'm late in the game, but these are the two methods I use:

1) Make the parent menu item a duplicate of the first sub-item, and change its label. For example, if the first item under "Products" is "Product 1", use "Product 1" as the parent menu item, then change its label to "Products". That way, both "Products" and "Product 1" will lead to the page Product 1.

2) Add a redirect so that the Products page is redirected to Product 1. The benefit of this option is that it allows you to create a blank Products page to create a hierarchical listing in Pages, but if anyone tries to go to the blank Products page, they will be redirected.

Allez dans Apparence,puis cliquez sur lesmenus.Dans cette section,allez sous la structure dumenuet cliquez sur laflèche vers lebaspour développer lapageet vous verrez uneboîte qui dit désactiver le lien.Cochez cette caseet enregistrez.

Go to Appearance, then click on menus. In this section go under menu structure and click on the arrow down to expand the page and you'll see a box that says disable link. Check that box and save.

1. Définissez le lienpersonnalisé sur # quine renverra aucun élément de liste

2. Ajoutez cefiltre:

    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 spanpour obtenir lemême style que <a>,n'oubliezpas cursor: context-menu;.

1. Set the custom link to # which won't return anything List item

2. Add this filter:

   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. Edit span CSS to get same style as <a>, don't forget cursor: context-menu;.

En écrivant àpartir du 1/2019,la solution quiproduit lebon HTML5est defaire ce qui suit.

1. Ajoutez un lienpersonnalisé avec l'URL définie sur #et lenom de votre choix.Les deux champs sont obligatoires.
2. Modifiez le lienpersonnalisénouvellement ajouté afin que l'URL soit vide.
3. Enregistrez lesmodifications.

Celaproduira unenavigation depremierniveau quiest <a>Menu</a> quiest labonnefaçon de représenter un liennon cliquable.

Writing from 1/2019, the solution that produces proper HTML5 is to do the following.

1. Add a Custom Link with the URL set to #, and whatever name you'd like. Both fields are required.
2. Edit the newly added Custom Link so that the URL is empty.
3. Save the changes.

This will produce a top level nav that is <a>Menu</a> which is the correct way to represent a non-clickable link.

Vouspouvez désactiver les événements sur labalise <a>pourtous les éléments demenu depremierniveauen utilisant du csspur.La classe .main-menupeut avoir un autrenomen fonction de la dénomination de votremenu.

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

You may disable the events on the <a> tag for all first level menu items using pure css. .main-menu class may have another name according to your menu naming.

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

Créez unmenu de lienspersonnalisé commeindiqué.Affichez le code sourceet recherchez le href du sous-menu,parexemple: #mm-1.Collez-le dans l'URL du lienpersonnaliséet enregistrez lemenu.Celapermettra à la versionmobile defonctionner également lorsque vous appuyez sur letexte dumenu.

Create a custom link menu as other as said. View the source code and look for the href of the submenu, for example: #mm-1. Paste this into the URL of the custom link and save the menu. This will make the mobile version work as well when you tap the menu text.

Ma version ressemble à ceci:

d'abord,dans lemenu dupanneau d'administration dans le lien souhaité dans le champ hrefmettre # ou laisser vide,puis dans function.php desthèmes sont ajoutés:

 function replace_empty_menu_links( $item_output, $item, $depth, $args ) {
  if ( $item->url == '#' || $item->url == '' ) {
    $item_output = sprintf( '%1$s<' . 'div' . '%2$s>%3$s%4$s%5$s</' . 'div' . '>%6$s',
      $args->before,
      $attributes,
      $args->link_before,
      apply_filters( 'the_title', $item->title, $item->ID ),
      $args->link_after,
      $args->after
    );
  }
  return $item_output;
}
add_filter( 'walker_nav_menu_start_el', 'replace_empty_menu_links', 10, 4 );
 

Vouspouvez remplacer 'div'parn'importe quel élément qui vous convient.

Celafonctionnepour la version 5.3.2 (testé dans cette version,mais devrait égalementfonctionner dans d'autres).

Sous cetteforme,letravail detous les arguments 'before','after','link_before','link_after',etc. de wp_nav_menu()est conservé.

Celafonctionne égalementpour les sous-menus.

My version looks like this:

first, in the menu in the admin panel in the desired link in the href field put # or leave it empty, and then in function.php themes are added:

function replace_empty_menu_links( $item_output, $item, $depth, $args ) {
  if ( $item->url == '#' || $item->url == '' ) {
    $item_output = sprintf( '%1$s<' . 'div' . '%2$s>%3$s%4$s%5$s</' . 'div' . '>%6$s',
      $args->before,
      $attributes,
      $args->link_before,
      apply_filters( 'the_title', $item->title, $item->ID ),
      $args->link_after,
      $args->after
    );
  }
  return $item_output;
}
add_filter( 'walker_nav_menu_start_el', 'replace_empty_menu_links', 10, 4 );

You can replace 'div' with any element that suits you.

This works for version 5.3.2 (tested in this version, but should work in others too).

In this form, the work of all arguments 'before', 'after', 'link_before', 'link_after', etc. from wp_nav_menu() is preserved.

Also, this works for sub-menus too.

Une solutionbeaucoupplus simplepeut êtretrouvée sur une autre question:

Menu Admin - Mettezen surbrillance lemenu deniveau supérieur lorsque vous êtes sur unepage de sous-menu (sans afficher de sous-menu)

Recherchez la réponse d'Askelon.Fonctionneparfaitement,sans avoir àfaire depreg_replaces ou dejquery.

Much easier solution can be found on another question:

Admin Menu - Highlight top-level menu when on a sub-menu page (without showing sub-menu)

Look for Askelon's answer. Work's perfectly, without needing to do any preg_replaces or jquery.