Cara Insert Javascript ke Posting WordPress

Salah satu alasan mengapa dahulu aku tak mau menggunakan wordpress adalah sulit untuk mengembed kode javascript ke posting / artikel. Embed javascript biasanya kubutuhkan ketika menulis artikel tentang pemrograman yang ada demo programnya dalam html dan javascript, seperti pada artikel: Mencari Deret Bilangan Prima Menggunakan Algoritma Sieve of Eratosthenes dan Cara Menentukan Bilangan Ganjil dan Genap. Bila menggunakan wordpress, kode javascript yang ditulis di posting akan diencode / diolah terlebih dahulu sebelum disimpan ke database.

Karena sudah diencode, maka kadang kode javascript tersebut tidak bisa berjalan sesuai apa yang kita inginkan. Nah, kalau kamu mengalami masalah serupa, silakan lanjutkan membaca artikel ini, semoga trik berikut juga berhasil untukmu, smile

Menulis Kode Javascript Lewat HTML Editor

Pada WordPress ada 2 jenis editor, yaitu: editor visual (tinymce) dan editor html. Untuk menuliskan kode javascript, maka silakan gunakan editor html. Lebih jelasnya silakan lihat gambar berikut:

Pilih Editor HTML di WordPress

Berikut adalah kode sederhana untuk uji coba javascript pada artikel ini. Fungsi pertama fungsi hello world sederhana, sedang fungsi kedua untuk mengecek bilangan genap atau ganjil. Catatan: fungsi cekGenapGanjil di bawah bukan fungsi yang optimal untuk mengecek bilangan genap atau ganjil, smile

function Hello(){
    var nama = document.getElementById("inputText").value;
    alert(nama);
}
function cekGenapGanjil()
{
    var bil = document.getElementById("inputText").value;
    if((bil>=0) && (bil%2==0))
    {
        alert("Bilangan genap positif");
    }
    else if((bil>0) && (bil%2!=0))
    {
        alert("Bilangan ganjil positif");
    }
}

Berikut tampilannya di wordpress:

Tulis Javascript di WordPress

Permasalahan & Solusi

Seperti yang kutulis di atas, sebelum disimpan ke database, maka posting-an kita akan diencode terlebih dahulu. Yang paling sering kualami adalah kode javascript “&&” (simbol logika AND) diubah menjadi “&#038;&#038;”, karakter enter diubah jadi “< br />”, syntax “<" jadi "&lt;", syntax ">” jadi “&gt;”.

Setelah googling dan mencoba beberapa tips & trik, akhirnya kudapat cara yang pas adalah dengan menginstall plugin Text Control, dan gunakan file external javascript. Bila penasaran lebih detailnya silakan baca artikel di Codex WordPress berikut: Using Javascript.

Plugin Text Control

Ada dua plugin Text Control di halaman pencarian plugin wordpress, silakan gunakan yang terbaru, yaitu versi 2.3.1.

Wordpress Text Control Plugin

Setelah terinstall, maka pada halaman editing posting akan bertambah panel Text Control, nah untuk posting yang memuat kode javascript, pilih opsi No Formating saja pada Text Control, berikut screenshootnya:

Wordpress Text Control Plugin - No Formating

Meski telah diset ke No Formating, ternyata masalah belum terselesaikan teman-teman. Dengan menggunakan Text Control, kode javascript yang kita tulis pada posting sudah bisa disimpan di database tanpa encode oleh wordpress. Namun, ketika dilihat hasil render browser, ternyata masih ada beberapa karakter yang tetap diencode, entah oleh engine wordpress atau oleh browser. Berikut contoh karakter “&&” yang masih diencode menjadi “&#038;&”

Beberapa kode Javascript tetap di-encode

File External Javascript

Nah, jurus pamungkas untuk mengatasi masalah ini adalah gunakan file external javascript. Jadi kode diatas disimpan pada sebuah file .js, kemudian kita mereferensikan file tersebut ke postingan kita. Berikut contohnya untuk meinclude/mereferensikan file javascript:

<script type="text/javascript" src="http://myDomain.com/myScript.js">
</script>

Testing

Untuk testing, silakan masukkan nama / angka ke dalam textbox berikut dan klik button Hello! atau Cek Ganjil / Genap.

<

p style=”text-align: justify;”>


Hehe, bagaimana? Berhasilkah? Semoga berhasil ya, hehe.

Rekap

Eits… lumayan panjang juga tutorialnya. Inti tutorial ini adalah untuk dapat mengembed javascript di posting wordpress, langkah pertama: gunakan bantuan plugin Text Control (atau plugin lain yang mempunyai fungsi sama) untuk mencegeah wordpress meencode kode kita. Bila belum berhasil, coba gunakan file eksternal javascript.

Tips terakhir: sebelum menyimpan posting, beralihlah ke mode editing HTML terlebih dahulu, cek syntax javascript kamu, kalau ada yang diformat oleh editor Visual, perbaiki terlebih dahulu, kemudian simpan posting kamu. Semoga bermanfaat.

 

Tetap Sehat, Tetap Semangat, agar dapat Tetap dalam Perdjoeangan!! smile


Comments

  1. Adnan

    8 April 2012 at 11:18

    Dicoba kok gak bisa yah? :D


    • ruduino

      8 April 2012 at 15:57

      hehe, tadi masih dalam tahap editing og mas bro,
      ribet bener nih wordpress, terlalu canggih, T.T


  2. ahmad makhsun

    23 July 2012 at 22:08

    ini sangat membantu bagi newbie seperti saya. thank banget gan


  3. Pingback: Cara Embed Tweet ke Posting Wordpress – Rudy Hartadi

  4. Yanto

    13 August 2016 at 14:10

    Sama saya jg lagi pusing masukin content sydication d wp. Ampun da gambar nya tidak keluar. Jd ambil konten dr website partner code generate berbentuk javascript. Padahal sudah pake template preium ada fktur masukkn javasript tp gitu deh tidak jalan keluar juga gambar nga. Tp klik keluar dia modal pop up nya. Ada wa kang minta


Leave a Reply