Cara Menambahkan & Menggunakan Script jQuery di WordPress

Elemen halaman interaktif seperti bilah pencarian dinamis, filter produk lanjutan, dan penggeser dapat membuat situs Anda lebih ramah pengguna dan menarik. Tetapi tidak mungkin membuat salah satu dari fitur ini tanpa menggunakan JavaScript atau menginstal plugin WordPress.

Untungnya, Anda dapat dengan mudah membuat elemen desain JavaScript menggunakan jQuery di WordPress. Anda dapat melakukannya secara manual atau menggunakan plugin untuk mempercepat prosesnya.

Dalam posting ini, kami akan memperkenalkan Anda ke jQuery dan mendiskusikan mengapa Anda ingin menggunakannya. Kemudian, kami akan menunjukkan kepada Anda dua cara untuk menambahkan skrip jQuery khusus ke situs WordPress Anda dan meninjau beberapa pertanyaan umum.

Apa itu jQuery? (dan mengapa Anda mungkin ingin menggunakannya)

Sebelum Anda mempelajari cara menambahkan skrip jQuery di WordPress, Anda memerlukan pemahaman dasar tentang jQuery itu sendiri.

Singkatnya, jQuery adalah pustaka JavaScript sumber terbuka yang ringan yang menyederhanakan cara Anda menulis dan menggunakan bahasa pengkodean ini.

Ini memungkinkan Anda untuk dengan mudah memodifikasi dan menyempurnakan tema dan plugin WordPress menggunakan JavaScript. Fitur ini bisa sangat membantu karena JavaScript sangat penting untuk banyak fitur.

Misalnya, Anda memerlukan JavaScript untuk Ajax, penanganan peristiwa, dan transversal/manipulasi DOM. Fungsionalitas Ajax, khususnya, praktis dan populer. Pengembang web menggunakannya untuk membuat pemuatan pencarian instan dan pemfilteran produk e-niaga tingkat lanjut.

Tindakan dari pengguna, seperti klik atau penelusuran, sering kali memicu fitur JavaScript ini. Anda juga memerlukan jQuery untuk membuat fitur sisi klien tambahan seperti penggeser, pop-up lightbox, dan lainnya.

Apakah jQuery termasuk dalam WordPress secara default?

jQuery adalah sumber yang sangat berguna dan populer yang disertakan dalam instalasi WordPress Anda secara default. Anda hanya perlu tahu cara menggunakannya! Di bagian selanjutnya, kami akan mengajari Anda cara melakukan ini.

Apa yang harus dilakukan sebelum menambahkan skrip jQuery ke WordPress

Kami akan segera menjelaskan bagaimana Anda dapat menambahkan skrip jQuery di WordPress. Tetapi pertama-tama, Anda harus melakukan beberapa hal untuk melindungi situs web Anda sebelum mencoba mengubah file intinya.

Yang terpenting, selalu disarankan untuk membuat cadangan situs Anda. Itu karena kesalahan pengkodean sekecil apa pun pada file situs web penting dapat menyebabkan kerusakan serius. Saat Anda membuat cadangan, Anda dapat dengan mudah memulihkan situs Anda ke keadaan sebelumnya dalam keadaan darurat.

Jika Anda tidak yakin cara mencadangkan situs WordPress Anda, atau Anda hanya mencari alat untuk merampingkan prosesnya, Pencadangan Jetpack VaultPress adalah pilihan yang sangat baik.

Jetpack VaultPress Backup secara otomatis menyimpan setiap perubahan di situs Anda. Kemudian Anda dapat menggunakan pemulihan sekali klik untuk memulihkan konten Anda dengan cepat. Jetpack bahkan memungkinkan Anda memulihkan situs dari aplikasi seluler Jetpack. Selain itu, jika Anda mengalami masalah apa pun, Anda bisa mendapatkan bantuan dari dukungan pelanggan terbaik di kelasnya — Happiness Engineers!

Untuk lebih melindungi situs web Anda, ada baiknya juga membuat situs pementasan WordPress. Kemudian, Anda dapat menguji perubahan Anda sebelum mendorongnya secara langsung.

Bagaimana cara menambahkan skrip jQuery khusus ke WordPress

Sekarang setelah Anda mengetahui lebih banyak tentang jQuery dan menyiapkan situs Anda untuk perubahan besar, mari kita bahas dua cara untuk menambahkan skrip jQuery khusus ke WordPress!

Metode 1: Tambahkan jQuery secara manual

Pertama, kami akan menunjukkan cara menambahkan jQuery ke WordPress secara manual. Metode ini mungkin cocok untuk Anda jika Anda memiliki pengalaman pengembangan dan ingin kontrol penuh atas prosesnya.

Sebaiknya gunakan tema anak sehingga setiap perubahan yang Anda buat tidak akan ditimpa saat Anda memperbarui tema.

Langkah 1: Masuk ke Mode Kompatibilitas

Salah satu hal hebat tentang jQuery adalah memungkinkan Anda menggunakan beberapa pintasan yang sudah dikenal saat membuat kode. Terutama, Anda dapat menggunakan simbol $ untuk mewakili jQuery. Ini dapat menghemat banyak waktu Anda, tetapi beberapa perpustakaan lain menggunakan pintasan ini untuk merepresentasikan sesuatu yang berbeda.

Oleh karena itu, Anda ingin masuk ke Mode Kompatibilitas dan membuat alias unik untuk jQuery. Dengan cara ini, Anda akan menghindari konflik dengan perpustakaan lain.

Anda dapat melakukannya menggunakan kode berikut:

 <!-- Putting jQuery into no-conflict mode. --> http://prototype.js http://jquery.js <script> var $j = jQuery.noConflict(); // $j is now an alias to the jQuery function; creating the new alias is optional. $j(document).ready(function() {    $j( "div" ).hide(); }); // The $ variable now has the prototype meaning, which is a shortcut for // document.getElementById(). mainDiv below is a DOM element, not a jQuery object. window.onload = function() {    var mainDiv = $( "main" ); } </script>

Saat Anda menjalankan skrip di atas, Anda dapat menggunakan $j sebagai pintasan alih-alih $. Atau, Anda dapat menggunakan yang berikut ini:

 <!-- Loading jQuery before other libraries. --> http://jquery.js http://prototype.js <script> // Use full jQuery function name to reference jQuery. jQuery( document ).ready(function() {    jQuery( "div" ).hide(); }); // Use the $ variable as defined in prototype.js window.onload = function() {    var mainDiv = $( "main" ); }; </script>

Cuplikan kode ini hanya akan mencegah konflik apa pun. Tetap saja, Anda harus menggunakan nama lengkap, jQuery, bukan pintasan.

Langkah 2: Buat file skrip

Sekarang setelah Anda memiliki kode yang diperlukan, Anda siap membuat file skrip. Buat file dan beri nama deskriptif seperti "my_new_script_file.js". Pastikan untuk menggunakan ekstensi .js dan tambahkan cuplikan kode kompatibilitas pilihan Anda di bagian atas.

Pada titik ini, Anda harus mengakses dan mengedit file tema Anda, yang memiliki folder unik di dalam file situs web Anda.

Mulailah dengan menghubungkan ke situs web Anda menggunakan pengelola file atau klien File Transfer Protocol (FTP) gratis seperti FileZilla.

Kemudian, buka direktori root Anda. Ini harus diberi nama seperti public_html atau hanya public . Alternatifnya, itu bisa saja nama situs web Anda.

Selanjutnya, cari folder tema aktif Anda dan buat subfolder baru. Sebut saja /js/ .  

Terakhir, tambahkan file skrip baru Anda ke subfolder ini. Isinya akan berbeda tergantung pada fitur yang Anda coba terapkan.

Langkah 3: Tambahkan skrip jQuery ke file functions.php Anda

Selanjutnya, Anda harus mencari file functions.php tema Anda. Tema orang tua dan anak harus memiliki satu. Di sinilah semua penyesuaian manual terjadi.

Karena JavaScript memerlukan enqueuing, Anda harus menggunakan fungsi wp_enqueue_script() . Kode Anda mungkin terlihat seperti ini:

 function my_theme_scripts() {    wp_enqueue_script( 'my_new_script_file', get_template_directory_uri() . '/js/my_new_script_file.js', array( 'jquery' ), '1.0.0', true ); } add_action( 'wp_enqueue_scripts', 'my_theme_scripts' );

Pastikan untuk mengganti nama file skrip unik Anda dan menambahkannya ke functions.php . Ini akan memberi tahu file tema Anda untuk menggunakan file skrip yang Anda buat pada langkah sebelumnya.

Metode 2: Tambahkan jQuery dengan plugin WordPress

Seperti yang baru saja kita lihat, menambahkan jQuery secara manual dapat memakan waktu dan sedikit berisiko, terutama jika Anda tidak terbiasa mengedit kode di WordPress. Jadi, sekarang kami akan menunjukkan cara menambahkan jQuery dengan plugin WordPress.

Langkah 1: Instal plugin jQuery

Pertama, Anda harus memilih plugin jQuery. Dua opsi yang paling populer adalah Simple Custom CSS and JS dan Advanced Custom Fields.

Untuk tutorial ini, kami akan menggunakan Bidang Kustom Lanjutan. Alat ini membantu Anda membuat fitur yang menarik dan interaktif dengan jenis blok khusus.

Versi gratisnya memiliki banyak jenis blok yang berguna untuk menambahkan elemen seperti grup tombol, Google Maps, pemilih warna, oEmbed, dan banyak lagi. Namun, jika Anda menginginkan semua 30 blok khusus, Anda harus meningkatkan ke versi berbayar dari Bidang Kustom Tingkat Lanjut.

Setelah Anda memilih paket pilihan Anda, cukup instal dan aktifkan plugin seperti biasanya. Tambahkan kunci lisensi apa pun di bawah pengaturan plugin Anda.

Langkah 2: Buat bidang khusus baru

Setelah Anda menginstal dan mengaktifkan plugin, buka Custom Fields → Add New .

Di sini, Anda harus membuat grup bidang pertama Anda. Beri judul di sebelah Add New Field Group . Kemudian, klik Simpan Perubahan .

Sekarang, Anda dapat mulai mengedit kolom baru. Anda dapat memperluas opsi dengan mengklik Edit di bawah label.

Pertama, buka menu dropdown untuk Field Type, dan pilih salah satu.

Kemudian isi Field Label , Field Name , dll. Jika Anda terus menggulir ke bawah, Anda dapat mengubah pengaturan tambahan seperti Location Rules dan Presentation .

Bergantung pada lokasi yang Anda pilih, Anda akan dapat melihat blok kustom baru Anda di sana. Di Editor Blok, Anda dapat mengidentifikasi blok dengan label yang Anda tentukan di bawah Label Bidang .

Setelah selesai, klik Simpan Perubahan . Anda dapat memilih tombol + Tambahkan Bidang dan ulangi proses ini. Setelah itu, cukup pergi ke salah satu lokasi yang Anda pilih untuk bidang Anda dan mulailah menyesuaikannya!

Cara menunda jQuery di WordPress

Seperti yang telah kita bahas, ada banyak alasan untuk menggunakan JavaScript dan jQuery di WordPress. Faktanya, mereka sangat penting untuk fitur interaktif tertentu yang dianggap biasa oleh banyak pengguna.

Namun sisi negatifnya adalah elemen sisi klien yang canggih ini mungkin memperlambat situs web Anda. Jadi, Anda mungkin ingin menunda JavaScript secara otomatis (dan, dengan ekstensi, jQuery) saat situs WordPress Anda dimuat.

Dengan menunda JavaScript, semua elemen utama di situs Anda akan dimuat sebelum fitur JavaScript yang kurang penting. Tentu saja, pengunjung situs Anda mungkin tidak akan menyadari hal ini terjadi, tetapi kemungkinan akan meningkatkan pengalaman pengguna (UX) mereka karena halaman akan tampak dimuat lebih cepat.

Jika Anda ingin menunda jQuery secara otomatis di situs web Anda, Anda dapat menggunakan Jetpack Boost untuk melakukannya.

Plugin ini secara drastis dapat meningkatkan kinerja situs web Anda secara keseluruhan. Hasilnya, Anda dapat mempertahankan semua fitur JavaScript pilihan Anda tanpa mengurangi kecepatan halaman.

Selain menunda JavaScript yang tidak penting, Jetpack Boost dapat mengoptimalkan pemuatan CSS dan menerapkan pemuatan gambar lambat (di antara pengoptimalan kinerja lainnya). Dengan alat ini, Anda dapat meningkatkan skor Data Web Inti dan meningkatkan keterlihatan situs Anda di hasil penelusuran.

Pertanyaan yang sering diajukan tentang jQuery di WordPress

Mudah-mudahan, kami telah mengklarifikasi sebagian besar keraguan Anda tentang jQuery di WordPress. Namun, jika kami melewatkan sesuatu, inilah beberapa pertanyaan umum!

Bisakah Anda mengubah versi jQuery yang digunakan di WordPress?

Terkadang tema dan plugin dapat mengganti atau menambahkan versi jQuery ke situs Anda. Oleh karena itu, penting untuk memastikan bahwa versi Anda selalu mutakhir. Anda dapat dengan mudah melakukannya menggunakan plugin seperti jQuery Updater atau Version Control untuk jQuery.

Di mana saya dapat memeriksa versi jQuery di situs WordPress saya?

Anda biasanya dapat memeriksa versi jQuery Anda di browser. Di Google Chrome, cukup navigasikan ke situs web Anda di ujung depan. Lalu, buka Lihat → Pengembang → Konsol JavaScript.

Masukkan jQuery.fn.jquery, dan konsol akan mengembalikan versi situs Anda saat ini.

Bisakah Anda menghapus jQuery sepenuhnya dari WordPress?

Jawaban singkatnya adalah: ya. Jika Anda menemukan bahwa menggunakan JavaScript di situs Anda berdampak negatif pada kinerjanya, Anda mungkin ingin menghapus atau 'membatalkan pendaftaran' jQuery.

Untuk melakukannya, cukup tambahkan kode berikut ke file functions.php Anda:

 // Remove jQuery function vpsb_remove_jquery() {    if (!is_admin()) {        wp_deregister_script('jquery');        wp_register_script('jquery', false);    } } add_action('init', 'vpsb_remove_jquery');

Ingatlah bahwa Anda hanya boleh menghapus jQuery sepenuhnya dari situs Anda jika itu memperlambat halaman Anda secara drastis. Ini sepertinya tidak akan terjadi, karena jQuery sudah mengoptimalkan kode JavaScript yang lebih berat.

Jika kecepatan situs Anda memburuk setelah menambahkan jQuery, alternatif yang lebih baik adalah menggunakan solusi seperti Jetpack Boost. Itu dapat menunda JavaScript yang tidak penting.

Bisakah Anda mengganti jQuery dengan vanilla JavaScript?

Dimungkinkan untuk mengganti jQuery dengan JavaScript vanilla. Tapi, itu mungkin terbukti menantang jika Anda tidak memiliki banyak pengalaman pengembangan. Jadi, Anda harus mempertimbangkan untuk menyewa pengembang jika Anda perlu melakukan ini.

Sekali lagi, perlu diperhatikan bahwa mengganti jQuery dengan JavaScript vanilla mungkin tidak diperlukan karena jQuery sudah menyediakan kode JavaScript yang optimal. Sebagian besar waktu, efek kecil kinerja jQuery biasanya sebanding dengan masalahnya, dan penundaan biasanya merupakan opsi yang lebih baik.

Jika Anda memutuskan untuk mengikuti rute ini, ada baiknya Anda memeriksa panduan ini untuk menambahkan JavaScript ke WordPress. Ini dapat membantu Anda dengan prosesnya.

Menggunakan jQuery di WordPress

Menggunakan JavaScript yang kompleks untuk fitur yang menarik di situs Anda dapat meningkatkan UX secara drastis dan memajukan tujuan Anda. Sayangnya, Anda mungkin tidak memiliki waktu atau keterampilan pengembangan untuk membuat elemen interaktif ini dari awal. Kabar baiknya adalah Anda dapat menggunakan skrip jQuery untuk mempermudah proses ini.

Singkatnya, ada dua cara Anda dapat menambahkan jQuery ke WordPress. Pertama, Anda dapat melakukannya secara manual dengan masuk ke Mode Kompatibilitas dan membuat file skrip. Kemudian, tambahkan skrip baru Anda ke file functions.php Anda. Alternatifnya, Anda bisa menggunakan plugin seperti Advanced Custom Fields untuk mempercepat proses dan menghilangkan kebutuhan akan pengkodean manual.

Saat Anda menggunakan jQuery untuk menambahkan elemen desain canggih ke situs web Anda, Anda dapat meningkatkan UX dan mengesankan pengunjung Anda. Namun beberapa fitur interaktif dapat merusak performa halaman web Anda. Untungnya, Jetpack Boost dapat membantu mengoptimalkan kecepatan situs Anda.