Loncat ke Konten Utama

Bagaimana benar menambahkan kode jQuery di WordPress

Divi: tema WordPress termudah untuk digunakan

Divi: Tema WordPress terbaik sepanjang masa!

lebih 901.000 unduhan, Divi adalah tema WordPress paling populer di dunia. Sudah lengkap, mudah digunakan dan dilengkapi dengan lebih dari 62 template gratis. [Direkomendasikan]

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 pustaka JavaScript yang paling banyak digunakan, hari ini kita membahas cara menambahkan skrip jQuery ke tema atau plugin WordPress Anda.

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:

Buat situs web Anda dengan Elementor dengan mudah

Elementor memungkinkan Anda untuk dengan mudah membuat desain situs web apa pun dengan tampilan profesional. Berhentilah membayar mahal untuk apa yang dapat Anda lakukan sendiri. [Gratis]

( 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 situs web kita.

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 '.

Untuk situs web 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:

  1. $ handle - pegangan unik yang dapat Anda gunakan untuk merujuk ke skrip.
  2. $ src - lokasi file script.
  3. $ deps - menentukan larik dependensi.
  4. $ ver - nomor versi skrip Anda.
  5. $ 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.

Apakah Anda mencari tema dan plugin WordPress terbaik?

Unduh plugin terbaik dan tema WordPress di Envato dan buat situs web Anda dengan mudah. Sudah lebih dari 49.720.000 unduhan. [EKSKLUSIF]

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 dalam administrasi, di mana Anda ingin menggunakan skrip hanya pada halaman tertentu (dan bukan di seluruh administrasi). Ini juga menghemat bandwidth dan waktu pemrosesan yang berarti waktu muat lebih cepat untuk situs web Anda.

Lihatlah dokumentasi skrip antrian  di WordPress Codex untuk informasi lebih lanjut.

Buat Toko Online Anda dengan mudah

Unduh WooCommerce gratis, plugin e-commerce terbaik untuk menjual produk fisik dan digital Anda di WordPress. [Rekomendasi]

Tambahkan jQuery ke WordPress menggunakan plugin

Direktori WP plugin juga berisi banyak plugin menarik yang dapat Anda gunakan untuk menyisipkan skrip ke publikasi WordPress Anda, halaman atau tema.

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.

Artikel ini berisi komentar 0

Tinggalkan komentar

Alamat email Anda tidak akan dipublikasikan. Bidang yang harus diisi ditandai *

Situs ini menggunakan Akismet untuk mengurangi yang tidak diinginkan. Pelajari lebih lanjut tentang bagaimana data komentar Anda digunakan.

Kembali ke atas