Membuat Tampilan Postingan Berbeda-beda Pada WordPress Ala Blogazine

sumber : http://www.tutorial-webdesign.com/membuat-tampilan-postingan-berbeda-pada-wordpress-ala-blogazine/

Membuat tampilan layout artikel atau post berbeda-beda pada wordpress seperti yang dilakukan pecinta blogazine cukup menarik untuk dicoba, walaupun tutorial-webdesign.com bukanlah penganut blogazine, tapi kali ini kita akan membahas sedikit dasar-dasar pembuatannya.

Perbedaan nya yaitu:

• Tidak ada header (logo)
• Posisi Konten yang biasanya ada ditengah sekarang ada dikiri, sedangkan sidebar yang ada di kiri berpindah ketengah.
• Warna menu atas berubah.
• Warna sidebar juga berubah.

Nah bagaimana membuatnya? ada banyak cara untuk membuat seperti itu, ada yang menggunakan menggunakan plugin dan ada yang menambahkan atau membuat script sendiri.

Start

Pada kesempatan ini kita akan mencoba dengan manual, yaitu dengan menambahkan script, untuk itu anda perlu merubah sedikit file function.php yang ada di folder theme wordpress anda.

Tambahkan script berikut di wp-content/themes/nama_theme/functions.php

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', 'CSS Untuk Post', 'custom_css_input', 'post', 'normal', 'high');
	add_meta_box('custom_css', 'CSS Untuk Page', '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();
	}
}

Script tersebut terdiri dari 4 fungsi, dimana 3 fungsi itu akan digunakan untuk berinteraksi dengan core wordpress, fungsi tersebut yang kita deklarasikan dengan add_action.

add_action('admin_menu', 'custom_css_hooks');
add_action('save_post', 'save_custom_css');
add_action('wp_head','insert_custom_css');

custom_css_hooks & custom_css_input : untuk mendeklarasikan dan menambahkan metabox, disini yaitu sebuah textarea dengan nama (CSS Untuk Post) yang akan muncul di setiap pembutan Post dan (CSS Untuk Post) yang akan muncul disetiap pembuatan Page.

save_custom_css: untuk aksi menyimpan hasil nya ke database.

insert_custom_css: untuk menuliskan CSS yang diinput ke header website agar tampilan bisa berubah.

Hasil

Hasilnya yaitu sebuah textarea akan muncul dibagian bawah ketika anda menulis sebuah post atau page.Text area “CSS untuk Post” sudah muncul

Cara Penggunaan.

Silahkan masukan script css untuk merubah website anda pada bagian CSS Untuk Post atau CSS Untuk Page, untuk merubahnya tentu anda harus mengetahui ID dan Class apa saja yang ada di template yang digunakan.

Disitu kami menghilangkan header dengan menambahkan display:noneuntuk header
sidebar pindah kekanan dengan merubah float menjadi float:right, sedangkan konten ditambahkan float:left.
Dan pengaturan-pengaturan lain silahkan di explorasi sendiri

Untuk mengetahuinya anda bisa membuka script pada template nya atau menggunakan firebug untuk mengetahui nama ID atau Class yang digunakan.

Masukan-Masukan Lain

• untuk membuat tampilan 100% barubah dengan cara ini, dan kamu punya niat untuk benar-benar menerapkan blogazine, kamu bisa mengosongkan css untuk keperluan pengaturan artikel yang ada di style.css, dan menuliskan tampilan untuk setiap post melalui kolom css yang dibuat (Tapi ya memang memakan waktu dan tenaga).
• Kompres css yang akan dimasukan terlebih dahulu untuk mengurangi kecepatan website.
• Artikel yang bisa jadi referensi: The death of the boring blog post?

Semoga bermanfaat