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

25

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!

PVA
quelle
1
Hier ist, dass die Lösung großartig funktioniert. Überprüfen Sie sie auf wordpress.org/support/topic/no-page-menu-item
Sie können dies mit js tun. Versuchen Sie diesen Artikel. kvcodes.com/2014/07/…
Kvvaradha
Lassen Sie das Feld URL leer.
Amy Wang
Niemand erwähnte die WP_NAV_MENU_WALKER-Klasse, Sie könnten Ihren eigenen Wanderer schreiben, der ausspuckt, was Sie wollen.
user3135691

Antworten:

12

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)
Brooke.
quelle
Vielen Dank für die Tipps und Links! Wie Gavin vorschlug, funktioniert die Verwendung eines # für einen benutzerdefinierten Link. Die anderen Optionen funktionieren möglicherweise besser, sind jedoch nicht so einfach. Nun, das Plugin ist wahrscheinlich einfach, aber ich hasse es, Plugins zu verwenden, wenn ich das Gleiche direkter erreichen kann. Ich muss mich für den besten Ansatz entscheiden. Danke noch einmal!
PVA
Wenn Sie es verwenden in taktile Geräte planen, seien Sie vorsichtig bei der Verwendung von leeren , href=""weil die meisten taktilen Gerätebenutzer nicht in der Lage sein , Drop - Down - Menü zu sehen , ohne JS mit
Simon
Links brechen. Vielleicht möchten Sie einige dieser Ideen in Ihre Antwort
einfließen lassen
Auch # 2 und # 3 bezieht sich auf wp_list_pages()nichtwp_nav_menu()
Shea
25

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"
GavinR
quelle
Danke für diesen Tipp. Es ist ez, obwohl es nicht perfekt ist, dass die Labels beim Mouseover immer noch wie "Links" aussehen, aber sie gehen nirgendwo hin. So kann es zur Not funktionieren.
PVA
1
Hast du den ganzen Kommentar gelesen? Klicken Sie nach dem Hinzufügen des Links auf den Dropdown-Pfeil neben dem Namen des Links und entfernen Sie das "#" aus dem URL-Textfeld. Dies führt in allen Browsern dazu, dass der Link nicht anklickbar ist.
GavinR
1
Ja, danke, ich habe den ganzen Kommentar gelesen. Ich ging zurück und versuchte es erneut und erkannte mein Problem. Wenn ich das # verlasse, erscheint das Wort in der Navigationsleiste, aber als "toter Link". Wenn ich das # entferne, erscheint das Wort nicht in der Navigationsleiste, es sei denn, ich schwebe darüber und es erscheint in einem Schwebezustand. Ich gehe also davon aus, dass ich CSS auf das Wort anwenden muss, damit es ohne Verknüpfung angezeigt wird. Ich bin nicht sicher, warum der Schwebezustand angezeigt wird ...
PVA
Dies ist immer noch in 4.9.5, ich bin mir jedoch nicht sicher, da es sich wie ein Hack-Tacking-Vorteil eines Fehlers anfühlt. Wenn nicht, wird es den Leuten viel Kopfzerbrechen ersparen. Dies ist so ähnlich wie die Tatsache, dass Wordpress "1 2 3 4 5 6" als sicheres Passwort betrachtet.
Brooklynsweb
Wenn Sie Schritt 8 ausführen (aus welchem ​​Grund auch immer), ist Ihr Cursor kein Zeiger, wenn Sie den Mauszeiger über den benutzerdefinierten Link bewegen. In diesem Fall können Sie es mit pointer: cursor formatieren.
MarsAndBack
7

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 );
} );
shea
quelle
2

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;
}
RickyBono
quelle
Dies tötet auch Dropdown.
user385917
Die Verwendung #als Link - Ziel und dann eine benutzerdefinierte CSS - Klasse für das Styling Zwecke angewendet wird , ist die am wenigsten hacky Lösung meiner Meinung nach . Das Einstellen pointer-events: nonemacht für mich jedoch wenig Sinn, da es die Untermenüs sprengt. Können Sie erläutern, warum Sie dieses Attribut festgelegt haben?
User1438038
1

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.

Sam Bull
quelle
0

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

niente0
quelle
Hallo, ich weiß, dass dies eine alte Antwort ist, aber zum späteren Nachschlagen würde ich nicht einfach in die Header-Datei Ihres Themes gehen und sie ändern, da bei der nächsten Aktualisierung der gesamte Code überschrieben wird. Die beste Lösung dafür ist, ein untergeordnetes Thema mit Ihrem benutzerdefinierten Code zu erstellen.
Scott
0

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);
Deweydb
quelle
0

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 );
Doug Cassidy
quelle
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.

user1249523
quelle
0

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.

Barry
quelle
0

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.

rauben
quelle
Diese Funktionalität wird vom Core nicht bereitgestellt. Vielleicht fügt ein Theme oder Plugin es Ihrem Setup hinzu?
Dave Romsey
Ich habe das auch schon mal gesehen, ich wünschte, ich wüsste, welches Plugin oder Thema das getan hat.
DavGarcia
0
  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;.

Ruhehallag
quelle
0

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.

Tahi Reu
quelle
0

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.

DavGarcia
quelle
0

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;
}
Karl Adler
quelle