4 Cara Efektif untuk Memperbaiki Error kode jQuery di WordPress

Photo By Tim Gouw on Unsplash

Sekitar 80% dari semua situs web menggunakan jQuery – jika situs WordPress kamu termasuk salah satunya, mungkin kamu pernah mengalami kesalahan “Uncaught ReferenceError: jQuery is not defined” di beberapa titik, dan kamu harus memperbaiki error kode jQuery tersebut.

Pesan kesalahan ini menunjukkan bahwa situs kamu tidak dapat memanggil fungsi dari JavaScript jQuery, terutamanya yang menyebabkan beberapa elemen situs web tidak berfungsi atau berhenti berjalan.

Pada artikel ini, kita akan membahas empat metode untuk memperbaiki kesalahan umum pada jQuery bagi pengguna WordPress.

Berikut ini beberapa kemungkinan penyebab yang dapat memicu error “Uncaught ReferenceError: jQuery is not defined” di situs WordPress, diantaranya :

• Terdapat plugin yang bentrok. Plugin yang baru saja diaktifkan mungkin memiliki variabel jQuery yang bentrok dengan salah satu plugin lama kamu. Selain itu, plugin yang tidak dilakukan pembaruan (update) dapat menyebabkan kesalahan jQuery.
• jQuery yang diblokir CDN. Jika kamu menggunakan jQuery yang dihosting CDN seperti Google Hosted Libraries, jQuery tersebut mungkin tidak dapat diakses atau diblokir dari server karena banyaknya permintaan.
• File jQuery rusak. Hal ini biasanya terjadi saat mengunduh file dari situs web yang tidak dapat dipercaya atau memiliki keamanan yang kurang.
• JavaScript berjalan tidak semestinya. JavaScript kamu berjalan sebelum kode jQuery dimuat sepenuhnya, yang menyebabkan situs web kamu memanggil fungsi yang belum ditetapkan.

Sekarang setelah kamu memahami bagaimana kesalahan “Referensi Tidak Tertangkap: jQuery tidak ditentukan” terjadi, sekarang saatnya untuk men-debug situs WordPress kamu. Ada 4 solusi yang akan kita bahas untuk memperbaiki masalah ini :

1. Tambahkan Cuplikan ke File wp-config.php

Cara pertama dan paling efektif untuk memperbaiki kesalahan “jQuery tidak ditentukan” adalah dengan menentukan jalur file (ABSPATH) di file inti WordPress. Masukkan cuplikan kode berikut ke file wp-config.php melalui File Manager.

Plain text
Copy to clipboard
Open code in new window
EnlighterJS 3 Syntax Highlighter
/** Absolute path to the WordPress directory. */
if ( !defined('ABSPATH') )
define('ABSPATH', dirname(__FILE__) . '/');
define('CONCATENATE_SCRIPTS', false);
/** Absolute path to the WordPress directory. */ if ( !defined('ABSPATH') ) define('ABSPATH', dirname(__FILE__) . '/'); define('CONCATENATE_SCRIPTS', false);

/** Absolute path to the WordPress directory. */ if ( !defined('ABSPATH') ) define('ABSPATH', dirname(__FILE__) . '/'); define('CONCATENATE_SCRIPTS', false);

2. Sertakan jQuery yang dihosting Google dengan Penggantian Alternatif

Menetapkan fallback membantu mengatasi masalah pemuatan CDN. Jika CDN pilihan kamu tidak tersedia, server dapat menjalankan versi jQuery yang di-cache agar situs tetap berfungsi normal.

// Fall back to a local copy of jQuery if the CDN fails <script> window.jQuery || document.write('<script src="http://mysite.com/jquery.min.js"><\/script>')) </script>

3. Tambahkan pustaka jQuery secara manual

Jika metode sebelumnya tidak memperbaiki kesalahan jQuery, coba tambahkan perpustakaan jQuery ke file header.php kamu. Caranya adalah sebagai berikut :

A. Buka Google Hosted Libraries dan salin cuplikan kode CDN dari rilis terbaru jQuery. Berikut ini adalah cuplikan kode untuk versi 3.x :

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.6.0/jquery.min.js"></script>

B. Temukan file header.php di folder tema kamu

C. Buka berkas dan tempel potongan kode diatas pada langkah pertama tepat di bawah tag.

D. Simpan perubahan yang dilakukan.

4. Pastikan jQuery sudah dimuat

Jika kamu sudah memasukkan jQuery ke dalam file situs web, kesalahan “Uncaught ReferrenceError: jQuery is not didefinisikan” dapat disebabkan karena kode tidak dimuat dengan benar.

Oleh sebab itu, langkah terakhir adalah mengecek kembali source code halaman WordPress yang dimaksud dan mencari tag …….. pada bagian header. Selanjutnya, kamu dapat menggunakan alat Inspect Element untuk menemukan cuplikan dengan lebih cepat.

Berikut beberapa contoh kode sumber yang harus dicari :

Plain text
Copy to clipboard
Open code in new window
EnlighterJS 3 Syntax Highlighter
<script src="/js/jquery-3.6.0.min.js" type="text/javascript"></script>
<script src="/js/jquery-3.6.0.min.js" type="text/javascript"></script>


<script src="/js/jquery-3.6.0.min.js" type="text/javascript"></script>

Plain text
Copy to clipboard
Open code in new window
EnlighterJS 3 Syntax Highlighter
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.6.0/jquery.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.6.0/jquery.min.js"></script>


<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.6.0/jquery.min.js"></script>

Jika cuplikan merujuk ke nama berkas seperti contoh pertama, pastikan ejaannya benar. Jika tidak, salin dan tempel URL pustaka jQuery ke halaman web baru untuk melihat apakah halaman tersebut berhasil dimuat.

Ada dua cara untuk menambahkan perpustakaan jQuery ke situs web kamu, termasuk kode sumber dalam file HTML atau file JavaScript baru.

Kamu dapat melakukan metode sebelumnya dengan mengunduh file jQuery atau menyalin cuplikan kode CDN jQuery dan menambahkan file atau URL ke bagian header file HTML.

Meskipun paling mudah dari keduanya, metode ini memerlukan pembaruan semua file HTML jika kamu ingin menggunakan versi jQuery terbaru. Itu sebabnya pengembang umumnya lebih memilih metode kedua.

Dengan meletakkan kode sumber dalam file JavaScript terpisah, kamu hanya perlu membuat perubahan pada file spesifik tersebut dan menerapkannya pada semua file HTML yang memanggil fungsi tersebut.

Tidak ada situs WordPress yang kebal terhadap kesalahan “jQuery tidak didefinisikan”. Tapi kitab bisa upayakan untuk memperbaiki kesalahan tersebut seperti yang sudah dijelaskan diatas :

• Tambahkan jalur absolut ke file wp-config.php.
• Sertakan jQuery yang dihosting Google dengan fallback alternatif.
• Tambahkan perpustakaan jQuery secara manual ke file header tema.
• Pastikan jQuery dimuat dengan benar.

Kami harap artikel ini membantu mengatasi kesalahan jQuery WordPress Anda. Semoga berhasil!

Itulah artikel Cara Merencanakan Membuat Situs Web Agar Sukses yang dapat Mangcoding sharing. Mudah-mudahan artikel ini bisa bermanfaat dan dapat memberikan pengetahuan baru. Jika ada kritik serta saran yang dapat membangun, silahkan komentar atau kirim melalui Email dan Media sosial Mangcoding.

Sumber : 4 Cara Efektif untuk Memperbaiki Error kode jQuery di WordPress