Custom Javascript Per Post

Custom Javascript Per Post adalah semacam teknik atau cara menempatkan atau menambahkan kode atau file javascript dalam suatu postingan tertentu dengan tujuan untuk mendukung suatu tampilan atau efek yang diinginkan, seperti menampilkan Google Doodle yang mengandung efek animasi dan lain-lain.

Seperti postingan saya sebelunya tentang custom CSS per post, untuk teknik javascript per post ini hampir sama cara kerjanya yaitu dengan menambahkan fungi javascript pada postingan tertentu secara terpisah dengan file javascript default, dan hanya akan muncul pada postingan tertentu yang telah disetting atau ditambahkan sebelumnya.

Cara penempatannya bisa secara Internal (kode javascript akan ditempatkan di dalam tag head HTML sebelum tag </head>) dan bisa secara External (file javascript nantinya akan ditempatkan terpisah atau di luar file HTML).

1. Cara membuat Custom Javascript Per Post secara Internal

Tambahkan kode berikut ini di file functions.php :

//Custom Javascript Internal
add_action('admin_menu','custom_javascript_hooks');
  add_action('save_post','save_custom_javascript');
  add_action('wp_head','insert_custom_javascript');
  function custom_javascript_hooks()
  { add_meta_box('custom_javascript','Custom Javascript Internal','custom_javascript_input','post','normal','high');
  add_meta_box('custom_javascript','Custom Javascript Internal','custom_javascript_input','page','normal','high'); }
function custom_javascript_input()
  { global $post;
  echo '<input type="hidden" name="custom_javascript_noncename" id="custom_javascript_noncename" value="'.wp_create_nonce('custom-javascript').'" />';
  echo '<textarea name="custom_javascript" id="custom_javascript" rows="5" cols="30" style="width:100%;
  ">'.get_post_meta($post->ID,'_custom_javascript',true).'</textarea>'; }
function save_custom_javascript($post_id)
  { if (!wp_verify_nonce($_POST['custom_javascript_noncename'],'custom-javascript')) return $post_id;
  if (defined('DOING_AUTOSAVE') && DOING_AUTOSAVE) return $post_id;
  $custom_javascript = $_POST['custom_javascript'];
  update_post_meta($post_id,'_custom_javascript',$custom_javascript); }
function insert_custom_javascript()
  { if (is_page() || is_single())
  { if (have_posts()):while (have_posts()):the_post();
  echo '<script type="text/javascript">'.get_post_meta(get_the_ID(),'_custom_javascript',true).'</script>';
  endwhile;
  endif;
  rewind_posts(); }
; }

2. Cara membuat Custom Javascript Per Post secara External

Tambahkan kode berikut ini di file functions.php :

//Custom Javascript External
  add_action('admin_menu','custom_javascript_external_hooks');
  add_action('save_post','save_custom_javascript_external');
  add_action('wp_head','insert_custom_javascript_external');
  function custom_javascript_external_hooks()
  { add_meta_box('custom_javascript_external','Custom Javascript External','custom_javascript_external_input','post','normal','high');
  add_meta_box('custom_javascript_external','Custom Javascript External','custom_javascript_external_input','page','normal','high'); }
function custom_javascript_external_input()
  { global $post;
  echo '<input type="hidden" name="custom_javascript_external_noncename" id="custom_javascript_external_noncename" value="'.wp_create_nonce('custom-javascript-external').'" />';
  echo '<textarea name="custom_javascript_external" id="custom_javascript_external" rows="5" cols="30" style="width:100%;
  ">'.get_post_meta($post->ID,'_custom_javascript_external',true).'</textarea>'; }
function save_custom_javascript_external($post_id)
  { if (!wp_verify_nonce($_POST['custom_javascript_external_noncename'],'custom-javascript-external')) return $post_id;
  if (defined('DOING_AUTOSAVE') && DOING_AUTOSAVE) return $post_id;
  $custom_javascript_external = $_POST['custom_javascript_external'];
  update_post_meta($post_id,'_custom_javascript_external',$custom_javascript_external); }
function insert_custom_javascript_external()
  { if (is_page() || is_single())
  { if (have_posts()):while (have_posts()):the_post();
  echo '<script type="text/javascript" src="'.get_post_meta(get_the_ID(),'_custom_javascript_external',true).'"></script>';
  endwhile;
  endif;
  rewind_posts(); }
; }

Anda bisa memilih cara pertama (Internal) atau cara kedua (External) atau bisa juga kedua cara tersebut dipasang sekaligus (internal dan external) tergantung keperluannya, maksudnya jika kode javascript hanya sedikit lebih baik menggunakan cara Internal dan jika kode javascript cukup banyak atau akan menggunakan file javascript yang disimpan di server lain bisa menggunakan cara External.

Dengan penambahan fungsi tersebut nantinya akan menghasilkan sebuah box berupa text area di bawah text area postingan. Ketika akan menambahkan fungsi custom javascript per post tambahkan kode-kode javascript tersebut ke dalam box tersebut (jika secara Internal).

Untuk cara yang kedua (External) kode-kode javascript anda simpan sebagai file tersendiri (file javascript) kemudian anda upload ke server hosting anda, selanjutnya masukkan URL dari file javascript yang telah anda buat sebelumnya ke dalam box tersebut (box Custom Javascript External)

Screenshotnya kira-kira seperti ini :

Dalam kondisi tertentu anda juga bisa menempatkan custom javascript ini di bagian footer (tentunya harus disetting lagi kodenya) supaya tidak memberatkan loading, namun pada fungsi tertentu javascript menjadi tidak berfungsi ketika ditempatkan di bagian footer.