Tutorial Design Unik dan Berbeda-beda di Tiap Artikel Blog WordPress
Design unik dan berbeda-beda di tiap artikel blog adalah konsep Blogazine. Pertama kali mengetahui tentang Blogazine saya agak ragu dengan konsep Blogazine. Tapi berselang beberapa hari kemudian saya malah semangat untuk mempelajari dan mendalami Blogazine, yaitu konsep blogging yang membuat tiap halaman memiliki design dan layout berbeda-beda dan unik, sesuai dengan topik artikelnya.
Mengikuti trend Blogazine sangat memerlukan kerja keras dan kretivitas tinggi. Bagaimana tidak karena setiap kita akan mem-publish artikel baru kita terlebih dahulu harus mempersiapkan rancangan design nya, baik itu CSS dan image atau gambarnya. Kebayang khan repotnya?!
Sebelum berkenalan dengan Blogazine, saya telah menerapkan design unik untuk masing-masing postingan blog dengan tujuan untuk design Landing Page. Yang mana design Landing Page tentu saja harus berbeda tiap artikel / postingan nya. Well, apapun tujuan Anda dalam men-design agar tiap artikel blog WordPress anda unik dan berbeda-beda, berikut ini tutorial nya.
Tutorial Design Unik dan Berbeda-beda di Tiap Artikel Blog WordPress
Tutorial ini adalah yang saya terapkan dalam design blog saya. Salah satu contohnya dapat Anda lihat di halaman konfirmasi email untuk subsribers.

1. Tambahkan kode berikut di file function.php template Anda. Lokasinya ada di: wp-content -> themes -> your theme -> function.php
<?php
/**
* Define a constant path to our single template folder
*/
define(SINGLE_PATH, TEMPLATEPATH . ‘/single’);
/**
* Filter the single_template with our custom function
*/
add_filter(‘single_template’, ‘my_single_template’);
/**
* Single template function which will choose our template
*/
function my_single_template($single) {
global $wp_query, $post;
/**
* Checks for single template by ID
*/
if(file_exists(SINGLE_PATH . ‘/single-’ . $post->ID . ‘.php’))
return SINGLE_PATH . ‘/single-’ . $post->ID . ‘.php’;
/**
* Checks for default single post files within the single folder
*/
if(file_exists(SINGLE_PATH . ‘/single.php’))
return SINGLE_PATH . ‘/single.php’;elseif(file_exists(SINGLE_PATH . ‘/default.php’))
return SINGLE_PATH . ‘/default.php’;return $single;
}
?>
2. Buat folder dengan nama ‘single’ di dalam folder template WordPress Anda
wp-content
– themes
– — your theme
– — – single
3. Di dalam folder ‘single’, buat file php di folder tersebut dengan nama single-postidblog.php, missal: single-20.php
wp-content
– themes
– — your theme
– — – single
– — – — – single-20.php
4. Untuk memanggil file CSS, silahkan tambahkan atau ganti stylesheet pada file single-20.php dengan kode berikut (di dalam head tag <head>):
<link rel=”stylesheet” href=”<?php bloginfo(‘template_url’); ?>/single/<?php echo $post->ID; ?>/style.css” type=”text/css” media=”screen” />
Kode di atas berarti kita memanggil file CSS di lokasi:
wp-content
– themes
– — your theme
– — – single
– — – — – 20
– — – — – — style.css
Folder 20 adalah nomor post id blog Anda. Berarti Anda harus membuat folder dengan nama id post blog Anda, contoh di atas dengan post id 20, dan file style.css di dalam folder 20 tersebut.
Untuk melihat ID post blog Anda, lihat di edit post, kemudian dekatkan mouse di link edit. Maka di status bar akan muncul urlnya, dan angka terakhir di url tersebut adalah id postnya.

5. Selanjutnya biarkan kreatifitas dan imajinasi Anda bermain
.
Keterangan Tambahan
Semua design dan layout terletak pada file single (pada contoh di atas adalah single-20.php). Di sini anda bisa ber-eksperimen; menentukan style CSS, membubuhi gambar dan background, dan lain-lain.
Anda bisa searching sebagai tambahan atau alternative dari tutorial ini, silahkan search / cari dengan beberapa dasar keywords berikut: single post template atau unique blog post template.
Selamat mencoba!













test ah…mudah2an berhasil hihi
Reply
Tantan Reply:
March 29th, 2010 at 2:44 pm
@zaki, Good luck bro! smoga berhasil yah
Reply
mantap infonya, langsung di coba…
Reply
Tantan Reply:
March 29th, 2010 at 3:39 pm
@Yufi PS, Slamat mencoba! Moga berhasil ya bro
Reply
Wah,,untuk wordpress yah,,blogspot.com kira2 bisa gak ya Kak,,,he,he,,
Reply
mantab nian tutorial nya, singkat padat jelas dan berisi… hehe.
eniwe, kebayang tuh ribet nya tiap postingan berarti diatur sendiri css nya kalau mau berbeda tampilan.
Namun begitu, ini adalah tantangan baru yg suka coding dan templating. dan mungkin bisa dibuat jg ketentuan untuk masing2x post ID nya dengan design yg sudah dirancang duluan… hmm pantas dicoba neh… makasih share nya bozz..
btw, untuk koneksi, krn lum bisa selain isat ku pending dl boz. sementara pake yg ada dulu, tp suatu saat pasti perlu neh kalau dah bener2x ready blogging2x maning.. he he.
sukses bozz..
salam
Reply
sangat menarik, terima kasih
Reply
Ini memang sangat menantang. tapi kebayang betapa ribet prosesnya. jadi perlu waktu utk menggarapnya. Trims sharingnya yg menarik …
Salam dari Surabaya
A Fauzi
Reply
Tantan Reply:
June 23rd, 2010 at 12:36 pm
Salam kembali bos
from Bandung
Reply
unik juga yah, tiap halaman berbeda.. trus pengalaman mas pas bikinnya gimana? apa gak ribet tuh?
Reply
Tantan Reply:
June 23rd, 2010 at 12:35 pm
Tentu saja ribet
Reply
wah keren nih. ikutan ah..
Reply
Kalo buat diblogspot gmna caranya gan ??? kirim ke email saya
Reply