wp_nav_menu (), wie ändere ich die <li> Klasse?

16

Ich erstelle ein Menü für meine Website. Die Statik sieht folgendermaßen aus:

<nav>
  <ul id="menu">
        <li class="item_1"><a href="#">Item 1</a></li>
        <li class="item_2"><a href="#">Item 2</a></li>
        <li class="item_3"><a href="#">Item 3</a></li>
        <li class="item_4"><a href="#">Item 4</a></li>
        <li class="item_5"><a href="#">Item 5</a></li>
        <li class="item_6"><a href="#">Item 6</a></li>
        <li class="item_7"><a href="#">Item 7</a></li>
        <li class="item_8"><a href="#">Item 8</a></li>
    </ul>

Ich habe verstanden, wie man das <ul>Tag anpasst, um das automatische <div>Tag loszuwerden . Aber jetzt möchte ich das <li>Tag anpassen , um in der Lage zu sein, einen anderen classNamen zuzuweisen , um ein bestimmtes Verhalten über CSS zu steuern. Wenn ich das verwende ist wp_nav_menu()die Ausgabe wie folgt:

    <ul id="menu">
<li id="menu-item-111" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-111"><a href="http://mydomain.com/dummy/fashion/">Fashion</a></li>
    <li id="menu-item-112" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-112"><a href="http://mydomain.comdummy/documentary/">Documentary</a></li>
    <li id="menu-item-113" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-113"><a href="http://mydomain.com/dummy/events/">Events</a></li>
    <li id="menu-item-114" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-114"><a href="http://mydomain.com/dummy/portraits/">Portraits</a></li>
    </ul>

Ich möchte das idin den <li>Umbauten loswerden und das ändern class, um den Namen der Seite zu reflektieren, auf die ich verlinken möchte. Grundsätzlich möchte ich das Gleiche ausgeben wie das erste Codefragment in diesem Beitrag.

Der Grund, warum ich das tue, ist, dass ich benutzerdefinierte Bilder verwende, die von meinem CSS gesteuert werden und aus einfachem Text bestehen.

Ist das möglich? Welche Strategie sollte ich verwenden, um dieses Problem zu überwinden?

theme-development menus navigation Christian
quelle
Hier können Sie verschiedene Klasse in ul> li hinzufügen> a sdtuts.com/wordpress-add-custom-class-in-wp_nav_menu-links
Rameez Soomro

Antworten:

14

Verwenden Sie einen benutzerdefinierten Walker , entfernen Sie alles, was Sie nicht benötigen, und fügen Sie Ihre Klassen hinzu. Hier ist ein Walker, den ich verwende, um eine Liste mit sauberem Markup zu erhalten: T5_Nav_Menu_Walker_Simple .

Ihr könntet auch filtern 'nav_menu_css_class'oder 'wp_nav_menu_items'. Aber eine Gehklasse ist meiner Meinung nach leichter zu verstehen und zu kontrollieren.

fuxia
quelle
Danke Toscho, ich finde gerade, dass wir in der neuen Version von Wordpress (3.3) für jeden Menüpunkt, der mein Problem löst, eine eigene Klasse hinzufügen können. Ich habe das Skript ausprobiert, das Sie mir vorgeschlagen haben (T5_Nav_Menu_Walker_Simple), das alles von dem entfernt <li>. Wie können wir steuern, welche Elemente wir behalten möchten?
Christian
1
@Christian Sie können die Gehhilfe nach Bedarf ändern. Dies ist nur ein einfaches Beispiel. Fügen Sie print_r( $item, TRUE )jedem ein hinzu, um zu sehen, welche Informationen verfügbar sind li. Dann entscheide, was du damit machen willst. :)
fuxia
Dies wies mich in die richtige Richtung, was ich brauchte, war das wp_nav_menu , aber ich musste den 'container_class'-Parameter ändern, um für meinen speziellen Anwendungsfall zu funktionieren, in dem ich unter bestimmten Bedingungen das Hauptmenü gegen ein anderes austauschte, aber das benötigte Klassen für CSS konsistent sein.
D. Dan
10

Gehen Sie zu Darstellung> Menüs. Wählen Sie das gewünschte Menü. Gehen Sie zu "Bildschirmoptionen" oben rechts. Wählen Sie "CSS-Klassen". Fügen Sie jedem Menüelement eine Klasse hinzu.

Q Studio
quelle
1

Setzen Sie die <li>Klasse auf nav-link, da Bootstrap 4.3 dies benötigt:

function add_menu_link_class($atts, $item, $args)
{
    $atts['class'] = 'nav-link';
    return $atts;
}
add_filter('nav_menu_link_attributes', 'add_menu_link_class', 1, 3);

Sie können das idAttribut in diesem Array auch deaktivieren .

Cweiske
quelle
0

Wie im letzten Poster erwähnt, können Sie Ihre eigenen Klassen über Erscheinung> Menüs mit in den Bildschirmoptionen angekreuzten CSS-Klassen hinzufügen . Im Walker können Sie auf das zugreifen, was Sie dort eingeben:

$item_output .= '<a'. $attributes .' class="'. $item->classes[0].'">';

Ich habe dies sogar verwendet, um vorbenannte Bilder in das Menü einzufügen - ein kleiner Flakey, aber es funktioniert.

<img src="theme/images/navigation/'.$item->classes[0].'" width="48" height="48">
user2080750
quelle