Apa itu WP Enqueue dan Bagaimana Cara Menggunakannya?

Diterbitkan: 2017-10-28

Saat pertama kali mempelajari HTML, satu-satunya cara Anda mengetahui cara menyisipkan segala jenis interaktivitas adalah menggunakan tag skrip di header atau footer halaman untuk menyetel jenis dan sumber file JavaScript eksternal. (Atau jika Anda benar - benar baru belajar, seluruh fungsi JS di antara tag skrip ada di dalam tubuh itu sendiri. Itu bagus untuk dipelajari, tetapi praktiknya sangat buruk setelah Anda beralih ke pengembangan WordPress tingkat lanjut. Masuk ke fungsi enqueue .

Setelah Anda melewati situs web satu halaman yang sederhana, praktik pemula tersebut dapat menciptakan beberapa situasi yang sangat sulit. Saat Anda mulai menambahkan lebih banyak dan lebih banyak JavaScript, situs web Anda menjadi semakin lambat. Pembaruan membutuhkan waktu lebih lama. Akhirnya, Anda telah membuat banyak JavaScript-getti dan tidak peduli seberapa keras Anda mencoba, tumpukan mie itu tidak akan terlepas.

Untungnya, Anda dapat menggunakan fungsi enqueue di WordPress untuk menambahkan gaya dan skrip yang ditangani CMS untuk Anda. Semua kekacauan ditangani untuk Anda. Meskipun tidak sesederhana menempel langsung skrip atau gaya yang Anda inginkan di header atau footer setiap halaman, ini adalah cara yang tepat untuk menanganinya. WordPress tidak terlalu berpendirian, pasti ada serangkaian praktik terbaik yang harus Anda ketahui

Dan wp_enqueue_scripts berada di garis depan praktik tersebut.

Apa masalahnya?

Alasan utama Anda ingin menggunakan wp_enqueue adalah agar situs Anda berjalan lancar dan cepat. Kecepatan halaman penting dan menggunakan skrip dan gaya yang sama berulang-ulang tidak membantu. Sama sekali.

Untungnya, wp_enqueue adalah contoh pemrograman fungsional. Semua itu berarti Anda menulis satu bagian kode untuk dieksekusi (cuplikan JavaScript Anda), dan Anda menggunakan wp_enqueue untuk memanggilnya alih-alih harus menulis ulang/menempelkan semuanya setiap kali Anda membutuhkannya.

itu. Luar biasa.

Lebih hebatnya lagi, menggunakan metode enqueue membuat WordPress sendiri memasukkan tag _script_ ke header dan footer di mana mereka berada secara otomatis, memuatnya tanpa harus memasukkannya di setiap halaman secara terpisah.

Sintaks dan Param Enqueue WP

Membuat skrip enqueueing sebenarnya tidak terlalu sulit. Jika Anda cukup paham untuk bekerja dengan JavaScript sejak awal, fungsi PHP yang Anda gunakan untuk enqueueing akan mudah.

Dalam tag skrip biasa, Anda akan mengimpor file .js eksternal secara langsung atau menempelkan seluruh potongan kode yang panjang di antara tag itu sendiri. (Ini juga yang Anda lakukan jika Anda menempelkan sesuatu ke modul kode Divi atau widget WP Kustom HTML atau Teks).

Anda hanya perlu mengetahui beberapa parameter dan sintaks dasar.

Codex memberikan ini sebagai kode enqueue dasar: 

wp_enqueue_script( $handle, $src, $deps, $ver, $in_footer );

Secara keseluruhan, cukup sederhana untuk memecah menjadi bit yang dapat digunakan berdasarkan parameter.

  • wp_enqueue_script() adalah fungsi all yang akan meletakkan semua kode di halaman yang dituju .
  • $handle adalah nama unik untuk skrip itu sendiri.
  • $src mewakili URL file .js aktual yang Anda antri.
  • $deps adalah $handle s dari semua dependensi yang dibutuhkan.
  • $ver akan menjadi nomor versi. Jika tidak ada yang ditentukan, Anda mendapatkan versi instalasi WP ditambahkan secara otomatis.
  • $in_footer atau $in_header memberi tahu WordPress tempat meletakkan skrip Anda.

Dokumentasi lengkap untuk skrip enqueue dapat dilihat di Codex.

Perhatian, Siswa: Pendaftaran WP Dimulai Sekarang!

Selain _wp_enqueue__, WP juga memiliki metode praktis yang disebut _wp_register__. Kedua metode menggunakan parameter dan sintaks yang sama, jadi Anda benar-benar mendapatkan kesepakatan dua-untuk-satu dengan pasangannya. Pada dasarnya, mendaftarkan skrip sama dengan menamai fungsi dalam JavaScript.

Meskipun tidak perlu, mendaftarkan skrip Anda dapat membuat hidup Anda jauh lebih mudah karena Anda tidak perlu mendeklarasikannya sebagai dependensi di kemudian hari. Mereka sudah akan terdaftar. Oleh karena itu…_wp_register__. Setelah skrip terdaftar, Anda dapat memanggilnya kembali dengan $handle , seperti yang akan Anda lihat pada contoh di bawah ini.

Anda akan mendaftarkan kode Anda seperti ini: 

wp_register_script( 'jquery', 'http://ajax.googleapis.com/ajax/libs/jquery/1.10.1/jquery.min.js', false, null, $in_footer);

Kemudian, kapan pun Anda membutuhkannya lagi, Anda selalu dapat memanggilnya kembali seperti ini:

wp_enqueue_script( 'jquery' );

Selain itu, pendaftaran berarti Anda tidak perlu memuat skrip meskipun tidak diperlukan. WPMU memiliki contoh yang luar biasa dari pembuatan kode pendek: jika Anda mendaftarkan skrip ke kode pendek yang menggunakan _wp_enqueue__, itu hanya akan digunakan ketika kode pendeknya. Namun jika Anda hanya memanggilnya dengan enqueueing, itu akan dimuat bahkan ketika kode pendek tidak digunakan.

Anda dapat membaca semua tentang metode di Codex.

Selain itu, pembuat plugin diharuskan untuk membuat skrip enqueue jika mereka ingin disertakan dalam repo WordPress.org, jadi jika itu ada di piring Anda…lebih baik mengantri.

Menyatukannya

Menerapkan kode itu mudah. Cukup letakkan cuplikan seperti di bawah ini ke functions.php Anda. dan WordPress menangani sisanya. Maksud saya, ini adalah cuplikan yang sangat mendasar untuk memanggil jQuery, tetapi Anda dapat melihat bagaimana hal-hal itu dimainkan bersama.

Anda biasanya akan menggunakan sesuatu yang terlihat seperti ini: 

<script type="text/javascript" src="jquery.js"></script>

Setelah Anda mempelajari cara menggunakan enqueue_scripts_ , Anda akan melihat sesuatu yang lebih seperti ini: 

add_action('wp_enqueue_scripts', 'add_scripts');
function add_scripts(){
    wp_register_script( 'jquery', 'http://ajax.googleapis.com/ajax/libs/jquery/1.10.1/jquery.min.js', false, null, true);
    wp_enqueue_script( 'jquery' ); 
}

Sekarang, perhatikan kode di atas bagaimana ia menggunakan fungsi add_scripts()_ yang sudah menjadi bagian dari WordPress untuk menguraikan urutan beberapa langkah berikutnya. Pertama, fungsi wp_register_ mendapatkan semua detail yang ditentukan dan meletakkan skrip di footer halaman, dan kemudian menggunakan wp_enqueue untuk akhirnya memanggilnya setelah semuanya diatur.

Membungkus

Itu benar-benar semua yang ada untuk itu. Yah, itu tidak benar-enqueue adalah bagian yang cukup mendarah daging dari WP. Tetapi itulah dasar-dasar yang membuat Anda mencoba melakukan lebih banyak hal dengan WordPress daripada yang mungkin Anda lakukan sebelumnya.

Dasar-dasar yang kita semua pelajari tentang memasukkan skrip saat memulai pengembangan web masih berfungsi, tetapi itu tidak selalu merupakan cara terbaik untuk melakukan sesuatu. Bagian dari keindahan WordPress yang dibangun di atas PHP adalah Anda dapat membawa logika semacam ini ke dalam pekerjaan Anda sambil tetap mempertahankan struktur dasar dan alur kerja yang sama seperti yang Anda miliki.

Gambar thumbnail artikel oleh hanss / shutterstock.com