DEV Community

Ngobrolin IT
Ngobrolin IT

Posted on

Tutorial Menggunakan jQuery pada WordPress dengan benar

Seringkali kita menemui masalah dalam menggunakan library javascript khususnya library jQuery pada WordPress.

Sebagai contoh kita membuat fungsi alert ketika tombol yang memiliki class tombol di klik. Kemudian kita menyisipkan script sebagai berikut:

$('.tombol').on('click', function() {
    alert('Testing Alert!');
});
Enter fullscreen mode Exit fullscreen mode

Yang akan terjadi adalah tombol tidak bekerja sebagaimana mestinya. Jika di check ke console browser akan muncul pesan error Uncaught ReferenceError: $ is not defined. Nah error ini merujuk pada shortcut $ (tanda dollar) yang tidak terdefinisi ke library jQuery.

Script tersebut jika dijalankan pada halaman web pada umumnya, akan berjalan dengan baik, tetapi tidak di WordPress. Hal ini bisa terjadi karena library jQuery yang dipanggil oleh WordPress menggunakan mode β€œno conflict”. Hal ini diperlukan oleh WordPress untuk menghindari konflik dengan library-library lain yang mungkin juga menggunakan shortcut tanda $ (tanda dollar).

Cara mengatasinya sangat simpel, kamu cukup membungkus script di atas dengan jQuery seperti ini

OPSI 1

jQuery(document).ready(function(){
    $('.tombol').on('click', function() {
        alert('Testing Alert!');
    });
});
Enter fullscreen mode Exit fullscreen mode

OPSI 2

(function($) {
    $('.tombol').on('click', function() {
        alert('Testing Alert!');
    });
})(jQuery);
Enter fullscreen mode Exit fullscreen mode

Selamat mencoba πŸ™‚

Image of Timescale

Timescale – the developer's data platform for modern apps, built on PostgreSQL

Timescale Cloud is PostgreSQL optimized for speed, scale, and performance. Over 3 million IoT, AI, crypto, and dev tool apps are powered by Timescale. Try it free today! No credit card required.

Try free

Top comments (0)

A Workflow Copilot. Tailored to You.

Pieces.app image

Our desktop app, with its intelligent copilot, streamlines coding by generating snippets, extracting code from screenshots, and accelerating problem-solving.

Read the docs

πŸ‘‹ Kindness is contagious

Engage with a sea of insights in this enlightening article, highly esteemed within the encouraging DEV Community. Programmers of every skill level are invited to participate and enrich our shared knowledge.

A simple "thank you" can uplift someone's spirits. Express your appreciation in the comments section!

On DEV, sharing knowledge smooths our journey and strengthens our community bonds. Found this useful? A brief thank you to the author can mean a lot.

Okay