it-swarm.com.de

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

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 class-Namen zuzuweisen, um ein bestimmtes Verhalten über CSS zu steuern. Wenn ich die wp_nav_menu() verwende, ist 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 id in den <li>-Tags entfernen und class so ändern, dass der Name der Seite wiedergegeben wird, 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, das aus einfachem Text besteht.

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

15
Christian

Verwenden Sie einen benutzerdefinierten Wanderer , 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 .

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

12
fuxia

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.

10
Q Studio

Wie im letzten Poster erwähnt, können Sie Ihre eigenen Klassen über Darstellung> Menüs hinzufügen, wobei in den Bildschirmoptionen CSS-Klassen angekreuzt sind. 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">
0
user2080750

Setzen Sie die Klasse <li> 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 auch das Attribut id in diesem Array deaktivieren.

0
cweiske