Cara Menambahkan JavaScript dan Styles di WordPress

Apakah Anda ingin belajar bagaimana menambahkan stylesheet CSS dan CSS dengan benar di WordPress? Banyak pengguna DIY sering membuat kesalahan dengan langsung memanggil skrip dan stylesheet mereka di plugin dan tema. Pada artikel ini, kami akan menunjukkan cara menambahkan jaring dan stylesheet dengan benar di WordPress. Ini akan sangat berguna bagi mereka yang baru mulai mempelajari tema WordPress dan pengembangan plugin.

Kesalahan Umum Saat Menambahkan Skrip dan Stylesheets di WordPress

Banyak plugin dan pengembang tema WordPress yang baru membuat kesalahan dengan menambahkan skrip atau inline CSS mereka secara langsung ke dalam plugin dan tema mereka.

Beberapa keliru menggunakan wp_headfungsi ini untuk memuat skrip dan stylesheet mereka.

1
2
3
4
5
6
<?php
add_action('wp_head', 'wpb_bad_script');
function wpb_bad_script() {
echo 'jQuery goes here';
}
?>

Sementara kode di atas mungkin tampak lebih mudah, ini adalah cara yang salah untuk menambahkan skrip di WordPress, dan ini menyebabkan lebih banyak konflik di masa mendatang.

Misalnya, jika Anda memuat jQuery secara manual dan plugin lain memuat jQuery melalui metode yang tepat, Anda harus memasukkan jQuery dua kali. Jika dimuat di setiap halaman, maka ini akan berdampak negatif terhadap kecepatan dan kinerja WordPress .

Ada kemungkinan juga bahwa keduanya adalah versi yang berbeda yang juga dapat menyebabkan konflik.

Yang sedang berkata, mari kita lihat cara yang tepat untuk menambahkan skrip dan stylesheet.

Mengapa Enqueue Scripts dan Styles di WordPress?

WordPress memiliki komunitas pengembang yang kuat. Ribuan orang dari seluruh dunia mengembangkan tema dan plugin untuk WordPress.

Untuk memastikan semuanya bekerja dengan baik, dan tidak ada yang menginjak jari kaki orang lain, WordPress memiliki sistem enqueuing. Sistem ini menyediakan cara yang dapat diprogram untuk memuat stylesheet JavaScript dan CSS.

Dengan menggunakan fungsi wp_enqueue_script dan wp_enqueue_style, Anda memberi tahu WordPress kapan harus memuat file, di mana memuatnya, dan apa dependensinya.

Sistem ini juga memungkinkan pengembang untuk memanfaatkan pustaka JavaScript built-in yang digabungkan dengan WordPress daripada memuat skrip pihak ketiga yang sama beberapa kali. Hal ini mengurangi waktu buka halaman dan membantu menghindari konflik dengan tema dan plugin lainnya.

Cara Memasang Sketsa dengan Benar di WordPress?

Memuat skrip dengan benar di WordPress sangatlah 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.

1
2
3
4
5
6
7
8
9
10
?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 skrip kami melalui wp_register_script()fungsinya. 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, Anda akan membuatnya salah.

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

Langkah terakhir adalah menggunakan wp_enqueue_scripts action hook untuk benar-benar memuat script. Karena ini adalah contoh kode, kami telah menambahkannya tepat di bawah hal lainnya.

Jika Anda menambahkan ini ke tema atau plugin Anda, Anda bisa menempatkan kait tindakan ini dimana naskahnya sebenarnya dibutuhkan. Ini memungkinkan Anda mengurangi jejak memori plugin Anda.

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

Styles Enqueue yang Benar di WordPress

Sama seperti skrip, Anda juga bisa menghapus stylesheet Anda. Lihatlah contoh di bawah ini:

1
2
3
4
5
6
7
<?php
function wpb_adding_styles() {
wp_register_style('my_stylesheet', plugins_url('my-stylesheet.css', __FILE__));
wp_enqueue_style('my_stylesheet');
}
add_action( 'wp_enqueue_scripts', 'wpb_adding_styles' ); 
?>

Alih-alih menggunakan wp_enqueue_script, kami sekarang menggunakan wp_enqueue_styleuntuk menambahkan stylesheet kami.

Perhatikan bahwa kita telah menggunakan wp_enqueue_scriptsaction hook untuk kedua gaya dan skrip. Meski namanya, fungsi ini bekerja untuk keduanya.

Pada contoh di atas, kita telah menggunakan plugins_urlfungsi untuk menunjuk ke lokasi script atau style yang ingin kita beri.

Namun, jika Anda menggunakan skrip enqueue berfungsi sesuai tema Anda, cukup gunakan get_template_directory_uri()saja. Jika Anda bekerja dengan tema anak, gunakanlah get_stylesheet_directory_uri().

Berikut adalah contoh kode:

1
2
3
4
5
6
7
8
9
<?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 jacvascript dan gaya dengan benar di WordPress. Anda mungkin juga ingin mempelajari kode sumber plugin WordPress teratas untuk beberapa contoh kode kehidupan nyata.

Leave a Reply

Your email address will not be published. Required fields are marked *