wp_nav_menu (), bagaimana cara mengubah kelas <li>?

16

Saya sedang membangun menu untuk situs web saya. Statis terlihat seperti ini:

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

Saya sudah bisa memahami cara mengkustomisasi <ul>tag, untuk menghilangkan <div>tag otomatis . Tapi sekarang, saya ingin mengkustomisasi <li>tag untuk dapat menetapkan classnama yang berbeda untuk mengontrol perilaku spesifik melalui CSS. Ketika saya menggunakan wp_nav_menu()outputnya adalah sebagai berikut:

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

Saya ingin menyingkirkan iddalam <li>tag dan mengubah classuntuk mencerminkan nama halaman saya ingin link. Pada dasarnya saya ingin menampilkan hal yang sama dengan potongan kode pertama dalam posting ini.

Alasan mengapa saya melakukan ini, adalah karena saya menggunakan gambar khusus yang dikendalikan oleh CSS saya insted dari teks biasa.

Apakah ini mungkin? Strategi apa yang harus saya gunakan untuk mengatasi masalah ini?

theme-development menus navigation Kristen
sumber
Di sini Anda dapat menambahkan kelas yang berbeda di ul> li> a sdtuts.com/wordpress-add-custom-class-in-wp_nav_menu-links
Rameez SOOMRO

Jawaban:

14

Gunakan walker khusus , hapus apa pun yang tidak Anda butuhkan dan tambahkan kelas Anda. Berikut adalah alat bantu yang saya gunakan untuk mendapatkan daftar dengan markup bersih: T5_Nav_Menu_Walker_Simple .

Anda juga dapat memfilter 'nav_menu_css_class'atau 'wp_nav_menu_items'. Tapi kelas walker lebih mudah dimengerti dan dikontrol menurut saya.

fuxia
sumber
Terima kasih Toscho, saya hanya menemukan bahwa dalam versi baru Wordpress (3.3) kita dapat menambahkan kelas fir kustom setiap item menu yang jenis menyelesaikan masalah saya. Saya mencoba skrip yang Anda sarankan kepada saya (T5_Nav_Menu_Walker_Simple) yang menghapus segala sesuatu dari <li>, bagaimana kita dapat mengontrol elemen mana yang ingin kita simpan?
Christian
1
@Christian Anda dapat mengganti walker sesuai kebutuhan, itu hanya contoh yang sangat mendasar. Untuk melihat informasi mana yang tersedia, tambahkan print_r( $item, TRUE )masing-masing li. Kemudian putuskan apa yang harus dilakukan dengannya. :)
fuxia
Ini menunjuk saya ke arah yang benar, apa yang saya butuhkan adalah wp_nav_menu , tetapi saya perlu mengubah parameter 'container_class', untuk bekerja pada use case khusus saya, di mana saya dalam kondisi tertentu menukar menu utama untuk yang lain, tetapi membutuhkan kelas agar konsisten untuk css.
D. Dan
10

pergi ke tampilan> menu - pilih menu yang Anda inginkan - pergi ke "opsi layar" di kanan atas, pilih "kelas css" - tambahkan kelas ke setiap item menu ..

Q Studio
sumber
1

Mengatur <li>kelas ke nav-link, seperti bootstrap 4.3 membutuhkannya:

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

Anda juga dapat menghapus idatribut di array itu.

cweiske
sumber
0

Seperti poster terakhir yang disebutkan, Anda dapat menambahkan kelas Anda sendiri melalui tampilan> menu dengan kelas CSS dicentang di opsi layar. Di walker, Anda dapat mengakses apa yang Anda masukkan di sana melalui:

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

Saya bahkan telah menggunakan ini untuk menambahkan gambar yang sudah ditentukan sebelumnya dalam menu - sedikit flakey, tetapi berfungsi.

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