Advertisement
Wordpress

Menggunakan Jquery pada WordPress

Jika kita adalah orang yang baru dalam menajadi theme wordpress developer pasti kita tidak akan mengetahui kesalahan kecil yang kita perbuat saat menggunakan plugin jquery. Ini yang telah saya lakukan berbulan-bulan sebelum saya mengetahui masalah ini begitu serius. Saya menggunakan tags script pada head untuk memanggil fungsi kode tersebut. Memang tidak akan terlihat masalah yang terjadi. Tapi kita sudah menggunakan beberapa plugin maka hal ini akan terlihat, fungsi ajax di plugin tersebut tidak bisa berjalan sebagaimana mestinya.

Ini otomatis akan membuang banyak waktumu untuk mencari tahu bug yang sedang kamu alami. Dan itu yang sudah pernah terjadi pada saya. Waktu berjam-jam bahkan berhari-hari saya lewati hanya untuk menemukan masalah yang begitu sepele tapi membuat masalah besar dalam memulai mendevelop theme. Ingatlah, waktu adalah uang, jangan buat waktu mu hanya untuk mencari kesalah dalam hal ini.

Mungkin bagaipara developer yang sudah mengetahuinya ini bukanlah masalah yang besar, tapi bagi kita yang baru belajar ini penting diketahui lebih awal sebelum kita lebih dalam mempelajarinya.

Loading Jquery pada WordPress

Ingat jangan pernah menggunakan <script> untuk load jquery.js plugin pada theme wordpressmu. WordPress sudah menyediakan pluginnya pada folder wp-include, kamu tinggal memanggilnya. Berikut kodenya :

buka file functions.php dan masukan kode berikut.

add_action( 'wp_enqueue_script', 'load_jquery' );
function load_jquery() {
    wp_enqueue_script( 'jquery' );
}

Gunakan  No Conflict Mode

Saya sarankan gunakan No Conflict Mode pada kode ajax mu ini akan menimalkan  konflik yang terjadi pada kode mu.

Berikut kode yang bisa kamu gunakan jika kamu menjalakannya setelah memuat document

jQuery(document).ready(function($) {
    // Kode disini yang akan dieksekusi pada document ready. gunakan $ secara normal.
});

dan berikut kode jika kamu menggunakan anonymous function

(function($) {
   // Your jQuery code goes here. Use $ as normal.
})(jQuery);

Example

Sebagai contohnya, coba anda masukan kode berikut pada header.php anda. Taruh kode berikut sebelum </head>

$(document).ready(function(){
  alert('test');
});

kemudian jalankan website anda, apakan pesan alert tersebut mau muncul? jika tidak berikut solusinya. Ubah kode diatas dengan kode yang ada dibawah ini :

jQuery(document).ready(function(){
  alert('test');
});

Apa hasil yang kamu dapatkan? berhasil?

Cara lainnya kamu juga bisa menggunakan kode dibawah ini :

$q=jQuery.noConflict();

// Use jQuery via $q(...)
$q(document).ready(function(){
  alert('test');
});

pada kode  jQuery(document).ready(function($) ada penambahan penambahan dollar ($) setelah functionnya ini berfungsi untuk menormalkan penggunakan fungsi dollar ($) tersebut. 

Selalu menganggap diri seorang pemula. Seorang Website Designer yang lagi suka nulis, juga editing video, dan memperhatikan tren desain. Entrepreneur. Founder & Marketing Palawakia Studio

Related Stories

One Response to Menggunakan Jquery pada WordPress

Leave a Reply

Your email address will not be published. Required fields are marked *