() translation by (you can also view the original English article)
Mengelola CSS itu sulit, terutama dalam proyek-proyek besar yang bekerja dengan tim. Konvensi penamaan dapat membantu CSS Anda menjadi lebih mudah dibaca dan lebih mudah dikelola. Dalam kiat singkat ini, kita akan melihat cara menggunakan metodologi penamaan BEM (Block Element Modifier) di WordPress.
Sistem manajemen konten seperti output default classes WordPress di marka front-end. Di WordPress ada banyak filter untuk memodifikasi outputted classes ini.
Jika Anda ingin terjun langsung ke code, di sini adalah contoh tema saya; filter dapat ditemukan di file inc/functions-filters.php.
Apa itu BEM?
BEM adalah singkatan dari Block Element Modifier.
“BEM adalah metodologi yang membantu Anda membuat komponen yang dapat digunakan kembali dan berbagi code dalam pengembangan front-end.”
Saya akan menggunakan markup navigasi sebagai contoh:
- Block adalah entitas standalone yang memiliki arti tersendiri.
.menu { ... }- Element adalah bagian dari block dan secara semantik terikat pada bloknya.
.menu__items { ... }.menu__item { ... }.menu__anchor { ... }- Modifier mengubah tampilan atau perilaku block atau element.
.menu -- primary {...}.menu__anchor--button { ... }
Markup navigasi penuh mungkin terlihat seperti ini:
1 |
<nav class="menu menu--primary"> |
2 |
<ul class="menu__items menu__items--primary"> |
3 |
<li class="menu__item"><a class="menu__anchor">Link text</a></li> |
4 |
<li class="menu__item"><a class="menu__anchor">Link text</a></li> |
5 |
<li class="menu__item"><a class="menu__anchor">Link text</a></li> |
6 |
<li class="menu__item"><a class="menu__anchor menu__anchor--button">Link text</a></li> |
7 |
</ul>
|
8 |
</nav>
|
Konvensi penamaan seperti BEM membuat SASS dan CSS flat Anda dengan spesifisitas rendah (yang selalu bagus!).
Di SASS Anda memberi gaya contoh kami seperti ini:
1 |
.menu { |
2 |
...
|
3 |
|
4 |
&__items { |
5 |
...
|
6 |
}
|
7 |
|
8 |
&__item { |
9 |
...
|
10 |
}
|
11 |
|
12 |
&__anchor { |
13 |
...
|
14 |
}
|
15 |
|
16 |
&__anchor--button { |
17 |
...
|
18 |
}
|
19 |
}
|
CSS yang dikompilasi akan terlihat seperti ini:
1 |
.menu { |
2 |
...
|
3 |
}
|
4 |
|
5 |
menu__items { |
6 |
…
|
7 |
}
|
8 |
|
9 |
menu__item { |
10 |
…
|
11 |
}
|
12 |
|
13 |
menu__anchor { |
14 |
…
|
15 |
}
|
16 |
|
17 |
menu__anchor--button { |
18 |
…
|
19 |
}
|
Tapi bagaimana kita bisa mengubah kelas navigasi yang digunakan di WordPress?
Menggunakan Filter WordPress untuk Mengubah Kelas Navigasi
Menggunakan fungsi bawaan wp_nav_menu() WordPress, Anda dapat mendiktekan kelas untuk elemen <nav> dan <ul>. Sebagai contoh:
1 |
<nav class="menu menu--primary"> |
2 |
|
3 |
<?php
|
4 |
wp_nav_menu( array( |
5 |
'theme_location' => 'primary', |
6 |
'container' => '', |
7 |
'menu_class' => 'menu__items menu__items--primary', |
8 |
) ); |
9 |
?>
|
10 |
|
11 |
</nav>
|
Perhatikan parameter menu_class untuk menambahkan kelas khusus ke elemen <ul>. WordPress juga memiliki filter yang berguna untuk elemen <li> dan <a>:
- nav_menu_css_class untuk menerapkan kelas ke item menu elemen
<li>. - nav_menu_link_attributes untuk menerapkan atribut ke menu item elemen
<a>.
Menggunakan Filter nav_menu_css_class
Dalam contoh ini, kita menyetel ulang semua kelas default dari item menu elemen <li> dan menambahkan kelas khusus kita sendiri. Mari tambahkan kelas contoh kita yang disebut menu__item dengan memasukkan filter ini ke dalam functions.php kita:
1 |
function bemit_nav_menu_css_class( $classes, $item, $args, $depth ) { |
2 |
|
3 |
// Reset all default classes and start adding custom classes to array.
|
4 |
$_classes = [ 'menu__item' ]; |
5 |
|
6 |
// Return custom classes.
|
7 |
return $_classes; |
8 |
|
9 |
}
|
10 |
|
11 |
add_filter( 'nav_menu_css_class', 'bemit_nav_menu_css_class', 10, 4 ); |
Apakah Anda memperhatikan ada empat parameter? Mari tambahkan kelas modifier menu__item--primary, tempat utama adalah lokasi tema. Untuk ini kita dapat menggunakan parameter $args untuk menambahkan lokasi tema. Sekarang filter kita terlihat seperti ini:
1 |
function bemit_nav_menu_css_class( $classes, $item, $args, $depth ) { |
2 |
|
3 |
// Reset all default classes and start adding custom classes to array.
|
4 |
$_classes = [ 'menu__item' ]; |
5 |
|
6 |
// Get theme location, fallback for `default`.
|
7 |
$theme_location = $args->theme_location ? $args->theme_location : 'default'; |
8 |
|
9 |
// Add theme location class.
|
10 |
$_classes[] = 'menu__item--' . $theme_location; |
11 |
|
12 |
// Return custom classes.
|
13 |
return $_classes; |
14 |
|
15 |
}
|
16 |
|
17 |
add_filter( 'nav_menu_css_class', 'bemit_nav_menu_css_class', 10, 4 ); |
Contoh kode dapat ditemukan dalam contoh tema saya lengkap di file inc/functions-filters.php.
Menggunakan filter nav_menu_link_attributes
Mari tambahkan contoh menu kelas__anchor ke setiap item menu elemen <a>.
1 |
function bemit_nav_menu_link_attributes( $atts, $item, $args, $depth ) { |
2 |
|
3 |
// Start adding custom classes.
|
4 |
$atts['class'] = 'menu__anchor'; |
5 |
|
6 |
return $atts; |
7 |
}
|
8 |
|
9 |
add_filter( 'nav_menu_link_attributes', 'bemit_nav_menu_link_attributes', 10, 4 ); |
Menambahkan Kelas Melalui Menu Builder
Terkadang kita menambahkan kelas khusus ke item menu elemen <li> dari antarmuka pembuat menu.
Untuk menjaga agar CSS tetap flat, mari tambahkan kelas menu__anchor--button ke elemen <a> tempat kelas button ditampilkan:
1 |
function bemit_nav_menu_link_attributes( $atts, $item, $args, $depth ) { |
2 |
|
3 |
// Start adding custom classes.
|
4 |
$atts['class'] = 'menu__anchor'; |
5 |
|
6 |
// Add `menu__anchor--button` when there is `button` class in `<li>` element.
|
7 |
if ( in_array( 'button', $item->classes, true ) ) { |
8 |
|
9 |
$atts['class'] .= ' menu__anchor--button'; |
10 |
|
11 |
}
|
12 |
|
13 |
return $atts; |
14 |
|
15 |
}
|
16 |
|
17 |
add_filter( 'nav_menu_link_attributes', 'bemit_nav_menu_link_attributes', 10, 4 ); |
Sekarang kita dapat langsung menargetkan satu level CSS menggunakan .menu__anchor--button{...}. Dalam demo saya, Anda akan melihat satu item menu yang ditata seperti tombol, yang ditargetkan tanpa harus menyelami kekasaran roman kelinci.
Navigasi Subpages
Jika Anda menggunakan wp_list_pages() untuk mengambil child pages, ada filter serupa yang tersedia:
Dalam demo ada fungsi bemit_sub_pages_navigation() yang mencantumkan sub halaman di sidebar. Lihat hasil akhir dari situs demo.
Kesimpulan
Jadi Anda lihat, Anda mungkin tidak memerlukan Custom Walker untuk navigasi jika Anda membuat perubahan yang lebih kecil. Ada banyak filter di sekitarnya.
Dengan begitu, tidak semua markup mudah dimodifikasi. Misalnya fungsi pagination seperti the_posts_pagination() tidak menyediakan filter yang baik saat ini. Tetapi itu adalah topik tutorial lainnya.
Saya harap Anda menemukan kiat singkat tentang filter navigasi ini bermanfaat!
