wp_enqueue_style, the right way

Halaman web tanpa CSS bagaikan komputer tanpa casing :D. Pernah lihat website tanpa CSS sedikitpun? pastilah ada, ya pada saat CSS Naked Day, dimana tampilan halaman web dinonaktifkan style nya. Kali ini bukan bagaimana menonaktifkan style (via CSS), tapi bagaimana menuliskan peletakan file CSS yang baik dan benar dalam web WordPress.

Tampil cantik dengan CSS

Menurut pemaparan dari konsorsium W3C tentang CSS, disebutkan terdapat macam-macam dekorasi dengan CSS, antara lain menggunakan external file, inline style, dan browser (user agent) stylesheet. pssst, kalau mau tahu lebih jelasnya bisa dipelajari dengan mudah lewat e-Book Kupas Tuntas CSS, from Zero to Hero yang saya tulis 🙂

Penggunaan external file CSS (selanjutnya disebut file CSS ) dianggap paling efektif dan efisien, hal ini bila didasarkan pada faktor speed loading, dan juga SEO secara langsung maupun tidak langsung. Pertanyaannya bagaimana menuliskan kode file CSS yang baik dan benar pada WordPress?
Apakah kita masih harus menuliskan pada file header seperti :

<link rel="stylesheet" src="namafile.css"> ?

Bagaimana bila ada sejumlah file CSS yang harus dihadirkan, baik dari theme, plugin dan bawaan WordPress sendiri? Sudah jangan bayangkan, pastilah ribet dan bikin mumet pengaturannya.

wp_enqueue_style, CSS styling the right way is coming

Berbahagialah pengguna WordPress yang saat artikel tutorial ini ditulis eh diketik, WordPress baru saja merayakan hari Ulang Tahunnya yang ke-10. Bahagia, kenapa?

ya, karena dalam WordPress telah disediakan function wp_enqueue_style yang akan membuat ‘malas’ para pengembang theme, plugin dan tentunya para pengembang WordPress itu sendiri.

Implementasinya, seperti biasa akan disajikan dalam format skenario singkat ( script writer by Riesurya 😀 )

skenario :

  • theme dengan 4 file CSS, dengan alokasi file general.css, shortcode.css, fonts.css dan custom.css
  • file general.css berisi semua global CSS rule, mulai dari layout, normalize dan sebagainya
  • file shortcode berisi referensi styling untuk kebutuhan shortcode dan bergantung pada general.css
  • sementara fonts.css berisi styling typography saja
  • file general.css, fonts.css dan shortcode.css berada di folder css dari theme yang digunakan
  • file custom.css adalah file css yang akan digunakan untuk menghasilkan style css yang spesifik dari child theme dan berada di folder css child theme.

bagaimana supaya ketiganya bisa tampil dengan mulus dan dengan urutan yang seharusnya? Disinilah peran wp_enqueue_style dimainkan. (belum ngantuk kan? klo ngantuk silakan cuci muka dulu, kalo laper ya makan dulu sana, kecuali lagi shaum )

Penting !

wp_enqueue_style digunakan pada tampilan frontend, artinya file CSS yang digunakan tidak akan muncul di halaman admin (backend)

Reading, Writing, and Understand

Supaya pesan dari tutorial ini bisa dicerna dan dipahami dengan baik, hanya satu caranya, baca, tulis kodenya dan lihat bagaimana prosesnya, diulang ( sampai lancar ) pasti dapat hasilnya – forever understanding ( gak ada tuh nyontek atau bikin contekan 😀 ).

Supaya gak dibilang gosip, tutorial ini akan mengutip dari WordPress Function Reference wp_enqueue_style :

wp_enqueue_style( $handle, $src, $deps, $ver, $media );

Penjelasan singkat (banget) :

$handle = kode nama file CSS yang akan digunakan

$src = source alias alamat URL file CSS

$deps = dependensi (ketergantungan) akan file CSS lainnya, ditulis sebagai array.

$ver = versi file CSS yang digunakan, gak wajib banget

$media = jenis media yang akan digunakan (all, screen, print atau yang lain), ini juga opsional .

Tahap pertama :

Register styles yang akan digunakan ( gak wajib, hanya dianjurkan )

– alasan kenapa perlu melakukan registrasi styles untuk file CSS, karena data ini akan disimpan dalam memory WordPress untuk selanjutnya akan lebih mudah dan cepat diproses saat dipanggil / digunakan-

contoh berikut, mudahnya ditulis di file functions.php ( pada theme ),

Contoh Kode#1

wp_register_style( 'general-styles', 'template_directory_uri()'./css/general.css', '',null,'all' );
wp_register_style( 'shortcode-styles', 'template_directory_uri()'./css/shortcode.css', array('general-styles'),null,'all' );
wp_register_style( 'fonts-styles', 'template_directory_uri()'./css/fonts.css', null,'all' );
wp_register_style( 'custom-child', 'stylesheet_directory_uri()'./css/custom.css',null,'all' );

bagaimana dengan file style.css sendiri?
info :
Bila file style.css yang dimaksud adalah berada pada folder theme dan berisi informasi theme, tidak perlu lagi dilakukan register dengan wp_register_style, karena saat theme diaktifkan, file style.css tersebut sudah otomatis teregister.

panggil dengan wp_enqueue_style

dan selanjutnya, untuk melakukan pemanggilan di sisi frontend, cukup dengan menuliskan kode sebagai berikut :

Contoh Kode#2

wp_enqueue_style( 'general-styles');
wp_enqueue_style( 'fonts-styles');
wp_enqueue_style( 'shortcode-styles');
wp_enqueue_style( 'custom-child');

baiknya kalau styles yang akan digunakan di register terlebih dahulu, akan lebih fleksibel dan mudah dalam administrasinya.
Contoh, kode diatas dapat juga ditulis sebagai bentuk kombinasi ( dalam bentuk array ) sebagai :

atau bila tidak dilakukan registrasi ( melalui wp_register_style ), kode penulisan enqueue ( antrian ) akan menjadi :

wp_enqueue_style(
	array( 
		'general-styles',
		'fonts-styles',
		'shortcode-styles',
		'custom-child'
	)
)

Contoh Kode#3

wp_enqueue_style( 'general-styles', 'template_directory_uri()'./css/general.css', '',null,'all' );
wp_enqueue_style( 'fonts-styles', 'template_directory_uri()'./css/fonts.css', null,'all' );
wp_enqueue_style( 'shortcode-styles', 'template_directory_uri()'./css/shortcode.css', array('general-styles'),null,'all' );
wp_enqueue_style( 'custom-child', 'stylesheet_directory_uri()'./css/custom.css',null,'all' );

Perhatikan urutan penulisan kode diatas !
Urutan tampilan akan disesuaikan dengan parameter yang ditetapkan, dari atas ke bawah ( kecuali menggunakan argumen depedensi – contoh Kode#5  ) akan diolah oleh browser sebagai :

Contoh Kode#4

<link rel='stylesheet' id='general-styles-css' href='http://namasitus.tld/wp-content/themes/parent-theme/css/general.css' type='text/css' media='all' />
<link rel='stylesheet' id='fonts-css' href='http://namasitus.tld/wp-content/themes/parent-theme/css/fonts.css' type='text/css' media='all' />
<link rel='stylesheet' id='shortcode-css' href='http://namasitus.tld/wp-content/themes/parent-theme/css/shortcode.css' type='text/css' media='all' />
<link rel='stylesheet' id='shortcode-css' href='http://namasitus.tld/wp-content/themes/childtheme/css/custom.css' type='text/css' media='all' />

dan akan berada diantara tag <head> dan </head>.

Sampai disini bisa dipahami kan 🙂
OK, kalo gitu sekarang kita akan lanjutkan permainan enqueue_styles-nya.

Bagaimana dengan penulisan kode berikut, apakah akan menghasilkan output yang sama seperti pada contoh diatas ?

Contoh Kode#5

wp_enqueue_style( 'general-styles', 'template_directory_uri()'./css/general.css', '',null,'all' );
wp_enqueue_style( 'fonts-styles', 'template_directory_uri()'./css/fonts.css', array('shortcode-styles'), null,'all' );
wp_enqueue_style( 'shortcode-styles', 'template_directory_uri()'./css/shortcode.css', array('general-styles'),null,'all' );
wp_enqueue_style( 'custom-child', 'stylesheet_directory_uri()'./css/custom.css',null,'all' );

Jawabannya ya, pasti .. pasti beda dong.
Ini hasil outputnya :

Contoh Kode#6

<link rel='stylesheet' id='general-styles-css' href='http://namasitus.tld/wp-content/themes/parent-theme/css/general.css' type='text/css' media='all' />
<link rel='stylesheet' id='shortcode-css' href='http://namasitus.tld/wp-content/themes/parent-theme/css/shortcode.css' type='text/css' media='all' />
<link rel='stylesheet' id='fonts-css' href='http://namasitus.tld/wp-content/themes/parent-theme/css/fonts.css' type='text/css' media='all' />
<link rel='stylesheet' id='shortcode-css' href='http://namasitus.tld/wp-content/themes/childtheme/css/custom.css' type='text/css' media='all' />

Kenapa?
Perhatikan dengan teliti, meskipun urutannya tetap sama, hanya pada baris kedua ( font-styles ), ditambahkan argument dependensi ( ketergantungan ), dimana fonts.css ( dengan identifier font-styles ) dibuat tergantung akan keberadaan shortcode.css ( identifier shortcode-styles ).

OK, sampai disini sudah mulai paham ( atau tambah bingung ? ).

Jangan khawatir, jadi ingat saat di stasiun Manggarai ( sambil nunggu kereta ), ada announcement via speaker  “Kereta Commuter jurusan Manggarai – Duri berikutnya berangkat dari stasiun TanahAbang”, nah itu berarti gak perlu rela berdesak-desakan.

Jadi, kalo sampai disini masih bingung dan kadar kafein di cangkir sudah maksimum ( baca: tinggal ampas ), tenang, gak pake lama ( GPL ) juga paham. PS: lain kali nyeduh kopinya yang tanpa ampas, jadi kalo isi cangkir kopi sudah habis kan bingungnya maksimum  .. just kidding 😀

Untuk itu kita akan lakukan mode remove_action bingung dan menambahkan add_action paham ( bingung lagi? baca dong artikel Apa dan Bagaimana Hooks Action pada WordPress 🙂 ).

Modifikasi styles ( ada tambahan dari plugin )

Sejumlah plugin dengan font-end view model, akan menampilan css bawaannya sendiri. Dan bila diinginkan agar pemanggilan file css ( dari plugin ) dilakukan dari themes ( ada beberapa alasan, lihat dibawah ) kita bisa lakukan dengan sangat mudah.

Syaratnya, tentu saja, plugin author menuliskan kode enqueue styles nya mengikuti kaidah dari WordPress !

Contoh output styles ( ada penambahan dari plugin ) :

Kode #7
Output css bersama dengan output dari plugin style :

<link rel='stylesheet' id='general-styles-css' href='http://namasitus.tld/wp-content/themes/parent-theme/css/general.css' type='text/css' media='all' />
<link rel='stylesheet' id='shortcode-css' href='http://namasitus.tld/wp-content/themes/parent-theme/css/shortcode.css' type='text/css' media='all' />
<link rel='stylesheet' id='fonts-css' href='http://namasitus.tld/wp-content/themes/parent-theme/css/fonts.css' type='text/css' media='all' />
<link rel='stylesheet' id='shortcode-css' href='http://namasitus.tld/wp-content/themes/childtheme/css/custom.css' type='text/css' media='all' />
<link rel='stylesheet' id='plugin-css' href='http://namasitus.tld/wp-content/plugin/namaplugin/css/plugin.css' type='text/css' media='all' />

Dengan output seperti Contoh Kode #7 diatas, bisa dipastikan styles ( css effect ) dari plugin dapat mempengaruhi tampilan ( bila menggunakan selector css yang sama ), sementara skenario bahwa custom.css adalah lapis terakhir mode override tidak lagi berfungsi dengan baik. Whaaatt ???

Santai bro, yang jualan pecel masih disana, kalo pun sudah habis, kita geser ke lapak gado-gado aja, beda tipis kan pecel sama gado-gado 😛

Jadi, untuk amannya, kita modifikasi ( sedikit aja ).

Dari data intelijen yang ada diketahui bahwa css dari plugin teridentifikasi dengan identifier ‘plugin-css’. ( lihat contoh kode diatas, pasti ketemu 😀 )
Supaya plugin-css tersebut bisa bekerja sama dengan baik, kita modifikasi sedikit output yang akan ditampilkan ( oleh plugin tersebut ), dan caranya adalah ….jreng jreng jreng ….bruk ( buset lagi ngetik ada yang ngamen, gak taunya bang Bryan Adams numpang sing-a-song “We’re gonna win” di earphone ), yang terakhir efek asbak jatuh kesenggol – untung abunya gak bertebaran ).

back to code…please

Solusinya mudah saja, dan mudah banget ( bedanya apa ya 😀 ), dengan membuat ketergantungan custom.css terhadap plugin.css.

Kode #8 ( modifikasi contoh Kode#6 )

wp_enqueue_style( 'general-styles', 'template_directory_uri()'./css/general.css', '',null,'all' );
wp_enqueue_style( 'fonts-styles', 'template_directory_uri()'./css/fonts.css', null,'all' );
wp_enqueue_style( 'shortcode-styles', 'template_directory_uri()'./css/shortcode.css', array('general-styles'),null,'all' );
wp_enqueue_style( 'custom-child', 'stylesheet_directory_uri()'./css/custom.css', array('plugin-css'), null,'all' );

dan hasilnya adalah :

<link rel='stylesheet' id='general-styles-css' href='http://namasitus.tld/wp-content/themes/parent-theme/css/general.css' type='text/css' media='all' />
<link rel='stylesheet' id='shortcode-css' href='http://namasitus.tld/wp-content/themes/parent-theme/css/shortcode.css' type='text/css' media='all' />
<link rel='stylesheet' id='fonts-css' href='http://namasitus.tld/wp-content/themes/parent-theme/css/fonts.css' type='text/css' media='all' />
<link rel='stylesheet' id='plugin-css' href='http://namasitus.tld/wp-content/plugin/namaplugin/css/plugin.css' type='text/css' media='all' />
<link rel='stylesheet' id='shortcode-css' href='http://namasitus.tld/wp-content/themes/childtheme/css/custom.css' type='text/css' media='all' />

dengan begini, kita tidak perlu mengubah kode plugin ( alias gak perlu repot kalo plugin-nya ada update, dan kita kudu ubah lagi … capek bonus ogah deh ).

Dan sampai disini saya rasa cukup sekian ulasan seputar tutorial wp_enqueue_style, CSS styling the right way.
intro : empty

outtro : Bila ada sumur di ladang,

jangan langsung mandi ( tanya dulu, ada yang punya gak)

bila ada umur panjang

bolehlah kita ulang tahun lagi

Happy Anniversary WordPress 10th

PS : contoh register dan enqueue style yang ( menurut saya efisien dan efektif ) bisa ditemui di plugin DeVioPlayground – fun theme framework bikinan saya lho ….hehehe.

Comments are closed.