Cara Menambahkan JavaScript Yang Benar di WordPress

Apakah kamu ingin mempelajari cara menambahkan JavaScript dan CSS dengan benar di WordPress? Jika iya, sekarang berada di halaman yang tepat.

Banyak pengguna membuat kesalahan dengan memanggil skrip dan stylesheet mereka di plugin dan tema secara langsung.

Pada artikel ini, kami akan menunjukkan cara menambahkan JavaScript dan stylesheet dengan benar di WordPress. Nantinya ini akan sangat berguna bagi mereka yang baru mulai belajar membangun tema dan plugin di WordPress.

Daftar Isi

Kesalahan Umum Saat Menambahkan Script dan Stylesheet di WordPress

Banyak pengembang plugin dan tema WordPress baru membuat kesalahan dengan langsung menambahkan script atau CSS sebaris ke dalam plugin dan tema mereka.

Beberapa salah dalam menggunakan fungsi wp_head untuk membuat script dan stylesheet.

<?php

add_action('wp_head', 'nulis_bad_script');

function nulis_bad_script() {

echo 'jQuery goes here';

}

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

Misalnya, jika kamu membuat jQuery secara manual dan plugin lain memuat jQuery melalui metode yang benar, maka kamu memiliki jQuery yang di muat dua kali. Jika hal ini dimuat di setiap halaman, maka bisa berdampak buruk pada kecepatan dan kinerja website.

Atau bisa saja kedua kode tersebut menyebabkan konflik.

Karena itu, mari kita lihat bagaimana cara yang tepat untuk menambahkan skrip dan stylesheet di WordPress.

Mengapa Enqueue Script dan Style di WordPress?

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

Dan untuk memastikan semuanya bekerja dengan baik, WordPress memiliki sistem enqueuing. Sistem ini menyediakan cara yang dapat di program untuk memuat JavaScript dan stylesheet.

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

Sistem ini juga memungkinkan pengembang untuk memanfaatkan JavaScript libraries bawaan yang di bundel dengan WordPress daripada memuat script pihak ketiga yang sama beberapa kali. Ini dapat mengurangi waktu buka halaman dan membantu menghindari konflik dengan tema dan plugin lain.

Cara Membuat Enqueue Script dengan Benar di WordPress?

Memuat script dengan benar di WordPress sangat mudah. Di bawah ini adalah contoh kode yang akan kamu tempelkan di file plugins atau file functions.php tema untuk memudahkan dalam memuat script di WordPress dengan benar.

<?php

function nulis_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', 'nulis_adding_scripts' );

Penjelasan:

Kami akan mulai dengan registering script melalui fungsi wp_registering_script(). Fungsi ini menerima 5 parameter.

$handle – handle adalah nama unik dari script kamu. Di sini kami sebut dengan “my_amazing_script”.
$src – src adalah lokasi script. Kami menggunakan fungsi plugins_url untuk mendapatkan URL yang tepat dari folder plugin kami. Setelah WordPress menemukannya, maka ia akan mencari nama file yang kami beri nama amazing_script.js di folder itu.
$deps – deps adalah untuk dependency. Karena skrip kami menggunakan jQuery, kami telah menambahkan jQuery di area dependency. Nantinya WordPress akan secara otomatis memuat jQuery jika belum termuat di situs.
$ver – Ini adalah nomor versi script kami. Parameter ini tidak diperlukan.
$in_footer – Kami ingin memuat script di footer, jadi kami telah menetapkan nilainya menjadi true. Jika kamu ingin memuat script di header, maka kamu harus membuatnya false.

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

Langkah terakhir adalah menggunakan action hook wp_enqueue_script untuk memuat script. Karena ini adalah contoh kode, maka kami telah menambahkannya tepat di bawah yang lainnya.

Jika kamu menambahkan ini ke tema atau plugin, maka kamu dapat menempatkan action hook ini di tempat script sebenarnya di perlukan. Ini memungkinkan kamu untuk mengurangi jejak memori plugin.

Sekarang beberapa orang mungkin bertanya-tanya mengapa kita melakukan langkah ekstra untuk mendaftarkan skrip terlebih dahulu dan kemudian mengantrekannya? Nah, ini memungkinkan pemilik situs lain untuk membatalkan pendaftaran skrip tanpa perlu mengubah kode inti plugins.

Style Enqueue yang Benar di WordPress

Sama seperti script, kamu juga dapat mengantrekan stylesheet. Coba lihat contoh kode di bawah ini:

<?php

function nulis_adding_styles() {

wp_register_style('my_stylesheet', plugins_url('my-stylesheet.css', __FILE__));

wp_enqueue_style('my_stylesheet');

}

add_action( 'wp_enqueue_scripts', 'nulis_adding_styles' );

Alih-alih menggunakan wp_enqueue_script, kita sekarang menggunakan wp_enqueue_style untuk menambahkan stylesheet.

Perhatikan bahwa kami telah menggunakan wp_enqueue_script action hook untuk style dan script. Terlepas dari namanya, fungsi ini berfungsi untuk keduanya.

Dalam contoh kode di atas, kami telah menggunakan fungsi plugins_url untuk menunjuk ke lokasi script atau style yang ingin kami enqueue.

Namun, jika kamu menggunakan fungsi script enqueue di tema, maka gunakan get_template_directory_uri() saja. Sedangkan jika mengaktifkan tema anak, maka gunakan get_stylesheet_directory_uri().

Dan di bawah ini adalah contoh kodenya:

<?php

function nulis_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', 'nulis_adding_scripts' );

Kami harap artikel ini membantu kamu mempelajari cara menambahkan JavaScript dan Stylesheet dengan benar di WordPress.

Semoga panduan di atas bermanfaat. Jika kamu memiliki pertanyaan tinggalkan pada kolom komentar di bawah.