Home » Javascript » Custom Javascript Per Post

Custom Javascript Per Post

20 Jun. 201132 comments
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 :
Custom Javascript Per Post

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.

Mudah-mudahan artikel tentang Custom Javascript Per Post ini bisa bermanfaat untuk anda, terima kasih.

Artikel Yang Mungkin Berkaitan :

  1. Google Doodle Art Clokey’s 90th Birthday Animation
  2. Cara Mengatasi Anti Klik Kanan (Disable Right Click)
  3. Yuri Alekseyevich Gagarin
  4. Membuat Show Hide Element Dengan jQuery
  5. Google Doodle : Lunar Eclipse
  6. Animasi Google Earth Day 2011
  7. Yesterday, The Beatles
  8. Google Doodle, Tarian Martha Graham
  9. Cara Membuat Spoiler
  1. 26-12-2011 at 22:47 | #1

    add aku di rangga permana putra _–fb—

    Reply

  2. 18-4-2012 at 20:14 | #2

    saya kurang ngertos,.tujuan pembuatan script ny itu apa,.maaf saya newbie ,.

    Reply

  3. 6-5-2012 at 09:51 | #3

    nice post gan.. sangat membantu.

    Visit balik web ane ya gan

    Thanks

    http://filetheme.com/

    Reply

  4. Asrul
    25-10-2014 at 15:51 | #4

    script macam apa itu ? udah susah di menegerti , kesaar pula

    Reply

Comment pages
0+9=? (Wajib diisi)