Cara menambahkan File CSS dan JavaScript di Header dan Footer WordPress

671

Dalam membuat skrip untuk aplikasi tertentu misalkan untuk plugin seringkali kita perlu menambahkan file CSS dan JavaScript yang masing-masing akan ditempatkan di header dan footer wordpress. untuk melakukan hal ini, WordPress menyediakan fungsi wp_register_style(), wp_enqueue_style(), wp_wp_register_script() dan wp_print_scripts().

Berikut adalah contoh penggunaan fungsi tersebut yang akan digunakan untuk menambahkan file CSS di header dan file javaScript di footer wordpress.

Skrip ditulis di file function.php atau di file plugin my-plugin.php Cara Mudah Membuat Plugin/Widget di WordPress

<?php

/*
* Author : @magzimp.com
*
* MY_FILE_URL -> http://www.magzimp.com/wp-content/plugins/my-plugin/
* MY_FILE_URL adalah url lokasi file CSS dan JavaScript
*/

define (“MY_FILE_URL”,plugins_url().’/my-plugin/’);

//Menambahkan file CSS di header wordpress

add_action(‘wp_print_styles’,’addStyle’);

//Menambahkan file JavaScript di footer wordpress

add_action(‘wp_footer’,’addScript’);

function addStyle(){

$styleURL = MY_FILE_URL.”mystyle.css”;

$stylePath = str_replace(get_bloginfo(‘url’).’/’,ABSPATH,$styleURL);

if ( file_exists($stylePath) ) {

wp_register_style(‘mystyle’, $styleURL);

wp_enqueue_style( ‘mystyle’);

}

}

function addScript(){

$jsURL = MY_FILE_URL.’myscript.js’;

$jsPath = str_replace(get_bloginfo(‘url’).’/’,ABSPATH,$jsURL);

if ( file_exists($jsPath) ) {

wp_register_script(‘myscript’, $jsURL);

wp_print_scripts( ‘myscript’);

}

}

?>

Untuk melihat file CSS dan JavaScript yang telah ditambahkan, buka website kemudian  jika anda menggunakan browser firefox klik kanan lalu pilih View Page Source. Masing-masing akan terlihat seperti ini.

Untuk File CSS:

<link rel=’stylesheet’ id=’mystyle-css’  href=’http://www.magzimp.com/wp-content/plugins/my-plugin/mystyle.css?ver=2.8.6′ type=’text/css’ media=’all’ />

mystyle12

Untuk File JavaScript:

<script type=’text/javascript ‘ src=’http://www.magzimp.com/wp-content/plugins/my-plugin/myscript.js?ver=2.8.6’></ script>

myscript12

–SELAMAT MENCOBA–

  • Nah, menarik ini 🙂
    Saya bookmark mas. Penting untuk dicoba. Thx.