wp_nav_menu (), <li> sınıfı nasıl değiştirilir?

Web sitem için bir menü hazırlıyorum. Statik şöyle görünür:

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

<ul>Otomatik <div>etiketten kurtulmak için etiketi nasıl özelleştireceğinizi anlayabildim . Ancak şimdi, CSS aracılığıyla belirli davranışları kontrol etmek için <li>farklı bir classad atayabilmek için etiketi özelleştirmek istiyorum . Ben kullandığımda wp_nav_menu()çıktı aşağıdaki gibidir:

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

Ben kurtulmak istiyorum idiçinde <li>etiketleri ve değişim classben bağlantısını istediğiniz sayfanın adını yansıtacak şekilde. Temelde ben bu yazı kod 1. snippet ile aynı şeyi çıktı istiyorum.

Bunu yapmamın sebebi, düz metinli CSS'm tarafından kontrol edilen özel görüntüler kullanmam.

Mümkün mü? Bu sorunun üstesinden gelmek için hangi stratejiyi kullanmalıyım?

Özel bir yürüteç kullanın , ihtiyacınız olmayan her şeyi kaldırın ve sınıflarınızı ekleyin. İşte temiz biçimlendirme ile bir liste almak için kullandığım bir yürüteç: T5_Nav_Menu_Walker_Simple .

Ayrıca filtre 'nav_menu_css_class'veya 'wp_nav_menu_items'. Ama yürüteç sınıfını anlamak ve kontrol etmek daha kolay.

görünüm> menülere gidin - istediğiniz menüyü seçin - sağ üstteki "ekran seçenekleri" ne gidin, "css sınıfları" nı seçin - her menü öğesine bir sınıf ekleyin.

Ayar <li>için sınıfnav-link bootstrap 4.3 için gerekli olduğu şekilde :

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

Bu iddizideki özniteliğin ayarını da kaldırabilirsiniz .

Bahsedilen son poster olarak, ekran seçeneklerinde işaretli CSS sınıflarıyla görünüm> menüler aracılığıyla kendi sınıflarınızı ekleyebilirsiniz . Yürüteçte, oraya girdiğiniz şeye erişebilirsiniz:

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

Bunu menüde önceden adlandırılmış görüntüler eklemek için bile kullandım - biraz pul pul, ama işe yarıyor.

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