Haloo gaes, pada tutorial kali ini kita akan menambahkan class list tag (<li>) pada WP Nav Menu.
Oke aku beri penjelasan supaya jangan asal copy saja tanpa dipahami kebutuhan coding kalian.
Untuk memodifikasi class pada list tag kita akan menggunakan filter nav_menu_css_class. Class modifikasi akan kita push ke array $classes menggunakan metode square bracket ( $classes[] )
Berbeda class pada lokasi menu yang berbeda
Pada baris 7 aku memberikan kondisional jika lokasi menu “menu-footer” maka menggunakan class “list-inline-item”. Selain itu menggunakan class “nav-item”
Jadi sesuaikan dengan kebutuhan kalian. Jika hanya menggunakan 1 menu saja, hilang kondisional if tersebut.
Class pada menu yang aktif
Nah ini pada baris 14 adalah kondisional jika ada class “current-menu-item” artinya menu yang dibuka sedang aktif. Nah biasanya pada menu yang aktif kita akan tambahkan class “active” sesuai dengan styling css yang kita buat.
Menambahkan Class pada Link Tag <a>
Nah kalau ini untuk menambahkan class pada tag link <a href=”#”> pada menu.
function tambah_class_pada_link($classes, $item) { // Tambah class $classes['class'] = 'nav-link'; // Tambah class 'active' jika page sedang aktif if (in_array('current_page_item', $item->classes)) { $classes['class'] = 'nav-link active'; } return $classes; } add_filter('nav_menu_link_attributes', 'tambah_class_pada_link', 10, 2);
Nah sekian tutorialnya, jika kalian ada pertanyaan atau masukan tulis pada kolom komentar. terima kasih. selamat mencoba. 🙂