Praktik Terbaik untuk Menggunakan Cuplikan JavaScript Eksternal dengan Divi

WordPress dan Divi melakukan banyak hal luar biasa untuk memudahkan kami membangun situs web. Namun terkadang kita membutuhkan fungsionalitas yang lebih canggih yang hanya dapat dicapai dengan JavaScript.

Dengan Divi, Anda dapat dengan mudah menambahkan JavaScript atau jQuery snippet (potongan kode) ke tema atau halaman web Anda tanpa plugin, bahkan jika Anda tidak menyiapkan tema anak. Dalam tutorial ini, kita akan membahas beberapa praktik terbaik untuk menggunakan cuplikan JavaScript eksternal dengan Divi.

Kata Cepat tentang JavaScript dan jQuery

JavaScript adalah keajaiban di balik fungsionalitas dinamis yang Anda lihat di situs web. Ini adalah bahasa pengkodean sisi klien yang dibuat untuk web yang dapat mengakses semua file tema Anda dan melakukan semua jenis fungsi melalui browser yang tidak mungkin dilakukan dengan HTML atau CSS saja.

JQuery (salah satu pustaka JavaScript paling populer) telah membuatnya sangat mudah untuk menambahkan cuplikan JavaScript ke situs web Anda yang akan berfungsi di berbagai jenis browser. Itu sebabnya melihat banyak jQuery digunakan di situs web saat ini. JQuery juga dibangun di WordPress sehingga setiap kode jQuery yang Anda tambahkan ke Divi akan berfungsi jika diformat dengan benar.

Pemformatan Cuplikan JQuery yang Tepat di Divi/WordPress

Menggunakan Fungsi Siap Dokumen

Dalam kebanyakan kasus, saya akan menyarankan menggunakan $(document).ready() dalam cuplikan jQuery Anda. JavaScript apa pun yang ditambahkan di $(document).ready() akan memastikan dokumen (atau DOM) dimuat dan siap sebelum menjalankan JavaScript. Ini menghindari situasi tertentu di mana JavaScript dapat dijalankan saat halaman tidak siap untuk dimanipulasi dengan aman.

Di Divi, fungsinya akan terlihat seperti ini…

jQuery( document ).ready(function() {

    // Add jQuery code here to be loaded once the DOM is ready

});

Menggunakan "jQuery" alih-alih "$" saat menggunakan jQuery di WordPress

Karena WordPress sudah dilengkapi dengan versi jQuery dalam mode kompatibilitas, $ standar untuk jQuery tidak berfungsi. Ini untuk menjaganya agar tidak bertentangan dengan pustaka JavaScript lain yang mungkin atau mungkin tidak Anda gunakan di WordPress. Sebagai gantinya, Anda harus menggunakan jQuery sebagai pengganti pintasan $ .

Jadi ini…

$(document).ready(function(){
  $("p").click(function(){
    $(this).hide();
  });
});

Perlu diubah menjadi ini…

jQuery(document).ready(function(){
  jQuery("p").click(function(){
    jQuery(this).hide();
  });
});

Namun, jika Anda ingin menjaga agar kode tidak terlalu membengkak dan menyimpan pintasan $ , Anda dapat menggunakan $ sebagai ganti jQuery jika Anda menambahkan $ sebagai argumen yang diteruskan ke fungsi siap dokumen. Ini akan memungkinkan Anda untuk menyimpan $ dalam cuplikan jQuery yang terkandung dalam fungsi itu.

Inilah yang akan terlihat seperti…

jQuery( document ).ready(function( $ ) {
    // Add jQuery code here, using $ to refer to jQuery.
    $( "div" ).hide();
});

Atau Anda dapat meneruskan $ in untuk jQuery dengan fungsi sederhana seperti ini bersama dengan fungsi siap dokumen…

(function($) {
    
    // Add jQuery code here, using $ to refer to jQuery.
    $(document).ready(function(){

      $( "div" ).hide();

    });
    
})( jQuery );

Sekarang setelah kita memahami beberapa praktik terbaik tentang cara memformat cuplikan JavaScript, mari kita jelajahi cara menambahkannya dengan benar ke situs Divi Anda.

Menambahkan Cuplikan JavaScript ke Satu Halaman menggunakan Modul Kode

Jika Anda ingin menambahkan cuplikan javascript (atau jquery) ke satu halaman di Divi, Anda dapat menggunakan Modul Kode. Ini akan memastikan JS tidak dimuat di setiap halaman secara tidak perlu, menyebabkan sedikit peningkatan waktu buka halaman pada halaman yang bahkan tidak membutuhkannya.

Berikut cara melakukannya. Pertama, aktifkan pembuat divi saat mengedit halaman yang membutuhkan cuplikan JS. Kemudian, tambahkan modul kode ke halaman Anda.

Kode akan bekerja di mana saja pada halaman sehingga terserah Anda di mana Anda ingin meletakkannya.

Setelah Anda menambahkan modul kode, tempel di cuplikan JavaScript. Pastikan untuk membungkus kode dalam tag <script> sehingga kode dikenali sebagai JavaScript.

Jangan lupa untuk memastikan bahwa cuplikan Anda dikodekan dengan format yang benar dengan membungkusnya dengan tag <script> sehingga kode tersebut dikenali sebagai JavaScript. Dan jika Anda menggunakan jQuery, sertakan fungsi dokumen siap sehingga memuat setiap kali dokumen siap untuk itu. Selain itu, Anda harus menggunakan jQuery dalam cuplikan Anda alih-alih singkatan $ .

Itu dia! Cuplikan Anda harus berjalan di halaman seperti yang diharapkan.

Catatan: Tag <script> biasanya mengharuskan Anda menentukan jenis media skrip sebagai berikut…

<script type="text/javascript">
</script>

Namun, karena "teks/javascript" adalah tipe default, tidak apa-apa untuk mengabaikannya saat menggunakannya untuk cuplikan kode JavaScript.

Menambahkan Cuplikan JavaScript ke Semua Halaman/Pos Menggunakan Opsi Tema Divi (tidak perlu tema anak)

Cuplikan JavaScript juga dapat ditambahkan ke Divi menggunakan tab integrasi kode Divi di bawah Opsi Tema. Metode ini berfungsi dengan baik untuk cuplikan JS yang ingin Anda muat di semua halaman/posting situs web Anda. Ini juga merupakan pilihan yang baik jika Anda tidak memiliki tema anak atau jika Anda hanya memiliki beberapa potongan JS yang perlu ditambahkan ke situs Divi Anda dan tidak ingin memasukkannya ke dalam file JS eksternal.

Untuk menemukan bagian integrasi kode, navigasikan ke Divi > Opsi Tema dan klik tab Integrasi.

Mencari Tahu Di Mana Menempatkan Cuplikan JavaScript Anda

Di sana Anda akan melihat empat area tempat Anda dapat menambahkan kode khusus ke situs Divi Anda. Untuk sebagian besar kasus, akan lebih baik untuk menambahkan cuplikan JS ke badan. Ini benar-benar akan menempatkan cuplikan Anda di bagian bawah halaman Anda sehingga dimuat setelah semua hal lain yang bagus untuk kecepatan memuat halaman. Dalam beberapa kasus, Anda mungkin ingin menambahkan kode ke kepala sehingga kode dapat dimuat lebih cepat (atau jika dokumen Anda bergantung pada JavaScript yang berjalan lebih cepat). Jadi, Anda harus menguji dan memutuskan opsi terbaik yang memberi Anda keseimbangan terbaik antara kinerja, waktu, dan fungsionalitas.

Misalnya, Anda mungkin memiliki cuplikan jQuery yang menambahkan gaya ke header Anda. Dalam hal ini, Anda tidak ingin memuatnya di badan (di akhir halaman) karena tajuk akan dimuat pada awalnya tanpa gaya itu hingga cuplikan dibaca. Ini akan membuat paruh atas Anda terlihat jelek bagi pengunjung untuk sesaat. Namun, jika Anda memuatnya di kepala, Anda tidak akan mengalami penundaan dalam penataan.

Anda juga dapat memilih untuk menambahkan potongan JS ke bagian bawah posting Anda jika Anda memiliki kode yang hanya berlaku untuk posting blog. Ini akan menjaga kode agar tidak dimuat di halaman lain secara tidak perlu.

Area integrasi kode akan menambahkan kode langsung ke halaman Anda, jadi Anda harus membungkus cuplikan kode dengan tag <script> .

Menambahkan cuplikan JS ke Divi dari file JS terpisah (menggunakan tema anak)

Selalu disarankan untuk menggunakan tema anak untuk situs Divi Anda. Dan setelah Anda memiliki pengaturan tema anak dengan benar, Anda mungkin juga memasukkan file JS yang dapat digunakan untuk menyimpan cuplikan JS kustom Anda.
Ini jelas merupakan cara yang lebih disukai untuk menangani javascript di situs WordPress dan juga berfungsi dengan baik dengan Divi.

Membuat file JS di tema anak Anda

Itu selalu merupakan ide bagus untuk mengatur tema anak Divi, terutama jika Anda berencana untuk membuat perubahan pada file tema. Setelah Anda membuat tema anak Divi, Anda dapat dengan mudah membuat file JavaScript tempat Anda dapat menempatkan semua cuplikan JS Anda di satu tempat.

Berikut cara melakukannya.

Buat file JavaScript dan tambahkan ke Folder Tema Anak Anda

Menggunakan editor kode, buat file baru dan simpan sebagai file JavaScript. Misalnya, jika Anda menyimpan file sebagai tipe "js" dengan nama "scripts", nama file lengkapnya adalah "scripts.js". Di sinilah Anda akan menambahkan semua potongan js yang ingin Anda tambahkan ke Divi. Anda tidak perlu membungkus cuplikan dalam tag <script> karena file disimpan sebagai file js.

Setelah file dibuat, Anda perlu menambahkannya ke folder tema anak Anda. Saya suka membuat folder js untuk menyimpan file js kustom saya untuk organisasi yang lebih baik. Untuk melakukan ini, cukup buat folder baru bernama "js" di root folder tema anak Anda dan tambahkan file "scripts.js" ke folder itu.

Enqueuing Scripts di file Functions.php Tema Anak Anda

Sekarang kita perlu mengantrekan file js agar dimuat di Divi. Jika Anda sudah memiliki tema anak yang dibuat, Anda harus memiliki file functions.php yang sudah dibuat di mana Anda telah mengantrekan file style.css untuk tema anak yang akan terlihat seperti ini…

function theme_enqueue_styles() {
    wp_enqueue_style( 'parent-style', get_template_directory_uri() . '/style.css' );
}
add_action( 'wp_enqueue_scripts', 'theme_enqueue_styles' );

Sekarang Anda perlu melakukan hal yang sama untuk file js baru Anda. Untuk melakukan ini, Anda perlu menambahkan cuplikan berikut ke fungsi.

    wp_enqueue_script( 'custom-js', get_stylesheet_directory_uri() . '/js/scripts.js', array( 'jquery' ), '1.0.0' , true );

Kode terakhir yang diperlukan untuk mengantrekan file style.css dan scripts.js akan terlihat seperti ini…

function theme_enqueue_styles() {
    wp_enqueue_style( 'parent-style', get_template_directory_uri() . '/style.css' );
    wp_enqueue_script( 'custom-js', get_stylesheet_directory_uri() . '/js/scripts.js', array( 'jquery' ), '1.0.0' , true );
}
add_action( 'wp_enqueue_scripts', 'theme_enqueue_styles' );

Pikiran Akhir

Jika Anda baru mengenal desain web atau baru memulai dengan Divi, Anda mungkin tidak terbiasa dengan JavaScript atau cara menambahkannya ke situs web Anda. Semoga posting ini bermanfaat untuk mengarahkan Anda ke arah yang benar dan memberikan beberapa praktik terbaik yang bahkan dapat dihargai oleh pengembang web berpengalaman.

Saya berharap untuk mendengar dari Anda di komentar.

Bersulang!