Custom CSS Per Post

CSS Per Post adalah semacam teknik atau cara menempatkan atau menambahkan file CSS dalam suatu postingan tertentu untuk mendukung suatu tampilan yang diinginkan, seperti menampilkan hasil tutorial CSS, demo CSS3 dan lain-lain, bahkan kita bisa membuat tampilan yang berbeda untuk setiap postingan, seperti pengaturan tampilan header, background, footer dan lain-lain.

CSS per post ini bisa juga digunakan untuk konsep blogazine dalam bentuk yang sederhana terutama pada template satu kolom. Untuk tampilan konsep blogazine yang lebih radikal anda bisa menggabungkannnya dengan tampilan layout (menggunakan template) yang berbeda-beda untuk tiap postingannya atau bisa digunakan pada halaman tertentu dan atau kategori tertentu (membuat tampilan postingan yang berbeda untuk kategori tertentu).

File CSS per post ini ditempatkan secara terpisah dengan file css default, dan hanya akan muncul pada postingan tertentu yang telah disetting atau ditambahkan sebelumnya. Cara penempatannya bisa secara External (file CSS ditempatkan terpisah atau di luar file HTML), cara ini pernah dibahas oleh Kang Hari Mulya di postingan ini CSS Per Post, bisa secara Internal (Kode CSS dipasang di dalam tag head HTML) dan Inline (kode CSS langsung dipasang di tag HTML) cara ini tidak disarankan apalagi jika HTML doctype declaration yang digunakan adalah Strict, untuk yang Transitional mungkin masih bisa ditoleransi.

Di postingan ini saya ingin share tentang CSS Per Post dengan cara Internal, kode CSS nantinya akan ditempatkan di dalam tag head HTML secara automatis pada postingan tertentu.  Caranya tambahkan kode berikut di file functions.php :

//Custom CSS Widget
add_action('admin_menu', 'custom_css_hooks');
add_action('save_post', 'save_custom_css');
add_action('wp_head','insert_custom_css');
function custom_css_hooks() {
 add_meta_box('custom_css', 'Custom CSS', 'custom_css_input', 'post', 'normal', 'high');
 add_meta_box('custom_css', 'Custom CSS', 'custom_css_input', 'page', 'normal', 'high');
}
function custom_css_input() {
 global $post;
 echo '<input type="hidden" name="custom_css_noncename" id="custom_css_noncename" value="'.wp_create_nonce('custom-css').'" />';
 echo '<textarea name="custom_css" id="custom_css" rows="5" cols="30" style="width:100%;">'.get_post_meta($post->ID,'_custom_css',true).'</textarea>';
}
function save_custom_css($post_id) {
 if (!wp_verify_nonce($_POST['custom_css_noncename'], 'custom-css')) return $post_id;
 if (defined('DOING_AUTOSAVE') && DOING_AUTOSAVE) return $post_id;
 $custom_css = $_POST['custom_css'];
 update_post_meta($post_id, '_custom_css', $custom_css);
}
function insert_custom_css() {
 if (is_page() || is_single()) {
  if (have_posts()) : while (have_posts()) : the_post();
   echo '<style type="text/css">'.get_post_meta(get_the_ID(), '_custom_css', true).'</style>';
  endwhile; endif;
  rewind_posts();
 }
}

Dengan penambahan fungsi tersebut nantinya akan menghasilkan sebuah box berupa text area di bawah text area postingan. Ketika akan menambahkan fungsi css secara khusus tinggal masukkan kode css tersebut ke dalam box tersebut. Karena menggunakan cara Internal jangan lupa untuk dikompress terlebih dahulu supaya ukuran file html postingan secara keseluruhan tetap kecil ukurannya.

External CSS atau Internal?

Di atas sudah saya singgung cara penempatan code css per post bisa secara External atau Internal, jika muncul pertanyaan, mau pilih cara yang mana? Jika code css-nya sangat banyak (ukuran file cukup besar) akan lebih baik menggunakan cara yang External supaya file HTML tidak membengkak ukurannya tapi akan menambah jumlah HTTP request, namun jika code CSS tidak terlalu banyak akan lebih baik jika menggunakan cara yang Internal (tidak akan menambah jumlah HTTP request) hanya akan menambah sedikit ukuran file HTML dalam postingan tersebut (CMIIW= Correct Me If I’m Wrong).

Referensi :
http://snipplr.com/view/26040/custom-css-per-page-and-post-for-wordpress/
http://digwp.com/2010/02/custom-css-per-post/

Related Post