WordPress telah menjadi bagian dari hidup kita selama lebih dari 16 tahun, tetapi metode menambahkan skrip ke tema dan plugin tetap menjadi misteri bagi banyak pengembang. Pada artikel ini, kami akhirnya mengakhiri kebingungan tersebut.
Karena ini adalah salah satu perpustakaan JavaScript yang paling banyak digunakan, hari ini kita membahas cara menambahkan skrip jQuery ke tema Anda atau plugin WordPress.
Tentang mode kompatibilitas jQuery
Sebelum Anda mulai menambahkan skrip ke WordPress, penting untuk memahami mode kompatibilitas jQuery.
Seperti yang Anda ketahui, WordPress hadir dengan jQuery yang sudah disertakan.
Versi jQuery di WordPress juga memiliki " mode kompatibilitas », Yang merupakan mekanisme untuk menghindari konflik dengan perpustakaan javascript lainnya.
Bagian dari mekanisme pertahanan ini berarti Anda ne pouvez pas gunakan $menandatangani secara langsung seperti yang Anda lakukan di proyek lain.
Sebaliknya, saat menulis kode jQuery untuk WordPress, Anda harus menggunakan jQuery.
Berikut ini contoh kode itu:
/ * JQuery régulier * /
$ ( '.hideable' ).on( 'click' , function () {
$ ( this ).hide();
})
/ * Mode de compatibilité * /
jQuery ( '.hideable' ).on( 'click' , function () {
jQuery( this ).hide();
})
Masalahnya, menulis jQuery sejuta kali membutuhkan waktu lebih lama, membuatnya lebih sulit untuk dibaca, dan dapat membebani skrip Anda.
Berita baiknya?
Dengan beberapa modifikasi, Anda dapat kembali menggunakan simbol dolar kecil kami yang lucu.
Omong-omong, jika Anda baru di jQuery , tanda $ hanyalah alias untuk jQuery (), lalu alias untuk fungsi.
Struktur dasarnya terlihat seperti ini: $(selector).action(). Tanda dolar mendefinisikan jQuery… query “(selector)” atau menemukan elemen HTML… dan terakhir “jQuery () action” adalah tindakan yang akan dilakukan pada elemen.
Kembali ke cara kami mengatasi masalah kompatibilitas kami ... berikut adalah beberapa opsi yang dapat digunakan:
1.Masukkan mode jQuery stealth
Cara pertama untuk menyiasati mode kompatibilitas adalah dengan menyelinap masuk ke dalam kode.
Misalnya, jika Anda memuat skrip di footer, Anda dapat membungkus kode Anda dalam fungsi anonim, yang akan memetakan jQuery $.
Seperti pada contoh di bawah ini:
( fonction ( $ ) {
$ ( '.hideable' ).on( 'click' , function () {
$ ( this ).hide();
})
}) (jQuery);
Jika Anda ingin menambahkan skrip Anda di tajuk (yang harus Anda hindari jika memungkinkan, lebih dari itu di bawah), Anda dapat membungkus semuanya dalam fungsi siap dokumen, meneruskan $di sepanjang jalan.
jQuery( document ).ready( function( $ ) {
$ ( '.hideable' ).on( 'click' , function () {
$ ( this ).hide();
})
});
2. Masuk ke mode "Tanpa Konflik"
Cara mudah lain untuk menghindari mengeja jQuery adalah dengan beralih ke mode "Bebas konflik" dan gunakan jalan pintas yang berbeda.
Dalam hal ini: $jbukannya default $.
Yang harus Anda lakukan adalah mendeklarasikannya di bagian atas skrip Anda:var $j = jQuery.noConflict();
Oke, sekarang Anda tahu lebih banyak tentang menulis kode jQuery yang valid untuk WordPress, mari tambahkan ke kami situs jaringan.
Bagaimana cara menambahkan skrip jQuery ke WordPress
Salah satu cara termudah untuk menambahkan skrip jQuery ke WordPress adalah melalui proses yang disebut 'pengaturan antrian tunggu '.
Sebagai contoh, situs jaringan HTML klasik, kami akan menggunakan <link> item untuk menambahkan skrip. WordPress akhirnya melakukan hal yang sama, tetapi kami akan menggunakan fungsi WP khusus untuk mencapai ini.
Dengan cara ini, ia mengelola semua dependensi kami untuk kami (terima kasih WP!).
Jika Anda sedang mengerjakan suatu tema, Anda dapat menggunakan fungsinya wp_enqueue_script() di Anda functions.php File.
Begini tampilannya:
function my_theme_scripts () {
wp_enqueue_script('mon-grand-script', get_template_directory_uri(). '/js/my-great-script.js', array('jquery'), '1.0.0', true);
}
add_action('wp_enqueue_scripts', 'my_theme_scripts');
Fungsi ini membutuhkan lima argumen:
- $ handle - pegangan unik yang dapat Anda gunakan untuk merujuk ke skrip.
- $src – lokasi file skrip.
- $ deps - menentukan larik dependensi.
- $ ver - nomor versi skrip Anda.
- $ in_footer - beri tahu WordPress di mana harus meletakkan skrip.
* Satu hal yang perlu diperhatikan $in_footer artinya secara default skrip akan dimuat di header.
Ini adalah praktik yang buruk dan dapat memperlambat situs Anda secara signifikan. Oleh karena itu, jika Anda ingin menempatkan skrip Anda di footer, pastikan parameter ini disetel ke true.
Menambahkan skrip ke administrator WordPress
Anda juga dapat menambahkan skrip ke administrator. Fungsi yang digunakan sama persis, Anda hanya perlu menggunakan hook yang berbeda.
exemple Par:
function my_admin_scripts() {
wp_enqueue_script ('skrip-besar-saya', plugin_dir_url (__FILE__). '/js/my-great-script.js', array ('jquery'), '1.0.0', true);
}
add_action ('admin_enqueue_scripts', 'my_admin_scripts');
Alih-alih masuk, wp_enqueue_scriptskita harus menggunakan admin_enqueue_scripts.
Cara berhenti berlangganan jQuery dari WordPress
Tetapi bagaimana jika Anda ingin menggunakan versi jQuery yang berbeda dari yang dimuat oleh WordPress?
Anda dapat mengantrekannya… tetapi itu berarti akan ada dua versi jQuery di halaman.
Untuk menghindarinya, kita perlu membatalkan registrasi versi WP.
Begini tampilannya:
// termasuk jQuery khusus
fungsi shapeSpace_include_custom_jquery () {
wp_deregister_script ('jquery');
wp_enqueue_script(
'jquery',
'https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js',
array(),
null,
true);
}
add_action ('wp_enqueue_scripts', 'shapeSpace_include_custom_jquery');Semudah menggunakan wp_deregister_script () untuk unregister jQuery dari WP, lalu sertakan skrip jQuery yang ingin Anda tambahkan.
Dalam contoh di atas, kami menggunakan Perpustakaan jQuery di-host oleh Google , tetapi Anda jelas akan menggantinya dengan URL skrip Anda sendiri.
Tidakkah sebaiknya Anda menyimpan skrip sebelum mengantri?
Jika Anda ingin memuat skrip sesuai kebutuhan alih-alih memuatnya langsung ke laman Anda - Anda dapat menyimpan skrip sebelumnya.
Misalnya, pada wp_loaded:
add_action ('wp_loaded', 'register_all_scripts');
fonction register_all_scripts () {
wp_register_script (…);
}
Setelah Anda selesai melakukannya, Anda kemudian dapat mengantrekan skrip saat Anda membutuhkannya:
| add_action ('wp_enqueue_scripts', 'enqueue_front_scripts'); |
| add_action ('admin_enqueue_scripts', 'enqueue_back_scripts'); |
Ingatlah untuk menggunakan nama yang sama untuk menghindari bertabrakan dengan skrip lain.
Menggunakan tag bersyarat
Gunakan tag bersyarat untuk memuat skrip Anda hanya saat diperlukan.
Ini lebih sering digunakan di admin, di mana Anda ingin menggunakan skrip pada halaman tertentu saja (dan tidak di seluruh admin). Ini juga menghemat bandwidth dan waktu pemrosesan, yang berarti waktu muat lebih cepat untuk Anda situs jaringan.
Lihatlah dokumentasi skrip antrian di WordPress Codex untuk informasi lebih lanjut.
Tambahkan jQuery ke WordPress menggunakan plugin
Direktori plugin WP juga berisi banyak plugin menarik yang dapat Anda gunakan untuk memasukkan skrip ke dalam posting, halaman, atau Tema WordPress.
Berikut beberapa contoh plugin JavaScript / jQuery yang terkenal: bidang khusus lanjutan , CSS dan JS kustom sederhana , gaya skrip n et pembersihan sumber daya.
Buat proyek jQuery Anda sendiri
Pemahaman yang lebih baik tentang jQuery hanya akan membuat pekerjaan Anda lebih berdampak. Baik untuk situs web Anda sendiri atau untuk proyek klien.
jQuery terkenal karena kesederhanaannya, dan seperti yang Anda (semoga) pelajari di artikel ini, menambahkan skrip jQuery sederhana ke WordPress sangatlah mudah begitu Anda tahu caranya.
Ya, ada sedikit biaya tambahan dibandingkan dengan menggunakan vanilla HTML, tetapi ada juga keuntungan tambahan dari manajemen ketergantungan dan kejelasan.
Tidak hanya itu, dengan menggunakan trik kecil seperti melewati kompatibilitas default jQuery WP, Anda akan menghemat banyak waktu, tenaga, dan kode yang membengkak.
