ffCCBot/2.0 (http://commoncrawl.org/faq/)
Update: 11-08-2016

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. Tutorial PHP Form II: Menampilkan Hasil Input Form HTML dengan PHP
  2. Tutorial PHP Form I: Menghubungkan Form HTML dengan PHP
  3. Menampilkan Data Dari Beberapa Tabel MySQL – JOIN Pada MYSQL
  4. Memahami dan Menampilkan Tanggal dan Waktu Pada PHP
  5. Menghitung Selisih Waktu Dengan PHP – Cara Termudah
  6. Memahami Fungsi Date Pada PHP
  7. Memahami Fungsi Time, Strtotime, dan Mktime Pada PHP – Memanipulasi Waktu
  8. Memahami Zona Waktu (Timezone) dan Selisih Waktu Pada PHP
  9. Setting ODBC MySQL Untuk Gammu
  10. Cara Install dan Menggunakan Gammu di Windows