Posted on

Kode Javascript Membuat Animasi Mengetik WordPress

Kode Javascript Membuat Animasi Mengetik WordPress

wpJakarta.Com – Kode javascript Membuat Animasi Mengetik WordPress. Referensi artikel tentang kode javascript membuat animasi mengetik WordPress, lihat halaman 2 Cara Membuat Animasi Mengetik WordPress.

Kode HTML

Tempatkan kode berikut di lokasi dimana ingin di tampilkan animasi mengetik

<body>
  <div id="teksKetikan"></div>
</body>

Kode javascript membuat animasi mengetik WordPress

Tambahkan kode javascript membuat animasi mengetik WordPress berikut ke dalam file function.php. Atau gunakan plugin snippet code. Kode js berikut “aman” di tambahkan dengan mengkatrol hook wp_enqueue_scripts(). https://developer.wordpress.org/reference/functions/wp_enqueue_scripts/.

/* // mengetik write4all
add_action('wp_enqueue_scripts', 'wpjkt_mengetik');
function wpjkt_mengetik() {
?>
<script>
var aText = new Array( "wpJakarta Write For All. wpJakarta.Com adalah website optimasi bisnis, blog & komunitas. Kami selalu ingin memberikan konten yang berguna bagi semua orang. Namun anda adalah ahli dalam bidang masing-masing. Maka kami juga ingin mengajak anda menulis di platform kami tentang yang sedang anda geluti (tips-trik WordPress, teknologi secara umum), atau promosi bisnis dan usaha yang sedang anda jalankan (start up, SaaS, produk yang anda jual), atau tentang kreatifitas, hobi dan komunitas. Baca lebih lanjut artikel ini untuk mengetahui bagaimana membuat guest posting di website kami." );
var iSpeed = 100;
var iIndex = 0;
var iArrLength = aText[0].length;
var iScrollAt = 20;
var iTextPos = 0;
var sContents = '';
var iRow;
function animasi_mengetik() {
    sContents =  ' ';
    iRow = Math.max(0, iIndex-iScrollAt);
    var destination = document.getElementById("teksKetikan");
    while ( iRow < iIndex ) {
        sContents += aText[iRow++] + '<br />';
        
    }
    destination.innerHTML = sContents + aText[iIndex].substring(0, iTextPos) + "_";
    if ( iTextPos++ == iArrLength ) {
        iTextPos = 0;
        iIndex++;
        if ( iIndex != aText.length ) {
            iArrLength = aText[iIndex].length;
            setTimeout("typewriter()", 500);
            
        }
    } else {
        setTimeout("animasi_mengetik()", iSpeed);
    }
}
animasi_mengetik();
</script>
<?php
}

Kembali ke artikel : 2 Cara Membuat Animasi Mengetik WordPress. Hasilnya bisa lihat di salah satu halaman kami yang mengimplementasikan kode tersebut. https://wpjakarta.com/blog/wpjakarta-write-for-all/.

Bagaimana menambahkan kode javascript di website WordPress

Untuk mengkustom website WordPress sebenarnya bisa dengan menambahkan kode kustomisasi ke dalam file function.php. Namun itu bukanlah cara yang baik dan beresiko. Kode yang di tambahkan secara langsung ke dalam file function.php pasti akan terhapus jika terdapat update tema website. Dan kustomisasi yang sudah di lakukan akan hilang atau kembali ke kondisi semula.

Untuk menyiasatinya, anda dapat membuat site specific plugin yang khusus untuk menambahkan setiap kode tambahan ke dalam file WordPress. Untuk lebih jelas mengenai apa itu “site specific plugin” ? Kunjungi artikel Tips-Trik Membuat Site Specific Plugin WordPress. yang pernah di tulis di website ini.