Cara Benar Menambahkan JavaScript dan Styles di WordPress

WordPress memiliki sistem enqueue untuk menambahkan skrip dan gaya eksternal yang membantu mencegah konflik plugin. Karena kebanyakan pengguna menjalankan lebih dari satu plugin di situs mereka, selalu bagus bagi pengembang untuk mengikuti praktik terbaik. Pada artikel ini, kami akan menunjukkan cara menambahkan JavaScript dan gaya dengan benar di WordPress. Ini akan sangat berguna bagi mereka yang baru mulai mempelajari tema WordPress dan pengembangan plugin.
Kesalahan

WordPress memiliki fungsi wp_head yang memungkinkan Anda memuat apapun di bagian kepala situs. Bagi yang belum tahu lebih baik, mereka cukup menambahkan script mereka dengan menggunakan kode seperti ini:

<?php
add_action('wp_head', 'wpb_bad_script');
function wpb_bad_script() {
echo 'jQuery goes here';
}
?>
Sedangkan kode di atas adalah cara yang mudah, itu adalah cara yang salah untuk menambahkan script di WordPress. Misalnya, jika Anda memuat jQuery secara manual dan plugin lain yang juga menggunakan beban jQuery melalui cara yang benar, Anda harus memasukkan jQuery dua kali. Ada kemungkinan juga bahwa keduanya adalah versi yang berbeda yang juga dapat menyebabkan konflik.
Mari kita lihat cara yang tepat untuk melakukan ini.

Mengapa Script Enqueue di WordPress?
WordPress memiliki komunitas pengembang yang kuat. Ribuan orang di seluruh dunia merancang tema dan menulis plugin untuk WordPress. Untuk memastikan semuanya bekerja dengan baik dan tidak ada yang menginjak kaki orang lain, WordPress memiliki fungsi skrip enqueue. Fungsi ini menyediakan cara yang sistematis untuk memuat JavaScript dan gaya. Dengan menggunakan fungsi wp_enqueue_script, Anda memberi tahu WordPress kapan harus memuat skrip, tempat memuatnya, dan apa itu dependensinya.

Hal ini memungkinkan setiap orang untuk menggunakan pustaka JavaScript built-in yang disertakan dengan WordPress daripada memuat skrip pihak ketiga yang sama beberapa kali. Ini juga membantu mengurangi waktu buka halaman dan menghindari konflik dengan tema dan plugin lainnya.

Cara Memasang Sketsa dengan Benar di WordPress
Memuat skrip dengan benar di WordPress sangat mudah. Berikut adalah contoh kode yang akan Anda sisipkan di file plugin Anda atau di file functions.php tema Anda untuk memuat skrip di WordPress dengan benar.
 <?php

function 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:
Kami memulai dengan mendaftarkan naskah kami melalui fungsi wp_register_script (). Fungsi ini menerima 5 parameter:

  • $ handle - Handle adalah nama unik dari naskah Anda. Kami disebut "my_amazing_script"
  • $ src - src adalah lokasi skrip anda Kami menggunakan fungsi plugins_url untuk mendapatkan URL yang tepat dari folder plugin kami. Setelah WordPress menemukan itu, maka akan mencari nama file kami amazing_script.js di folder itu.
  • $ deps - deps adalah untuk ketergantungan. Karena script kita menggunakan jQuery, kita telah menambahkan jQuery di area dependency. WordPress secara otomatis akan memuat jQuery jika tidak dimuat di situs.
  • $ ver - Ini adalah nomor versi skrip kami. Parameter ini tidak diperlukan.
  • $ in_footer - Kami ingin memuat skrip kami di footer, jadi kami telah menetapkan nilainya menjadi benar. Jika Anda ingin memuat skrip di header, berarti Anda akan mengatakan salah.

Setelah memberikan semua parameter di wp_register_script, kita bisa memanggil script di wp_enqueue_script () yang membuat semuanya terjadi.

Sekarang beberapa mungkin bertanya-tanya mengapa kita pergi langkah ekstra untuk mendaftarkan naskah terlebih dahulu dan kemudian enqueuing itu? Nah, ini memungkinkan orang lain pemilik situs untuk melakukan deregister naskah Anda jika mereka ingin tanpa memodifikasi kode inti plugin Anda.

Cara Mengkoreksi dengan benar Styles
Sama seperti skrip, Anda juga bisa menghapus stylesheet Anda. Lihatlah contoh di bawah ini:
<?php
function 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' );
?>
Perhatikan bahwa kami telah menggunakan hook tindakan wp_enqueue_scripts untuk kedua gaya dan skrip. Meski namanya, fungsi ini bekerja untuk keduanya.

Pada contoh di atas kita telah menggunakan plugins_url untuk menunjuk ke lokasi script atau style yang ingin kita enqueue. Namun, jika Anda menggunakan fungsi skrip enqueue dalam tema Anda, cukup gunakan get_template_directory_uri (). Jika Anda bekerja dengan tema anak, gunakan get_stylesheet_directory_uri (). Berikut adalah contoh kode:
<?php

function 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' );
?>
Kami harap artikel ini membantu Anda mempelajari cara menambahkan jaring dan stylesheet dengan benar di tema dan plugin WordPress Anda. Untuk pertanyaan dan komentar, tinggalkan komentar di bawah ini.


close