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!
Antworten:
Ich habe ein paar Ideen:
#
dem nichts zurückgegeben werden sollquelle
href=""
weil die meisten taktilen Gerätebenutzer nicht in der Lage sein , Drop - Down - Menü zu sehen , ohne JS mitwp_list_pages()
nichtwp_nav_menu()
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:
quelle
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
href
Attribut vollständig von diesem Link zu entfernen . Eina
Element ohnehref
Attribut ist die richtige HTML 5-Methode zum Erstellen eines Platzhalterlinks.quelle
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:
quelle
#
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 Einstellenpointer-events: none
macht für mich jedoch wenig Sinn, da es die Untermenüs sprengt. Können Sie erläutern, warum Sie dieses Attribut festgelegt haben?Unter Verwendung des PHP-Ansatzes habe ich die Datei functions.php um folgenden Code erweitert:
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.
quelle
Ich habe es so gelöst: in header.php (von deinem Theme) habe ich gesucht nach:
und ersetzt durch:
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 :-)
quelle
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.
quelle
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.
quelle
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.
quelle
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.
quelle
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.
quelle
Diesen Filter hinzufügen:
Bearbeiten Sie span CSS, um den gleichen Stil wie zu erhalten
<a>
, vergessen Sie nichtcursor: context-menu;
.quelle
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.
quelle
Ab 1/2019 besteht die Lösung, die richtiges HTML5 erzeugt, darin, Folgendes zu tun.
Dadurch wird ein Navigationssystem der obersten Ebene erstellt, mit
<a>Menu</a>
dem ein nicht klickbarer Link korrekt dargestellt wird.quelle
Sie können die Ereignisse auf dem
<a>
Tag für alle Menüelemente der ersten Ebene mit reinem CSS deaktivieren ..main-menu
Klasse kann einen anderen Namen entsprechend Ihrer Menübenennung haben.quelle
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.
quelle