WordPress Menaru Semua JS di Footer

May 11, 2017

Ali

Dalam meletakan JavaScript (JS) pada HTML, pada dasarnya kita bebas meletakannya di mana saja di awal setelah tag <head>, di tengah dalam tag <body> ataupun di akhir sebelum tag <html>. Namun dari berbagai sumber mengatakan bahwa untuk hasil terbaik, disarankan semua JS harus berada paling bawah sebelum tag </html>, mengapa? Karena jika JS diletakan di atas pada tag <head> artinya JS tersebut akan diproses lebih dulu sebelum komponen yang berada dalam tag <body>, oleh karena itu disarankan JS diletakan di bawah, supaya yang lain di load dulu baru kemudian JS tersebut guna mempercepat situs.

Tulisan kali ini kita akan membahas tentang bagaimana cara meletakan JS di bawah, pada WordPress karena secara asali WordPress meletakan JS di atas, oleh karena itu untuk meningkatkan kecepatan situs, maka kita harus meletakannya di bawah. Yakni dengan perintah wp_enqueue_script. Kita tinggal gunakan skrip tersebut seperti ini:

wp_enqueue_script( 'JS_ANDA', '/direktor/berkas.js', array('jquery'),
'versinya_jika_ada', true /* jika false berarti JS di atas */ );

Adapun ini adalah contoh skrip yang mana kita memaksa jQuery bawaan WordPress diletakan di bawah, juga beberapa JS bawaan dari tema diletakan di bawah pula. Berikut ini adalah skripnya:

function js_footer() {
    if (!is_admin()) {
        
        //Untuk Jquery
        wp_deregister_script('jquery');
        // Me-load JS dari local
        wp_register_script('jquery', '/wp-includes/js/jquery/jquery.js', false, '1.3.2', true);
        // Jika Anda ingin dari Google API bisa gunakan kode di bawah
        //wp_register_script('jquery', 'http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js', false, '1.3.2', true);
        wp_enqueue_script('jquery');
        
        //untuk kode JS sesuai tema yg Anda gunakan
        wp_enqueue_script( 'js-saya', get_template_directory_uri() . '/js/js-saya.js', array(), '20170511', true );

    }
}
add_action('init', 'js_footer');

Skrip di atas bisa Anda salin-tempel diberkas functions.php pada tema yang Anda gunakan, dan pastikan jika Tema WP yang Anda pakai saat ini jika menggunakan JS letakan saja pada js_footer. Simpan dan cek, apakah JS sudah di load di bawah?

Anda juga dapat memaksa beberapa JS bawaan WordPress untuk diletakan di bawah, yakni dengan perintah wp_dregister_script lalu me-register kembali, bisa dilihat register name dari JS bawaan WP berikut: https://developer.wordpress.org/reference/functions/wp_register_script/#core-registered-scripts.

Oke itu saja, semoga bermanfaat.