Posted on

Cara Menambahkan Kode Javascript Pada Website WordPress

wpjakarta – Cara menambahkan kode Javascript pada website WordPress. Pada dua artikel sebelumnya :

Di bahas bagaimana menambahkan kode HTML dan CSS pada website WordPress untuk sekedar melakukan modifikasi atau kustomisasi ringan pada website WordPress. Pada artikel ini kami bahas cara menambahkan kode Javascript pada website WordPress. Juga untuk tujuan memberikan kustomisasi ringan pada beberapa seksi atau bagian website. (Bukan dalam hal membangun website secara keseluruhan).

Cara menambahkan kode Javascript website WordPress menggunakan plugin

Jika untuk kode CSS dapat ditambahkan pada Pada website WordPress melalui sebuah kotak snippet khusus “additional CSS”. Maka lain halnya untuk javascript. Tapi bukan berarti script ringan JS tidak bisa ditambahkan pada website WordPress. kode Javascript bisa ditambahkan paling mudah dan simple dengan menggunakan plugin, dan yang paling terkenal adalah Insert Headers and Footers By WPBeginner. Setelah di install kita dapat menuliskan kode javascript kedalamnya, dengan opsi mau ditempatkan di header atau di footer.

Contohnya adalah “kode script JS yang paling populer sedunia”, heheheh. Yaitu kode tracking google analytics. Tidak tanggung tanggung google meminta untuk menempatkan kodenya di header website, dengan konsekwensi “sedikit” menurunkan score pagespeed karena umur browser cache kode tersebut yang cuma dua jam.

Tapi umumnya orang ingin menempatkan kode javascript di bagian footer atau pada bagian sebelum </body> dengan alasan agar proses render browser terhadap script HTML bisa berjalan “lancar jaya”. Menempatkan kode javascript di header berkonsekwensi adanya “block render” terhadap kode HTML. Karena harus “menunggu” sepersekian milidetik proses “eksekusi” javascript oleh browser, tentunya tergantung besar atau kecilnya ukuran kode javascript tersebut.

Cara menambahkan kode Javascript website WordPress Secara Langsung

Tanpa plugin kode google analytics tersebut juga dapat di tambahkan langsung pada file website. Kode tersebut dapat langsung di copy dan paste pada file (biasanya) header.php. Jika ingin menambahkan pada seksi header maka tempatkan kode tersebut sebelum tag </head>. Dan jika ingin menambahkan pada seksi footer maka tambahkan pada seksi sebelum tag </body>.

<!DOCTYPE html>
<html>
  <head>

     <script> Kode JS di Header </script>

  </head>

  <body>


  </body>
</html>
<!DOCTYPE html>
<html>
  <head>

     
  </head>

  <body>

     <script> Kode JS di Footer </script>

  </body>
</html>

Menulis pada file fungsi PHP untuk spesifik halaman atau post

Untuk menuliskan kode javascript pada halaman atau post tertentu saja. Misalnya sebagai “kustomisasi” ringan pada halaman homepage, maka kode javascript bisa dituliskan pada file fungsi php (function.php). Juga dengan pilihan apakah mau di tempatkan di header atau di footer. contohnya animasi mengetik berikut yang kami tempatkan di footer. (Dengan hook “wp_footer” dan “18155” adalah post ID). Sedangkan untuk menempatkan di header maka menggunakan hook “wp_head”.

 

 

// Ngetik postID 18155
function wpj_demojs_post18155() {
  if (is_single ('18155')) {
    ?>
        <script>
           // script JS animasi mengetik       
        </script>
    <?php
  }
}
add_action('wp_footer', 'wpj_demojs_post18155');