Custom CSS per Post di WordPress

 Blogging, Tutorial wordpress

custom css per port kondep blogazineCustom CSS per post/page merupakan salah satu cara menampilkan tampilan theme yang berbeda-beda untuk tiap-tiap postingan, atau sering disebut sebagai konsep blogazine.

Jadi jangan bingung melihat sebuah blog atau website yang tampilan home dan pagenya berbeda. Itu bukan menggunakan dua buah theme, melainkan menggunakan custom CSS per post. Dengan teknik custom css per post akan membuat theme blog anda lebih optimal dan menarik di mata pengunjung. Sebagai contoh lihat situs-situs berita seperti detik.com, kompas.com, vivanews.com dll, theme yang digunakan menerapkan konsep blogazine. Tapi untuk membuat theme yang seperti itu cukup sulit untuk seorang nubi, karena butuh kemampuan yang sudah mahir dalam CSS dan php.

Buat yang masih belajar-belajar ngedit theme custom CSS per post ini bisa digunakan untuk mengubah background, header, footer, sidebar, jenis font, warna dan banyak lagi lainnya, tergantung kemampuan anda berkreasi.

Cara membuat custom CSS per post/page

Teknik ini menggunakan CSS yang terpisah dengan file CSS default, dan CSS yang anda buat hanya akan muncul pada postingan tertentu yang telah anda modifikasi CSS-nya. Banyak cara untuk membuat custom CSS per post, diantaranya:

  1. Cara external
    Cara ini menempatkan file CSS di tempat terpisah atau di luar file HTML. Jika kode CSS yang ingin di custom cukup banyak maka gunakanlah cara external, tapi cara ini akan menambah jumlah HTTP request.
    Contoh script:

    <head> <link rel = "stylesheet" href = "namafile.css" type = "text/css" media = "screen" /> </head>
  2. Cara internal
    Cara ini menempatkan file CSS di dalam head tag HTML. Jika kode CSS yang ingin di custom tidak banyak maka gunakanlah cara internal. Cara ini tidak menambah jumlah HTTP request, namun akan menambah ukuran file HTML tergantung banyaknya kode CSS yang ditambahkan.
    Contoh script:

    <head>
    body {background:#EEE;color:#333}
    .....
    </head>
  3. Cara inline
    Cara ini menempatkan file CSS langsung di kode htmlnya.
    Contoh script:

    <div style="float:left;margin:20px">bla bla bla</div>

Custom CSS per post/page dengan cara CSS External

Sebenarnya untuk theme wordpress tanpa custom biasanya sudah menerapkan cara external.  Namun tidak ada custom CSS per post, semua halaman blog ketika di akses akan menggunakan satu CSS tersebut.

Berikut ini cara membuat blog custom CSS  external di wordpress selfhosting.

  1. Buka file function.php theme yang digunakan melalui
  2. Tambahkan kode di bawah ini ke dalam function.php
    function cssperpost() {
    global $post;
    if (is_single()) {
    $currenttitle = $post->post_name;
    $serverfilepath = TEMPLATEPATH.'/css-per-post/'.$currenttitle.'.css';
    $publicfilepath = get_bloginfo('template_url');
    $publicfilepath .= '/css-per-post/'.$currenttitle.'.css';
    if (file_exists($serverfilepath)) {
    echo "< link rel='stylesheet' type='text/css' href='$publicfilepath' media='screen'/>"."\n";
    }
    }
    }
    add_action('wp_head', 'cssperpost');
  3. Buat folder baru dengan nama css-per-post (letak folder ada di dalam theme yg digunakan)
  4. Buat file CSS yang berisikan kode CSS untuk postingan yang ingin di custom. Beri nama CSS tersebut sesuai dengan judul artikel yang ingin di custom.

Ketika artikel di buka maka otomatis akan di arahkan ke file CSS yang memiliki nama yang sama dengan judul artikel.  Untuk custom postingan lainnya lakukan seperti cara diatas (untuk folder tetap sama).

Custom CSS per post/page dengan cara CSS Internal

Kalau CSS internal ini biasanya digunakan oleh setingan deafault theme blogspot. Nah sekarang kita mau buat ini di wordpress tapi untuk CSS postingan tertentu saja. Caranya dengan menambahkan kode berikut di file function.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();
	}
}

Setelah kode diatas di tambahkan ke file function.php maka otomatis menghasilkan sebuah box berupa text area Custom CSS, yang mana box tersebut berada di bawah text area editor. Lihat gambar ini untuk lebih jelasnya.

custom css per post di wordpress

Catatan.
Untuk memperkecil ukuan kode CSS silahkan kode CSS tersebut di Compres terlebih dahulu sebelum digunakan, pakai link ini untuk Compress kode CSS. Sekian dulu dari saya Cara Custom CSS per post/page, semoga bermanfaat.

Author: 

Saya adalah pemilik Kaplik.Com, Tujuan saya menulis adalah untuk berbagi pengetahuan maupun pengalaman kepada semua pembaca. Buat yang ingin tanya-tanya bisa langsung Contact ke Google +1, atau bisa melalui facebook. Thanks...

5 Responses

Leave a Reply