Wie kann man festlegen, dass ein Menüelement der obersten Ebene keine Verknüpfung hat, aber dass Untermenüs verknüpft sind?

Ich erstelle ein horizontales Menü und einige Einträge in diesem Menü enthalten Dropdown-Menüs (Untermenüs), andere nicht. Diejenigen, die Untermenüs haben, sind eigentlich keine Seiten. Sie sind nur als Leitfaden für die Dropdowns gedacht.

Angenommen, das horizontale Menü sieht folgendermaßen aus:

Startseite | Über uns | Produkte | Anfahrt | Kontakt

Und das "Produkte" -Li-Element soll 3 Seiten haben, die in einer vertikalen Dropdown-Liste darunter verlinkt sind, sodass "Produkte" selbst keine Seite darstellt. Wie kann ich das in WP tun?

(Ich verwende WP als CMS mit statischen Startseiten und Innenseiten. Ich erstelle meine eigenen Vorlagen, gestalte die Menüs in CSS, registriere die Menüs in functions.php und rufe sie in den Vorlagen auf.) In WP fügen Sie Einträge hinzu die Menüs über die Liste der Seiten oder über die benutzerdefinierten Links. Aber ich möchte nicht, dass "Produkte" verknüpft werden. Wenn ich dem benutzerdefinierten Link keinen Link hinzufüge, kann ich ihn nicht zum Menü hinzufügen.

Ist dies über den Menüadministrator möglich oder muss ich anders vorgehen?

Vielen Dank für jede Hilfe!

Ich habe ein paar Ideen:

1. Legen Sie den benutzerdefinierten Link fest, zu #dem nichts zurückgegeben werden soll
2. Fügen Sie den Elementen eine benutzerdefinierte Klasse hinzu und entfernen Sie die Links mit jQuery.
3. Verwenden Sie ein PHP-Äquivalent zur jQuery-Methode
4. Benutze das Disable Parent Menu Link Plugin (oder zerlege es und schreibe dein eigenes)

Der einfachste Weg, ohne Plugin oder ähnliches vorzugehen, ist die Verwendung der "Menus" -Funktion von WordPress. Hier sind die Anweisungen für WordPress 4.8:

1. Gehen Sie in Ihrem WordPress-Dashboard zu "Darstellung -> Menüs".
2. Wählen Sie auf der Registerkarte "Menüs bearbeiten" die Option "Benutzerdefinierte Links".
3. Geben Sie für die URL "#" ein (keine Anführungszeichen)
4. Geben Sie für den Linktext den gewünschten Text für die oberste Ebene Ihres Dropdown-Menüs ein
5. Klicken Sie auf die Schaltfläche "Zum Menü hinzufügen"
6. Ziehen Sie den Menüpunkt an die gewünschte Position in Ihrem Menü
7. Klicken Sie für das gerade hinzugefügte Menüelement auf den Abwärtspfeil rechts neben dem Element (links neben dem Element wird "Benutzerdefinierter Link" angezeigt).
8. Entfernen Sie das "#" aus der URL. Dadurch wird der Link in allen Browsern in einfachen Text umgewandelt.
9. Klicken Sie auf die Schaltfläche "Menü speichern"

Die einfachste Methode, die ich mir ausgedacht habe, war das Erstellen eines benutzerdefinierten Link-Elements mit dem Link-URL-Wert von #. Dies schickt den Benutzer zu einem leeren Hash auf derselben Seite, so dass im Grunde genommen nirgendwo verlinkt wird.

Es gibt jedoch einige Nebenwirkungen, wenn leere Hashes für Platzhalterlinks verwendet werden. Der Link wird weiterhin angezeigt und verhält sich wie ein Link. Dies könnte einen Benutzer verwirren, wenn er auf einen scheinbaren Link klickt, aber nichts passiert. Der andere Effekt ist, dass ein Klick auf einen leeren Hash-Link einen bestehenden Hash überschreibt und den Benutzer an den oberen Rand der Seite schickt. Dies ist für ein Menü, das sich ohnehin oben auf der Seite befindet, möglicherweise nicht so besorgniserregend, aber es ist ziemlich beunruhigend, wenn die Seite unerwartet springt, wenn Sie es nicht erwarten, insbesondere wenn es sich um ein Fußzeilenmenü handelt.

Die Lösung besteht darin, die leere Hash-Methode mit einem Teil des Codes zu kombinieren, um zu erkennen, wann leere Hash-Links im Menü verwendet werden, und das hrefAttribut vollständig von diesem Link zu entfernen . Ein aElement ohne hrefAttribut ist die richtige HTML 5-Methode zum Erstellen eines Platzhalterlinks.

/**
 * 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 hat bei mir funktioniert:

Ich habe CSS-Klassen in Menüs> Bildschirmoptionen> CSS-Klassen aktiviert. Dann habe ich das Menüelement angegeben, mit dem ich die Klasse ".nolink" deaktivieren wollte, und meinem benutzerdefinierten CSS-Bereich diesen Code hinzugefügt:

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

Unter Verwendung des PHP-Ansatzes habe ich die Datei functions.php um folgenden Code erweitert:

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 durch ein span-Element für das Elementmenü mit dem post_name == "contact" ersetzt, nach dem ich gesucht habe. Sie können dies einfach ändern, um nach dem Menütitel oder der ID zu suchen, oder einen Code hinzufügen, um zu überprüfen, ob untergeordnete Menüelemente usw. vorhanden sind.

Ich habe es so gelöst: in header.php (von deinem Theme) habe ich gesucht nach:

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

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

In einfachen Worten, dieses Skript prüft, ob sein übergeordneter Link mit "#" endet. In diesem Fall fügt es ein span-Element um den Inhalt des A-Tags hinzu, das den Klick deaktiviert.

Ich hoffe es hilft :-)

Wie andere hier vorgeschlagen haben, können Sie ein benutzerdefiniertes Link-Menüelement mit dem # als URL erstellen. Löschen Sie dann das #, sobald es dem Menü hinzugefügt wurde. Und schließlich können Sie diesen einfachen regulären Ausdruck verwenden, um das eigentliche Tag von diesen Links zu entfernen.

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

Dadurch wird das Klicken entfernt (und der Stil des Elements aufgehoben). Auf diese Weise müssen Sie die benutzerdefinierten # Links in 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 );

Schätzen Sie, dass dies ein alter Thread ist, aber für eine schnelle und unsaubere Art, einen Link in Wordpress zu haben, müssen Sie die Link-URL wie folgt festlegen:

#_

Beachten Sie den Unterstrich nach dem Hashtag. Auf diese Weise erhalten Sie keinen Sprung zum oberen Seitenrand, wenn Sie in Ihrem Menü die Seite nach unten scrollen (dh fixiert) und benötigen keine Plugins / Skripte.

Mir ist klar, dass ich zu spät im Spiel bin, aber dies sind die beiden Methoden, die ich benutze:

1) Machen Sie das übergeordnete Menüelement zu einem Duplikat des ersten Unterelements und ändern Sie dessen Bezeichnung. Wenn das erste Element unter "Produkte" beispielsweise "Produkt 1" ist, verwenden Sie "Produkt 1" als übergeordnetes Menüelement und ändern Sie die Bezeichnung in "Produkte". Auf diese Weise führen sowohl "Produkte" als auch "Produkt 1" zur Seite Produkt 1.

2) Fügen Sie eine Umleitung hinzu, sodass die Produktseite zu Produkt 1 umgeleitet wird. Der Vorteil dieser Option besteht darin, dass Sie eine leere Produktseite erstellen können, um eine hierarchische Auflistung in Seiten zu erstellen, wenn jedoch jemand versucht, zu den leeren Produkten zu wechseln Seite, werden sie umgeleitet.

Gehen Sie zu Darstellung und klicken Sie dann auf Menüs. Gehen Sie in diesem Abschnitt in die Menüstruktur und klicken Sie auf den Pfeil nach unten, um die Seite zu erweitern. Daraufhin wird ein Feld mit der Aufschrift "Link deaktivieren" angezeigt. Aktivieren Sie dieses Kontrollkästchen und speichern Sie.

1. Setzen Sie den benutzerdefinierten Link auf #, damit kein Listenelement zurückgegeben wird

2. Diesen Filter hinzufügen:

   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 span CSS, um den gleichen Stil wie zu erhalten <a>, vergessen Sie nicht cursor: context-menu;.

Erstellen Sie den Menüpunkt "Benutzerdefinierte Links" und fügen Sie "javascript :;" hinzu. (ohne Anführungszeichen) für das URL-Feld. Dies ist besser als die Verwendung von "#", da Ihre Seite beim Klicken nicht nach oben gescrollt wird.

Ab 1/2019 besteht die Lösung, die richtiges HTML5 erzeugt, darin, Folgendes zu tun.

1. Fügen Sie einen benutzerdefinierten Link mit der URL # und dem gewünschten Namen hinzu. Beide Felder müssen ausgefüllt werden.
2. Bearbeiten Sie den neu hinzugefügten benutzerdefinierten Link, sodass die URL leer ist.
3. Speichern Sie die Änderungen.

Dadurch wird ein Navigationssystem der obersten Ebene erstellt, mit <a>Menu</a>dem ein nicht klickbarer Link korrekt dargestellt wird.

Sie können die Ereignisse auf dem <a>Tag für alle Menüelemente der ersten Ebene mit reinem CSS deaktivieren . .main-menuKlasse kann einen anderen Namen entsprechend Ihrer Menübenennung haben.

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

Eine viel einfachere Lösung findet sich bei einer anderen Frage:

Admin-Menü - Markiert das Hauptmenü auf einer Untermenüseite (ohne Untermenü anzuzeigen)

Suchen Sie nach Askelons Antwort. Funktioniert einwandfrei, ohne preg_replaces oder jquery ausführen zu müssen.