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

Question

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

17

70949 2011-12-26

Icherstelleein Menüfürmeine Website. Die Statik siehtfolgendermaß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 konnte verstehen,wie das <ul> -Tag angepasst wird,um das automatische <div> -Tag zuentfernen. Aberjetztmöchteich das <li> -Tag anpassen,um verschiedene class -Namen zuweisen zu können,um das spezifische Verhalten über CSS zu steuern. Wennich das wp_nav_menu() verwende,lautet die Ausgabe wiefolgt:

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

Ichmöchte die idin den <li> -Tagsentfernen und die class ändern,um den Namen der Seite wiederzugeben Ichmöchte verlinken. Grundsätzlichmöchteich dasselbe ausgeben wie daserste Codeausschnittin diesem Beitrag.

Der Grund,warumich diestue,ist,dassichbenutzerdefinierte Bilder verwende,die vonmeinem CSSgesteuert werden,das auseinfachem Textbesteht.

Ist dasmöglich? Welche Strategie sollteich verwenden,um dieses Problem zu überwinden?

I'm building a menu for my website. The static is looking like this:

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

I've been able to understand how to customized the <ul> tag, to get rid of the automatic <div> tag. But now, I want to customized the <li> tag to be able to assign different class name to control specific behavior through CSS. When I use the wp_nav_menu() the output is as follow:

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

I want to get rid of the id in the <li> tags and change the class to reflect the name of the page I want to link to. Basically I want to output the the same thing as the 1st snippet of code in this post.

The reason why I doing this, is that I use custom images that is controled by my CSS insted of plain text.

Is this possible? What strategy I should use to overcome this problem?

- Hier können Sie verschiedene Klassenin ul> li> a hinzufügen https://sdtuts.com/wordpress-add-custom-class-in-wp_nav_menu-links/
  
  Here you can add different class in ul > li >a https://sdtuts.com/wordpress-add-custom-class-in-wp_nav_menu-links/
  - 0
  - 2018-06-09
  - Rameez SOOMRO

4 Antworten

Stimmen

0
2011-12-26
Christian

fuxia · Accepted Answer · 2011-12-26

15

2011-12-26

Verwenden Sieeinen benutzerdefinierten Walker ,entfernen Sie alles,was Sienichtbenötigen,undfüge deine Klassen hinzu.Hieristein Walker,mit demicheine Listemit sauberem Markuperhalte: T5_Nav_Menu_Walker_Simple .

Sie können auch 'nav_menu_css_class' oder 'wp_nav_menu_items'filtern.Abereine Walker-Klasseistmeiner Meinungnach leichter zu verstehen und zu kontrollieren.

Quelle
fuxia

Dank Toschofindeichnur,dass wirin derneuen Version von Wordpress (3.3)jedem Menüpunkteine benutzerdefinierte Klasse hinzufügen können,diemein Problemirgendwie löst.Ich habe das Skript ausprobiert,das Siemir vorgeschlagen haben (T5_Nav_Menu_Walker_Simple),das alles aus dem `
`entfernt. Wie können wir steuern,welche Elemente wirbehaltenmöchten?