ffCCBot/2.0 (http://commoncrawl.org/faq/)
NEW!! Buku Query MySQL Lihat Detail » x

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

 

Recomended Post

Silakan tinggalkan komentar

*

Like Us

Dapatkan update artikel terbaru via E-Mail
  1. Query MySQL di Dalam PHP Loop – Bad Practice !!!

  2. Software Kompres dan Optimasi Gambar / Foto (JPG dan PNG) – Tested

  3. 40+ Theme WordPress Gratis Untuk Blog – Modern & Responsive

  4. Eksklusif Cheat Sheet PHP Bahasa Indonesia – Pendamping Belajar PHP

  5. PHP FORM III: Menampilkan Data MySQL Dengan PHP dan Form HTML

  6. Tutorial PHP Form II: Menampilkan Hasil Input Form HTML dengan PHP

  7. Tutorial PHP Form I: Menghubungkan Form HTML dengan PHP

  8. Menampilkan Data Dari Beberapa Tabel MySQL – JOIN Pada MYSQL

  9. Memahami dan Menampilkan Tanggal dan Waktu Pada PHP

  10. Menghitung Selisih Waktu Dengan PHP – Cara Termudah