wp-enqueue script the right way

Pada artikel seputar wp_register_script() kita sudah paham bagaimana caranya mendaftarkan script dan menghubungknnya ke dalam system. Tutorial kali ini kita akan pelajari bagaimana memasang file javascript pada WordPress dengan mudah, cepat dan tepat menggunakan fungsi wp_enqueue_script. Penulisan kode yang benar akan menunjukkan bahwa WordPress memiliki fleksibilitas tinggi dan kemudahan dalam pengembangan program.

Pola penulisan wp_enqueue_script ?

<?php wp_enqueue_script( $handle, $src, $deps, $ver, $in_footer ); ?>

$handle ( string ) : nama singkat untuk script, unik dan akan digunakan selanjutnya sebagai handle pada wp_enqueue_script()

$src ( string ) : URL script. Penulisan URL script sebaiknya tidak pernah berupa hard-link ( seperti http://namadomain/lokasi/namascript.js ), melainkan gunakan seperti plugins_url() untuk plugins dan get_template_directory_uri() untuk themes. Hal ini dimaksudkan agar fleksibilitas tetap terjaga.

$deps : ( array ) opsional : ketergantungan suatu script atas script yang lain. Misal Bootstrap javascript akan memiliki ketergantungan terhadap keberadaan script jQuery.

$ver ( string ) opsional : versi script yang digunakan. Tidak wajb, hanya sebagai penanda bilamana script yang digunakan mempunyai batasan tertentu.

$in_footer ( boolean ) opsional : Umumnya script akan ditampilkan di dalam tag <head>. Bilamana diinginkan script tampil di bagian footer ( sebelum tag </body> ), maka bisa diset sebagai true. Syaratnya, theme harus memiliki wp_footer() pada file footer.php atau lokasi yang sesuai.

Contoh pengembang plugin menggunakan :

wp_enqueue_script( 'deviocantik', trailingslashit( plugins_url() ) . 'assets/devio/jquery.deviocantik.min.js', array('jquery'), null, true);

namun model seperti ini sedikit banyaknya hanya akan menambah pekerjaan lanjutan, dan memiliki resiko konflik. bila digunakan secara bersamaan dalam satu web. Bagaimana bisa ?

Contoh pengembang theme menggunakan :

wp_enqueue_script( 'mytheme', trailingslashit( get_template_directory_uri() ) . 'assets/custom/jquery.deviocantik.min.js', array('jquery'), null, true);

Akibatnya jelas, saat dirender di halaman HTML akan menimbulkan duplikat script atau pemanggilan script yang sama dua kali !

Contoh kemungkinan output :

<script type='text/javascript' src='namadomain.tld/wp-content/plugins/namaplugin/assets/custom/jquery.deviocantik.min.js'></script>

<script type='text/javascript' src='namadomain.tld/wp-content/themes/namatheme/assets/custom/jquery.deviocantik.min.js'></script>

PS: disini saya tidak bahas bagaimana cara mengeliminasi kemungkinan konflik yang terjadi dengan skenario di atas )

hal ini dapat dieleminasi bilamana script yang digunakan di register terlebih dahulu seperti saya jelaskan pada tutorial sesi wp_register_script.

Pemanggilan yang efisien ( setelah script di register terlebih dahulu ) :

wp_enqueue_script( 'deviocantik' );

Pelaku modifikasi dan pengembang theme atau plugin ada baiknya melakukan check dan re-check terlebih dahulu apakah script yang akan digunakan sudah teregister sebelumnya. Apalagi bila script yang digunakan sudah ada di dalam system core WordPress seperti jquery-ui.

Memanggil script dengan fungsi wp_enqueue_scripts()

Script yang akan digunakan dapat dipanggil dengan mudah dan cepat plus tepat sasaran dengan menggunakan action hook wp_enqueue_scripts().

PS: perhatikan beda antara wp_enqueue_scripts() sebagai target_hook dan wp_enqueue_script() !

Contoh :

add_action( 'wp_enqueue_scripts',  'devio_load_myscripts' );
function devio_load_myscripts()
{
  wp_enqueue_script( 'deviocantik' );
}

Sampai disini kita sudah bisa memanggil script hingga di render di halaman HTML.

bagaimana dengan pemanggilan script yang jumlahnya lebih dari satu ? Apakah juga dengan menuliskan kode yang serupa ( ganti nama fungsi ) ? Kita lihat pada kesempatan berikutnya OK

Comments are closed.