Unlimited Wordpress themes, plugins, graphics & courses! Unlimited asset downloads! From $16.50/m
Advertisement
  1. Web Design
  2. BEM

Tips Singkat: Penamaan BEM dan Filter WordPress untuk Navigasi

by
Difficulty:IntermediateLength:ShortLanguages:

Indonesian (Bahasa Indonesia) translation by Febri Ardian Sanjoyo (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.”
  • Pengantar Metodologi BEM

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:

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:

CSS yang dikompilasi akan terlihat seperti ini:

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:

Perhatikan parameter menu_class untuk menambahkan kelas khusus ke elemen <ul>. WordPress juga memiliki filter yang berguna untuk elemen <li> dan <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:

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:

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

Menambahkan Kelas Melalui Menu Builder

Terkadang kita menambahkan kelas khusus ke item menu elemen <li> dari antarmuka pembuat menu.

Adding button class for menu item

Untuk menjaga agar CSS tetap flat, mari tambahkan kelas menu__anchor--button ke elemen <a> tempat kelas button ditampilkan:

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.

Navigation with call to action menu item

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!

Advertisement
Advertisement
Advertisement
Advertisement
Looking for something to help kick start your next project?
Envato Market has a range of items for sale to help get you started.