Cara Load File Javascript atau CSS Pada Halaman Tertentu di WordPress

Terkadang di wordpress kita ingin menyertakan file javasript atau css hanya untuk hamalan atau posting tertentu saja, hal ini sulit dilakukan karena biasanya file tersebut kita load dengan  fungsi wp_enqueue_scripts  (untuk javascript) dan wp_enqueue_style  (untuk  css) yang kita tulis pada file functions.php yang ada pada folder themes, dengan demikian satu satunya tempat yang memungkinkan adalah menuliskannya  pada post editor tempat kita menulis  artikel.

Untuk meletakkannya di editor, khusus javascript kita dapat langsung menuliskannya (<script type="text/javascript">...</script>) , namun cara tersebut kurang efektif dan kurang “clean”, serta akan berpengaruh pada performa website kita, untuk itu kita perlu menggunakan shortcode, misal dalam contoh ini kita buat shortcode dengan  nama jwd_load_files, selanjutnya kita akan meload file main.js yang ada di folder js dan default.css yang ada di folder css, maka penulisan shortcode  akan seperti ini: [jwd load_files="js/main.js, css/default.css"]

Terdapat beberapa langkan yang perlu kita lakukan:

Langkah 1: Buat Shortcode

Pertama-tama kita tentukan dimana kita akan menempatkan file javascript atau css tersebut, pada contoh kali ini kita akan menempatkannya di dalam direktori wp-content/user_files (kita buat folder user_files pada folder wp-content).  Selanjutnya kita tambahkan  script untuk membaca shortcode tersebut. Buka file functions.php yang ada di dalam folder theme yang kita gunakan, kemudian tambahakan  script php berikut:

// Shortcode
add_shortcode( 'jwd_load_files', function() {});

// Load Files From Shortcode Attribute
function load_user_files()
{
	if (!is_single())
		return false;
	
	global $post;
	$folder_name = 'user_files';
	preg_match('/[jwd_load_script files="(.*?)".*]/i',$post->post_content, $atts); 
	if ($atts)
	{
		$url = content_url();
		$file_arr = explode(',', $atts[1]);
		foreach ($file_arr as $key => $file)
		{
			if (substr($file, -4) == '.css')
			{
				wp_enqueue_style('jwd-user-style-' . $key, $url . '/' . $folder_name . '/' . trim($file));
			} else if (substr($file, -3) == '.js') {
				wp_enqueue_script('jwd-user-script-' . $key, $url . '/' . $folder_name . '/' . trim($file));
			}
		}
	}
}
add_action('wp_enqueue_scripts', 'load_user_files');

Penjelasan:

• Baris ke 2 digunakan agar wordpress mengenali shortcode yang kita buat.
• Pada baris ke 7 dan 8 digunakan untuk mendeteksi:  jika  halaman sekarang bukan  post atau page (seperti: halaman depan, pencarian, dll) maka abaikan shortcode.
• Pada baris 11 kita definisikan folder tempat  kita menyimpan file, yaitu: user_files.
• Pada line 15,  kita mendefinisikan variabel $url  yang berisi url dari wp-content (fungsi  content_url()), misal: http://www.example.com/wp-content/
• Baris 21 kita gunakan untuk me-load file css, pada contoh ini berlokasi di http://www.example.com/wp-content/user_files/css/default.css, dan baris 23 untuk file javascript, pada contoh ini  http://www.example.com/wp-content/user_files/js/main.js

Langkah 2: Upload File

Selanjutnya kita upload file yang akan kita gunakan ke direktori user_files, upload dapat dilakukan menggunakan text editor  notepad++ (dengan membuat file baru),  FTP Client seperti filezilla, atau plugin wordpress.

Agar memudahkan pengorganisasian, penamaan file bisa menggunakan pola tertentu seperti jenisfile_idpost, misal css_759.css, yang artinya file css tersebut digunakan oleh artikel dengan ID 759. Untuk melihat nomor ID artikel, dapat kita lakukan  melalui berbagai cara, diantaranya melihat  url pada addressbar browser, misal:  http://example.com/wp-admin/post.php?post=759&action=edit, atau menggunkan plugin, selengkapnya dapat dibaca pada artikel:  Cara Mengetahui ID Page, Post, Category, dan Tag Pada WordPress

Langkah 3: Coba

Setelah selesai, cek apakah shortcode kita telah berjalan dengan baik dengan dengan membuat beberapa posting sederhana.

Demikian tutorial mengenai cara load file Javascript atau css pada halaman tertentu di WordPress, semoga bermanfaat…

Salam JWD