it-swarm.com.de

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 der Artikel "Produkte" 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 der functions.php und rufe sie in den Vorlagen auf.) In WP fügen Sie Einträge zu den Menüs über die Liste der Seiten oder über die benutzerdefinierten Links hinzu. 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!

24
PVA

Ich habe ein paar Ideen:

  1. Stellen Sie den benutzerdefinierten Link auf # ein, der nichts zurückgibt
  2. Fügen Sie eine benutzerdefinierte Klasse zu den Elementen hinzu und verwenden Sie dann jQuery, um die Links zu entfernen.
  3. Verwenden Sie ein PHP, das der jQuery-Methode entspricht
  4. Benutze das Disable Parent Menu Link Plugin (oder zerlege es und schreib dein eigenes)
12
Brooke.

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"
22
GavinR

Die einfachste Methode, die ich mir ausgedacht habe, war das Erstellen eines benutzerdefinierten Link-Elements mit dem Link-URL-Wert #. 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 Attribut href vollständig von diesem Link zu entfernen. Ein a-Element ohne ein href-Attribut ist die korrekte HTML 5-Methode zum Erstellen eines 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
 */
function wpse_remove_empty_links( $menu ) {
    return str_replace( '<a href="#">', '<a>', $menu );
}

add_filter( 'wp_nav_menu_items', 'wpse_remove_empty_links' );
6
shea

Das hat bei mir funktioniert:

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

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

Unter Verwendung des PHP-Ansatzes habe ich functions.php diesen Code 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 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 Code hinzufügen, um zu überprüfen, ob untergeordnete Menüelemente usw. vorhanden sind.

1
Sam Bull

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.

0
user1249523

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 mit dem Namen <a>Menu</a> erstellt, mit dem ein nicht klickbarer Link korrekt dargestellt wird.

0
DavGarcia
  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 <a> zu erhalten. Vergessen Sie cursor: context-menu; nicht.

0
calmohallag

Erstelle "Benutzerdefinierte Links" und füge "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.

0
Tahi Reu

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

0
niente0

Sie können die Ereignisse auf dem Tag <a> für alle Menüelemente der ersten Ebene mit pure css deaktivieren. Die Klasse .main-menu hat möglicherweise einen anderen Namen, der Ihrer Menübezeichnung entspricht.

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

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

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

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, die leeren Produkte aufzurufen Seite, werden sie umgeleitet.

0
Barry

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.

0
Rob