Wie kann ein Menüelement der obersten Ebene keinen Link haben, aber Untermenüs, die verknüpft sind?

Ich habeeinige Ideen:

1. Setzen Sie denbenutzerdefinierten Link auf #,dernichts zurückgibt
2. Fügen Sie den Elementeneine benutzerdefinierte Klasse hinzu undentfernen Sie die Linksmit jQuery.
3. Verwenden Sieein PHP,das derjQuery-Methodeentspricht
4. Verwenden Sie das Plugin Deaktivieren des übergeordneten Menü-Links (odernehmen Siees auseinanderund schreibe deineeigenen)

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)

Dereinfachste Weg,dies ohne Plugin oder ähnliches zutun,ist die Verwendung der "Menüs" -Funktion von WordPress.Hier sind die Anweisungenfür WordPress 4.8:

1. Gehen Siein Ihrem WordPress-Dashboard zu "Darstellung -> Menüs"
2. Wählen Sie auf der Registerkarte "Menüsbearbeiten" die Option "Benutzerdefinierte Links"
3. Geben Sie als URL "#"ein (keine Anführungszeichen)
4. Geben Siefür den Linktext dengewünschten Textfür die oberste Ebene Ihres Dropdown-Menüsein.
5. Klicken Sie auf die Schaltfläche "Zum Menü hinzufügen"
6. Ziehen Sie den Menüpunkt an diegewünschte Positionin Ihrem Menü
7. Klicken Siefür dasgerade hinzugefügte Menüelement auf den Abwärtspfeil rechtsneben dem Element (linksneben dem Element wird "Benutzerdefinierter Link" angezeigt)
8. Entfernen Sie das "#" aus der URL.Dadurch wird der Linkin allen Browsernin einfachen Text konvertiert.
9. Klicken Sie auf die Schaltfläche "Menü speichern"

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

Dieeinfachste Methode,dieichmir ausgedacht habe,war das Erstelleneinesbenutzerdefinierten Linkelementsmit dem Link-URL-Wert #. Dadurch wird der Benutzer zueinem leeren Hash auf derselben Seitegesendet,sodassim Grundegenommen keine Links vorhanden sind.

Esgibt jedocheinige Nebenwirkungenbei der Verwendung leerer Hashesfür Platzhalter-Links. Der Link wird weiterhin angezeigt und verhält sich wieein Link,sodassein Benutzer verwirrt werden kann,wenner aufeinen Link klickt,abernichtspassiert. Der andere Effektist,dass durch Klicken aufeinen leeren Hash-Linkein vorhandener Hash überschrieben wird und der Benutzer an den Anfang der Seitegesendet wird. Diesistfürein Menü,das sich ohnehin oben auf der Seitebefindet,möglicherweisenicht sobesorgniserregend,aberesist ziemlichbeunruhigend,wenn die Seite unerwartet springt,wenn Sieesnichterwarten,insbesondere wennes sich umein Fußzeilenmenü handelt.

Die Lösungbesteht darin,die leere Hash-Methodemit einem Code zu kombinieren,um zuerkennen,wann leere Hash-Linksim Menü verwendet werden,und das Attribut href vollständig aus diesem Link zuentfernen. Ein a -Element ohneein href -Attributist das korrekte HTML 5-Methode zum Erstelleneines Platzhalter-Links.

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

Das hatbei mirfunktioniert:

Ich habe CSS-Klassen in Menüs> Bildschirmoptionen> CSS-Klassen aktiviert Danngabich das Menüelement an,dassich die Klasse ".nolink" deaktivieren wollte. undfügte diesen Code zumeinem benutzerdefinierten CSS-Bereich hinzu:

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

Mit dem PHP-Ansatz habeich diesen Code zufunctions.php hinzugefügt:

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

Dadurch wird der Link durchein span-Elementfür das Elementmenümit dem Postnamen=="contact"ersetzt,nach demichgesucht habe.Sie können dies leicht ändern,umnach dem Menütitel oder der ID zu suchen,odereinen Code hinzufügen,um zu überprüfen,ob untergeordnete Menüelemente usw. vorhanden sind.

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.

Schätzen Sie,dass diesein alter Threadist,aberfüreine schnelle und schmutzige Art,einen Linkin Wordpress zu haben,müssen Sie die Link-URL wiefolgtfestlegen:

#_

Beachten Sie den Unterstrichnach dem Hashtag.Auf diese Weiseerhalten Siebeim Klicken auf die Seite (dhbehoben) keinen Sprung zum oberen Rand der Seite,wenn Sie darauf klicken,undbenötigen keine Plugins/Skripte.

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.

Erstellen Sie den Menüpunkt "Benutzerdefinierte Links" undfügen Sie "Javascript:;"(ohne Anführungszeichen)für das URL-Feld.Diesistbesser als die Verwendung von "#",da Ihre Seitebeim Klickennichtnach obengescrollt wird.

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.

Ich habeesfolgendermaßengelöst: In header.php (Ihres Themas) habeichgesuchtnach:

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

undersetzt durch:

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

Ineinfachen Wortenprüft dieses Skript,ob der übergeordnete Linkmit "#"endet. In diesem Fall wird um den Inhalt des A-Tagsein span-Element hinzugefügt,das den Klick deaktiviert.

Hoffees hilft :-)

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

Wie andere hier vorgeschlagen haben,können Sieeinen benutzerdefinierten Link-Menüpunktmit dem # als URLerstellen.Löschen Sie dann das #,sobaldes dem Menü hinzugefügt wurde.Und schließlich können Sie dieseneinfachen regulären Ausdruck verwenden,um daseigentliche Tag von diesen Links zuentfernen.

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

Dadurch wird der Klickentfernt (und das Element wirdentfernt).Auf diese Weisemüssen Sie diebenutzerdefinierten # -Linksin Ihrem Menünicht verwenden.

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

Mirist klar,dassich zu spätim Spielbin,aber dies sind diebeiden Methoden,dieich verwende:

1) Machen Sie das übergeordnete Menüelement zueinem Duplikat desersten Unterelements und ändern Sie dessen Bezeichnung.Wenn daserste Element unter "Produkte"beispielsweise "Produkt 1"ist,verwenden Sie "Produkt 1" als übergeordnetes Menüelement und ändern Sie die Bezeichnungin "Produkte".Auf diese Weiseführen sowohl "Produkte" als auch "Produkt 1" zur Seite Produkt 1.

2) Fügen Sieeine Umleitung hinzu,damit die Seite "Produkte" zu Produkt 1 umgeleitet wird. Der Vorteil dieser Optionbesteht darin,dass Sieeine leere Seite "Produkte"erstellen können,umeine hierarchische Auflistungin Seiten zuerstellenAuf der leeren Seite Produkte werden sie umgeleitet.

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.

Gehen Sie zu Darstellung und klicken Sie auf Menüs.Gehen Siein diesem Abschnitt unter Menüstruktur auf den Pfeilnach unten,um die Seite zuerweitern. Daraufhin wirdein Feldmit der Aufschrift Link deaktivieren angezeigt.Aktivieren Sie dieses Kontrollkästchen und speichern Siees.

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. Setzen Sie denbenutzerdefinierten Link auf #,dernichts zurückgibt. Listenelement

2. Fügen Sie diesen Filter hinzu:

    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. Bearbeiten Sie das Span-CSS,um dengleichen Stil wie <a> zuerhalten. Vergessen Sienicht den 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;.

Wenn Sie ab 1/2019 schreiben,besteht die Lösung,die korrektes HTML5erzeugt,darin,Folgendes zutun.

1. Fügen Sieeinen benutzerdefinierten Linkmit der URL # und demgewünschten Namen hinzu.Beide Felder sinderforderlich.
2. Bearbeiten Sie denneu hinzugefügtenbenutzerdefinierten Link so,dass die URL leerist.
3. Speichern Sie die Änderungen.

Dadurch wirdein Navigationsgerät der obersten Ebeneerstellt,das <a>Menu</a>ist und die korrekte Darstellungeinesnicht anklickbaren Links darstellt.

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.

Sie können die Ereignisse auf dem <a> -Tagfür alle Menüelemente derersten Ebenemit reinem CSS deaktivieren.Die Klasse .main-menu hatmöglicherweiseeinen anderen Namen als Ihre Menübezeichnung.

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

Erstellen Sieein benutzerdefiniertes Link-Menü wie angegeben.Zeigen Sie den Quellcode an und suchen Sienach dem href des Untermenüs,zum Beispiel: #mm-1.Fügen Sie diesin die URL desbenutzerdefinierten Linksein und speichern Sie das Menü.Dadurchfunktioniert diemobile Version auch,wenn Sie auf den Menütexttippen.

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.

Meine Version siehtfolgendermaßen aus:

Geben Sie zuerstim Menüim Admin-Bereich unter demgewünschten Linkim Feld href #ein oder lassen Siees leer und dannin function.php Themen werden hinzugefügt:

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

Sie können 'div' durchjedes Elementersetzen,das zu Ihnenpasst.

Diesfunktioniertfür Version 5.3.2 (in dieser Versiongetestet,sollte aber auchin anderenfunktionieren).

In dieser Form die Arbeit aller Argumente 'before','after','link_before','link_after' usw. aus wp_nav_menu()bleibterhalten.

Diesfunktioniert auchfür Untermenüs.

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.

Eine vieleinfachere Lösungfindet sichbei einer anderen Frage:

Admin-Menü - Markieren Sie das Menü der obersten Ebene aufeiner Untermenüseite (ohne das Untermenü anzuzeigen)

Suchen Sienach Askelons Antwort.Arbeiten Sieperfekt,ohnepreg_replaces oderjquery ausführen zumüssen.

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.