Cara Benar Menambahkan JavaScript dan Gaya di WordPress

Pada artikel ini kita akan melihat cara menambahkan JavaScript dan Gaya dengan benar di WordPress .

Ada banyak pengembang WordPress baru yang suka menulis kode dan mengembangkan plugin secara eksklusif untuk situs web mereka sendiri atau menjualnya di berbagai pasar dan mendapatkan pengembalian yang bagus.

Ada berbagai cara untuk menulis kode tetapi hanya ada cara yang dipilih untuk menulis kode secara efisien.

Jika Anda dapat menulis kode dalam dua baris, bukan sepuluh, Anda menghemat banyak pemrosesan serta memori.

Jika mungkin tidak masalah untuk situs web kecil dan ringan, tetapi untuk situs web berat, itu bisa sangat berarti.

Jika Anda tidak menulis kode yang jelas dan menggunakan sumber daya yang tersedia secara efisien, Anda akan menciptakan banyak konflik untuk program lain.

Misalnya, ada berbagai cara untuk memuat Javascript siap pakai eksternal di WordPress untuk plugin Anda.

Tetapi jika Anda tidak mengikuti standar yang tepat, semua plugin yang diaktifkan bisa macet parah.

Artikel ini terutama untuk pengembang WordPress baru yang ingin mengembangkan tema dan plugin WordPress.

Kecuali Anda membuat kode dengan benar, kode Anda akan menjadi tidak profesional dan produk apa pun yang Anda buat, tidak peduli seberapa bagus konsepnya, Anda tidak akan pernah diterima.

Jadi, lebih baik untuk mengetahui cara menambahkan JavaScript dan Gaya dengan benar di WordPress .

Kesalahan Menambahkan JavaScript

Beberapa dari Anda mungkin menyadari fakta bahwa WordPress memiliki fungsi yang disebut wp_head yang membantu Anda memuat apa pun di bagian header situs web.

Yang perlu Anda lakukan adalah menambahkan baris kode berikut di file skrip Anda, dan apa pun akan muncul di header.

add_action('wp_head', 'wpb_bad_script');
fungsi wpb_bad_script() {
echo 'jQuery masuk ke sini';
}

Ini adalah jalan pintas untuk menambahkan sesuatu, tetapi ini bukan cara terbaik. Anda harus mengikuti standar yang tepat membuang pintasan, dan itulah inti dari ilustrasi ini.

Misalnya, Anda memuat JQuery secara manual di plugin Anda, dan pengembang lain juga memuat JQuery yang sama secara manual atau melalui standar yang tepat. Jika seseorang telah mengaktifkan kedua plugin Anda, maka JQuery akan dimuat dua kali di memori yang merupakan pemborosan.

Selanjutnya, jika JQuery dimuat berbeda dalam versi, maka akan ada banyak gangguan di plugin karena konflik. Anda perlu tahu cara menambahkan JavaScript dan Gaya dengan benar di WordPress sebelum menulis kode apa pun.

Bagaimana Menghindari Kesalahan Tersebut – Konsep Fungsi Enqueue?

Seperti yang mungkin Anda ketahui, komunitas pengembang WordPress adalah komunitas yang besar dan kuat. Ada ribuan dan ribuan pengembang mengembangkan tema dan plugin baru setiap hari.

Tetapi apa yang mereka lakukan untuk memastikan tidak pernah ada konflik dengan metode pengkodean satu sama lain adalah dengan fungsi skrip enqueue.

Ini adalah fungsi yang bertanggung jawab untuk menambahkan JavaScript dan Gaya dengan benar di WordPress sehingga tidak pernah ada konflik dan pemblokiran memori yang tidak perlu.

Ini memastikan cara sistematis memuat JavaScript dan Gaya. Fungsi qp_enquque_function memberi tahu Wordless kapan harus memuat JavaScript dan Gaya tersebut, di mana memuatnya dan terutama dalam kondisi apa.

Dengan bantuan ini Anda tidak perlu memuat JQuery dan hal-hal seperti itu secara manual dan karenanya, tidak akan pernah ada kondisi penyumbatan memori karena memuat file yang sama berulang kali.

Alasannya adalah fakta bahwa fungsi Enqueue memungkinkan Anda menggunakan perpustakaan bawaan yang disertakan dengan WordPress itu sendiri. Ini juga akan mengurangi beban waktu buka halaman yang lambat karena tidak adanya pemuatan JavaScript secara manual.

Langkah-langkah untuk menambahkan JavaScript dan Gaya dengan benar di WordPress-

1. Script Enqueue Di WordPress

Baris kode berikut memuat bundel JavaScript bawaan yang disertakan dengan WordPress. Anda harus menempatkan baris-baris ini di file plugins saat Anda membuat plugin atau Anda harus menempatkannya di functions.php jika Anda membuat tema.

fungsi wpb_adding_scripts() {
wp_register_script('my_amazing_script', plugins_url('amazing_script.js', __FILE__), array('jquery'),'1.1', true);
wp_enqueue_script('my_amazing_script');
}
add_action( 'wp_enqueue_scripts', 'wpb_adding_scripts' ); 

Penjelasan Kode

Script didaftarkan melalui fungsi wp_register_script() yang memiliki lima parameter berbeda.

1. $handle – Ini adalah nama unik untuk skrip. Ini dia 'my_amazing_script'.

2. $src – Ini menentukan lokasi skrip Anda. Fungsi perpustakaan plugins_url mengambil URL yang tepat dari folder plugin Anda. Setelah diambil, itu akan mulai mencari file amazing_script.js di dalamnya.

3. $deps – Mendefinisikan ketergantungan. Anda perlu menambahkannya ketika Anda meminta WordPress untuk memuat skrip perpustakaan seperti Jquery.

Jika skrip sudah dimuat di memori, skrip tidak akan dimuat lagi, dan pemuatan baru akan dilakukan. Ini memastikan tidak ada konflik, tidak ada penyumbatan memori, dan tidak membuang waktu.

4. $ver – Ini mendefinisikan nomor versi skrip. Hal ini tidak wajib.

5. $in_footer – Digunakan untuk memuat script di footer. Jika Anda ingin memuat skrip di header, Anda harus menyimpannya ke false.

Setelah semuanya ditentukan, Anda cukup memanggil skrip dengan wp_enqueue_script().

2. Gaya Enqueue Di WordPress

Sama seperti JavaScript, Anda harus mengantrekan stylesheet. Gunakan potongan kode berikut di file plugin atau file functions.php Anda untuk pembuatan tema.

fungsi wpb_adding_styles() {
wp_register_script('my_stylesheet', plugins_url('my-stylesheet.css', __FILE__));
wp_enqueue_script('my_stylesheet');
}
add_action( 'wp_enqueue_scripts', 'wpb_adding_styles' ); 

Kode di atas cocok saat Anda membuat plugin. Saat Anda membuat tema, Anda harus mengubah plugins_url() menjadi get_template_directory_uri(). Sisanya akan tetap sama persis.

fungsi wpb_adding_scripts() {
wp_register_script('my_amazing_script', get_template_directory_uri() . '/js/amazing_script.js', array('jquery'),'1.1', true);
wp_enqueue_script('my_amazing_script');
}
add_action( 'wp_enqueue_scripts', 'wpb_adding_scripts' ); 

Jika Anda membuat tema anak, maka Anda harus menggunakan get_stylesheet_direcroy_uri() alih-alih get_template_directory_uri().

Ini adalah cara standar untuk menambahkan JavaScript dan Gaya dengan benar di WordPress.

Jika plugin atau tema Anda menghadapi gangguan, Anda harus memodifikasi kodenya dengan baris kode yang disebutkan di atas, dan mungkin gangguan tersebut akan teratasi.

Selalu ikuti standar pengkodean yang diikuti di seluruh dunia untuk berada di halaman yang sama dengan pengembang sukses lainnya.