it-swarm-eu.dev

wp_nav_menu (), jak změnit třídu <li>?

Stavím menu pro své webové stránky. Statika vypadá takto:

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

Byl jsem schopen pochopit, jak přizpůsobit značku <ul>, abych se zbavil automatické značky <div>. Ale teď chci přizpůsobit značku <li> tak, aby bylo možné přiřadit různé jméno class ke kontrole specifického chování prostřednictvím CSS. Když používám wp_nav_menu() výstup je následující:

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

Chci se zbavit id v tagech <li> a změnit class tak, aby odrážel jméno stránky, na kterou chci odkazovat. V podstatě chci na výstupu to samé jako první fragment kódu v tomto příspěvku.

Důvodem, proč to dělám, je to, že používám vlastní obrázky, které ovládá můj CSS insted prostého textu.

Je to možné? Jakou strategii bych měl použít k překonání tohoto problému?

15
Christian

Použijte vlastní chodce , odstraňte vše, co nepotřebujete, a přidejte své třídy. Zde je chodec, který používám k získání seznamu s čistým značením: T5_Nav_Menu_Walker_Simple .

Můžete také filtrovat 'nav_menu_css_class' nebo 'wp_nav_menu_items'. Třída chodců je však podle mého názoru snazší pochopit a ovládat.

12
fuxia

jít do vzhledu> menu - vyberte menu, které chcete - přejděte na "možnosti obrazovky" v pravém horním rohu, vyberte "css třídy" - přidejte třídu do každé položky menu.

10
Q Studio

Jako poslední zmíněný plakát můžete přidávat vlastní třídy pomocí vzhledu> menu s CSS třídami zaškrtnutými v možnostech obrazovky. V chodci můžete přistupovat k tomu, co zde zadáváte:

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

Dokonce jsem to použil k tomu, abych do menu přidal předem pojmenované obrázky - trochu flakey, ale funguje to.

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

Nastavení třídy <li> na nav-link, protože to bootstrap 4.3 potřebuje:

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

Atribut id můžete v tomto poli také zrušit.

0
cweiske