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/
Saya sudah pernah nyoba kedua cara tersebut Mas…
Kebetulan saya ada blog yg khusus saya pakai uji coba.
Tapi untuk blog utama, saya malah nggak pakai.
Untuk yang suka eksperimen memang sebaiknya menyediakan blog tersendiri demi keamanan dan kenyamanan, kecuali kalau kita rajin backup.
Makasih tutorialnya
Salam.
Reply
Saya belum berani nyoba Kang..
Harus belajar lebih banyak dulu.
Reply
Bang Iwan Reply:6-11-2010 at 22:56
Makasih banyak kang…
Harus buat blog eksperimen juga.
Reply
citromduro Reply:7-11-2010 at 19:52
sama juga saya belum mencoba
Reply
waduh…
saya belum ngerti yang ginian mas…
baca2 dulu ya
Reply
Mohon Ijin belajar lagi bung alwi…
Reply
eh….kecantol si aki lagi ya bung alwi ?
Reply
tomi Reply:7-11-2010 at 14:13
hybrid cars kalau koment di blog sya kok sll kecantol pak akismet yaa…
Reply
Hybrid car Reply:9-11-2010 at 10:07
Apa iya to ? sentimen banget si aki sama saya….
Reply
code css kalau untuk blog biasanya keliatannya internal smua mas.. kecuali kalau blog design/situs photo.. biasanya external :D
Reply
Alwi Reply:7-11-2010 at 16:05
Untuk WordPress menggunakan External CSS penulisannya di header seperti ini :
atau seperti ini :
file css ditempatkan terpisah dg HTML
Untuk blogspot menggunakan Internal CSS seperti ini :
<style type="text/css">
Kode CSS di tulis langsung disini</style>
di area tag head HTML atau sebelum kode</head>
file CSS menyatu dengan file HTML tapi ditempatkan sebelum
</head>
Reply
Hybrid car Reply:9-11-2010 at 10:10
Angkatan jamannya DOS, jadinya agak “kepontal-pontal” belajarnya…. :D
Reply
Vulkanis Reply:1-12-2010 at 17:40
Wah..ini dia luar biasa
Reply
kunjungan perdana di blog kang alwi…
Reply
Kode buat WP ya? Betapa mengerikannya hehe.
Saya masih asik customizable di blogspot, tapi ngga menutup kemungkinan akan ikutan ke WP juga. Semoga kenyataan dalam waktu dekat :)
Salam pak Alwi :)
Reply
jos gan makasih penerangnya sangat bermanfaat nie…sekali lagi terima kasih ya. :D
Reply
Do you people have a facebook fan page? I looked for one on twitter but could not discover one, I would really like to become a fan!
Reply