Cara Menambahkan Skrip jQuery Ke WordPress Dengan Mudah

WordPress telah ada di sekitar kita selama lebih dari satu dekade sekarang. Meskipun platform ini terkenal luas karena kemudahan aksesnya, menambahkan jQuery di tema dan plugin WordPress menjadi perhatian banyak pengembang.

Kami sebelumnya telah menulis panduan untuk memperbaiki masalah seperti layar putih kematian WordPress dan menempatkan situs WordPress Anda ke mode pemeliharaan. Dan dalam bagian ini, kami akan menjelaskan cara menambahkan jQuery ke WordPress, tetapi sebelum kita menyelami hal itu, berikut adalah ikhtisar singkat tentang mode Kompatibilitas jQuery.

Mode Kompatibilitas jQuery

Sama pentingnya untuk memahami apa itu mode kompatibilitas jQuery sebelum mulai menggunakan jQuery di WordPress.

jQuery di WordPress sudah dimuat sebelumnya, dan Anda dapat menggunakannya dalam kode Anda. Namun, intinya di sini adalah ia juga dilengkapi dengan mode kompatibilitas jQuery, yang menghindari konflik dengan perpustakaan lain dari bahasa pemrograman yang berbeda.

Meskipun ini mungkin terdengar cukup normal tetapi ada sedikit masalah dengan mekanisme pertahanan ini. Saat menggunakan jQuery di WordPress, Anda harus menggunakan istilah " jQuery " daripada tanda $ lama kami yang bagus.

Lihat contoh ini.

/* jQuery biasa */

$('.hideable').on('klik', function() {

$(ini).sembunyikan();

})

/* Mode Kompatibilitas */

jQuery('.hideable').on('klik', function() {

jQuery(ini).sembunyikan();

})

Sekarang masalahnya di sini tidak terlalu besar, tetapi tidak terlalu menyenangkan. Pertama, Anda perlu menulis " jquery " setiap saat, yang memakan banyak waktu, dan kedua, ini membuat skrip Anda terlihat berantakan dan sulit dibaca.

Tapi jangan khawatir, dengan beberapa modifikasi, Anda dapat mengatasi masalah kompatibilitas dan dapat menggunakan tanda $ lama yang bagus.

Untuk referensi, $ adalah alias untuk jQuery() dan pegangan untuk suatu fungsi.

Berikut adalah bagaimana struktur dasar terlihat.

$(pemilih).aksi()

Di sini, tanda $ merujuk ke jQuery, $(selector) menemukan elemen HTML, dan action() mendefinisikan tindakan yang akan dilakukan pada elemen ini.

Berikut adalah beberapa teknik yang dapat Anda manfaatkan untuk mengatasi masalah kompatibilitas jQuery.

Bagaimana Mengatasi Masalah Kompatibilitas jQuery?

1. Masuk ke Mode "jQuery Stealth"
2. Masuk ke Mode “Tanpa Konflik”

Masuk ke Mode Stealth jQuery

Sumber gambar: Podfeet

Cara pertama dan paling umum untuk mengatasi masalah kompatibilitas adalah dengan memasuki mode siluman (menjadi sembunyi-sembunyi dengan kode Anda).

Katakanlah Anda mencoba memuat skrip di footer. Bungkus kode dalam fungsi anonim, yang pada akhirnya akan memetakan jQuery ke $.

Lihat contoh ini

(fungsi($) {

$('.hideable').on('klik', function() {

$(ini).sembunyikan();

})

})(jquery );

Sekarang, jika Anda ingin menambahkan skrip di header, bungkus semuanya dalam fungsi dokumen-siap, dan berikan $ di sepanjang jalan.

Berikut adalah contoh.

jQuery(dokumen).siap(fungsi( $) {

$('.hideable').on('klik', function() {

$(ini).sembunyikan();

})

});

Masuk ke Mode Tanpa Konflik

Sekarang ini adalah cara yang cukup sederhana untuk mengatasi masalah kompatibilitas. Yang harus Anda lakukan adalah mendeklarasikan baris kode ini di atas skrip Anda, dan Anda dapat menggunakan $j alih-alih tanda $ default.

var $j = jQuery.noConflict();

Sekarang setelah Anda tahu cara menggunakan jQuery di WordPress, mari beralih ke subjek utama kami – cara menambahkan skrip jQuery ke situs WordPress Anda.

Cara Menambahkan jQuery Ke Situs WordPress

Sumber gambar: fl1digital.com

Menambahkan jQuery ke WordPress dapat dilakukan dengan mudah melalui proses yang disebut Enqueueing .

Kami menggunakan elemen <link> untuk menambahkan skrip di situs web HTML biasa. Kita juga bisa melakukan hal yang sama di WordPress. Namun, kita perlu memainkan beberapa fungsi khusus WordPress untuk masuk ke dalamnya. Perhatikan bahwa melakukan ini akan menangani semua dependensi untuk Anda.

Katakanlah Anda sedang mengerjakan tema WordPress. Gunakan fungsi ini di file functions.php Anda.

wp_enqueue_script()

Berikut tampilannya.

function my_theme_scripts() {

wp_enqueue_script( 'my-great-script', get_template_directory_uri() . '/js/my-great-script.js', array( 'jquery' ), '1.0.0', true );

}

add_action( 'wp_enqueue_scripts', 'my_theme_scripts' );

Berikut adalah lima argumen yang akan diambil oleh fungsi ini.

1. $handle: pegangan unik yang dapat digunakan untuk merujuk ke skrip
2. $src: lokasi file skrip Anda
3. $deps: digunakan untuk menentukan larik dependensi
4. $ver: nomor versi skrip
5. $in_footer: untuk menginstruksikan WordPress di mana menempatkan skrip

Secara default, skrip akan dimuat di header situs web Anda, yang tidak disarankan karena sangat memengaruhi kecepatan situs Anda.

Terkait: Panduan Utama Anda tentang Cara Mengedit WordPress – HTML, CSS, PHP, JavaScript

Cara Menambahkan Skrip jQuery ke Admin WordPress

Anda dapat menambahkan jQuery ke admin WordPress menggunakan fungsi yang sama. Yang harus Anda lakukan di sini adalah menggunakan kail yang berbeda.

Berikut contohnya

fungsi my_admin_scripts() {

wp_enqueue_script( 'my-great-script', plugin_dir_url( __FILE__ ) . '/js/my-great-script.js', array( 'jquery' ), '1.0.0', true );

}

add_action( 'admin_enqueue_scripts', 'my_admin_scripts' );

Sekarang cukup tukar wp_enqueue_scripts dengan admin_enqueue_scripts dan Anda siap melakukannya.

Cara De-Register jQuery Di WordPress

Anda harus membatalkan pendaftaran jQuery WordPress jika Anda ingin menggunakan versi jQuery yang berbeda dari pramuat.

Berikut adalah contoh bagaimana Anda dapat membatalkan pendaftaran jQuery di WordPress.

// sertakan 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');

Itu mudah. Yang perlu Anda lakukan adalah membatalkan pendaftaran jQuery WordPress menggunakan wp_deregister_script() dan menyertakan skrip yang Anda inginkan.

Satu hal yang perlu diingat di sini adalah bahwa kami telah menambahkan perpustakaan jQuery yang dihosting Google dalam contoh ini. Anda perlu menggantinya dengan URL skrip Anda sendiri.

Haruskah Anda Mendaftarkan Script Sebelum Enqueuing?

Anda dapat mendaftarkan skrip lebih awal dalam proses jika Anda ingin skrip dimuat hanya saat dibutuhkan di halaman Anda.

Berikut contohnya

add_action('wp_loaded', 'register_all_scripts');

fungsi register_all_scripts()

{

wp_register_script(…);

}

Setelah Anda selesai dengan ini, enqueue skrip saat Anda membutuhkannya. Begini caranya.

add_action( 'wp_enqueue_scripts', 'enqueue_front_scripts');

add_action( 'admin_enqueue_scripts', 'enqueue_back_scripts');

Menggunakan Tag Bersyarat

Anda juga dapat menggunakan tag kondisional untuk hanya memuat jQuery Anda di WordPress bila diperlukan.

Meskipun metode ini biasanya digunakan di Admin di mana Anda menginginkannya hanya pada halaman tertentu, metode ini menghemat banyak bandwidth dan waktu pemrosesan, yang pada akhirnya meningkatkan kecepatan pemuatan situs Anda.

Lihat dokumentasi skrip enqueuer admin WordPress untuk informasi lebih lanjut tentang penggunaan tag tambahan.

Cara Menambahkan jQuery Ke WordPress Menggunakan Plugin

WordPress membanggakan direktori plugin lebih dari 45000 plugin. Anda dapat menemukan plugin untuk fungsionalitas apa pun yang Anda inginkan di situs WordPress Anda.

Hal yang sama untuk menambahkan jQuery di halaman situs WordPress, tema, dan posting, dll.

Berikut adalah beberapa plugin paling populer untuk menambahkan jQuery ke WordPress.

• Bidang Kustom Tingkat Lanjut
• CSS dan JS Kustom Sederhana
• Script N Styles
• Pembersihan Aset

Kesimpulan

Jadi begitulah. Sekarang Anda tahu cara menambahkan dan menggunakan WordPress jQuery.

Menerapkan pengetahuan ini ke proyek Anda akan membantu Anda membuat proyek hebat. Anda juga dapat membaca panduan definitif kami tentang subjek seperti JPG vs. JPEG dan WordPress White Label untuk meningkatkan pengetahuan Anda.