in

Cara Menambahkan Kode Javascript Di Website eCommerce WordPress

TokoDaring.Com – Cara Menambahkan Javascript Di WordPress. Di dua artikel kami sebelumnya yaitu tentang menambahkan kode html dan CSS di website WordPress. Kini kami lengkapi dengan artikel bagaimana menuliskan kode javascript (JS) ke dalam website eCommerce WordPress anda.

Cara menambahkan javascript di WordPress

Untuk mengkustomisasi website eCommerce WordPress, anda memang harus menambahkan script fungsi ke dalam WordPress. Baik kode HTML, CSS maupun javascript dan PHP bisa di tambahkan melalui beberapa cara.

Salah satu yang kami rekomendasikan adalah dengan menggunakan plugin editor. Lihat lagi seri artikel kami bagaimana menuliskan script kustom anda ke dalam website WordPress.

Jika anda ingin meningkatkan fungsionalitas situs website eCommerce WordPress anda. Maka menambahkan kode Javascript adalah yang harus anda lakukan. Baik menggunakan library maupun kustom skrip.

Ada beberapa cara menambahkan javascript di wordpress. Mulai dari menggunakan plugin hingga menuliskannya dengan mengaitkannya ke hook.

Di halaman customizer WordPress, kita bisa menambahkan kode CSS secara langsung. Namun tidak demikian dengan Javascript. Untuk menambahkan kode kustom Javascript kustom ke situs WordPress, maka anda perlu menggunakan plugin atau mengedit file functions.php child theme.

  • Beberapa plugin dapat di gunakan untuk menambahkan kode Javascript ke dalam website eCommerce WordPress:
  • Atau anda dapat menggunakan fungsi dan mengaitkannya menggunakan spesifik hooks.
    • Mengaitkan hook wp_head, wp_footer atau wp_enqueue_scripts.
    • Fungsi WordPress wp_enqueue_script().

Menambahkan javascript di halaman WordPress

Sebelum membahas plugin atau hook yang bisa di gunakan untuk menulis javascript ke dalam WordPress. Tahukah anda bahwa kode js anda juga bisa di tulis di halaman WordPress secara langsung menggunakan blok editor gutenberg.

Misalnya, anda mungkin sedang dalam sebuah project mendesain halaman landing page statis. Anda ingin membuat halaman landing tersebut dengan slider atau menambahkan animasi.

Maka kode javascript bisa di tambahkan secara langsung di halaman WordPress. Tombol ini adalah contoh menambahkan javascript di halaman WordPress menggunakan blok html :

Tentu saja, anda harus menambahkan element html (<div>), style dan function(js)nya secara lengkap.

<button onclick="typeWriter()">Tentang TokoDaring.Com</button>
<div id style="property:value;">
<p id= style="font-size:85%;line-height:normal;"></p></div>

<script>
'TokoDaring.Com adalah media online dengan artikel-artikel yang praktis di bidang ecommerce. Kami menulis dengan bahasa yang menyenangkan dan mudah di pahami. Mulai dari teknologi, platform dan update, hingga secara teknis bagaimana mendesain dan memaksimalkan website ecommerce untuk dapat membantu orang-orang yang baru memulai atau sudah ada pada bisnis online. TokoDaring.Com adalah tempat di mana cooking dan coding bertemu';

function() {
  //fungsi js anda di sini() {
      //fungsi js anda di sini
  }
}
</script>

Ini adalah artikel tentang bagaimana membuat animasi mengetik dan membuat slider menggunakan javascript dan CSS.

Cara menambahkan javascript di WordPress dengan plugin

Seperti kami sudah infokan di atas, bahwa plugin yang cukup terpercaya untuk menaruh kode javascript anda adalah Insert Headers and Footers plugin.

Akan ada dua kotak snippet yang anda bisa gunakan. Sesuai namanya, anda bisa menambahkan script di header atau di footer.

Ketika menambahkan di header, script akan 'di tempatkan' di antara tag <head> dan </head>. Sementara jika memilih untuk menuliskan kode di footer, maka script anda akan di tempatkan sebelum tag </body>.

Cara menambahkan javascript di WordPress tanpa plugin

Melalui file function.php child theme

Tanpa plugin anda juga tetap bisa menuliskan kode js ke dalam website. Yaitu dengan menulisnya di file function.php child theme yang sudah anda buat.

Menggunakan plugin editor

Kami pernah menulis artikel tentang bagaimana cara edit website WordPress menggunakan plugin editor. Plugin editor adalah sebuah plugin 'super ringan' yang anda buat sendiri khusus untuk menyimpan semua kode kustom yang di tambahkan ke WordPress.

Baik menulis kode via function.php child theme maupun via plugin editor, caranya sama. Anda perlu untuk mengkatrol hook dan prioritas yang sesuai.

Cara menambahkan javascript di WordPress dengan mengkatrol hook kami contohkan sebagai berikut.

Ini adalah contoh script jquery yang kami buat untuk membuat menu navigasi menjadi sticky setelah di scroll dalam beberapa px yang di tentukan.

// header sticky setelah scroll 100px kebawah

add_action ('wp_footer','tokodaring_menu_sticky', 1);
function tokodaring_menu_sticky() { ?>

<script>
jQuery(document).ready(function($) {
    $(window).scroll(function() {
        if($(window).scrollTop() > 100) {
            $('.storefront-primary-navigation').addClass('sticky');
        }else{
            $('.storefront-primary-navigation').removeClass('sticky');
        }
    });
});
</script>

<?php
}

Hindari cara ini ketika menambahkan javascript di WordPress

Menambahkan javascript di halaman WordPress bisa sangat mudah hanya dengan menuliskan tag <script> secara langsung ke file template header.php atau footer.php. Seperti misalnya :

<script src="https://tokodaring.com/wp-content/litespeed/localres/aHR0cHM6Ly93d3cuZ29vZ2xlLmNvbS9yZWNhcHRjaGEvYXBpLmpz"></script>

Namun cara ini seharusnya di hindari karena WordPress memiliki urutan loading yang sudah di tetapkan.

WordPress menyarankan agar menggunakan fungsi wp_enqueue_script(). Cara ini akan menghindarkan konflik yang menyebabkan error. Fungsi wp_enqueue_script() memungkinkan script yang anda tambahkan akan mengikuti urutan loading yang sesuai.

Alih-alih menuliskan <script> seperti di atas. Contoh berikut adalah cara menambahkan javascript di WordPress ketika anda mungkin ingin menambahkan kode recaptcha di seksi komentar blog artikel.

add_action( 'wp_footer', 'tokodaring_custom_recaptcha' );
function tokodaring_custom_recaptcha() {
    wp_enqueue_script('google-recaptcha', 'https://tokodaring.com/wp-content/litespeed/localres/aHR0cHM6Ly93d3cuZ29vZ2xlLmNvbS9yZWNhcHRjaGEvYXBpLmpz');
}

Written by TokoDaring

TokoDaring.Com - 'Majalah' online (online publishing),  sumber dan referensi teknis untuk membangun dan memaksimalkan performa bisnis toko online. Optimizing your store!

plugin wordpress

Plugin WordPress (eCommerce Plugin)

cara membuat sticky menu di wordpress

Cara Membuat Sticky Menu Di WordPress