Gayakan Blog Korang Dengan Thumbnail !! (WordPress)

A’kum & selamat sejahtera tuan2 & puan2 sekalian alam maya ni.. Al-kisah………………. Taib………………… Post kali ni adalah post tutorial ataupun guide mcm mna nk letak thumbnail dekat blog korang (post thumbnail untuk theme yg x der post thumbnail).. Ni tutorial untuk self-hosted wordpress jer bukan untuk *.wordpress.com mahupun *blogspot.com.. Sila jgn tnya aku pasal blogspot sbb aku x penah guna blogspot so aku x tau selok-belok untuk blogspot..

Pada pendapat aku la.. Contohnya kita letak gambar besar untuk mana2 post, mesti blog kita akan terlalu memanjang ke bawah right? Jenuh lah nk scroll right? Sbb tu aku lagi suka guna thumbnail so blog aku ni kurang skit semaknya.. Btw klau pkai thumbnail ni, pageload pun kurang skit beratnya sbb gmbar kecik.. Klau pkai gmbar besar dekat main page, pageload berat skit.. Dah la connection internet ntah hapa2 ni..

THE GUIDE

Part 1 : Set Up

Firstly, pegi ke : TimThumb Code and then copy smua code yg ada kt page tu dari atas smpai bawah (CTRL+A) & then paste dekat Notepad pastu save as timthumb.php .. Kemudian, create satu folder dalam folder theme yg korang pakai tu, letak nama “scripts“.. Upload file timthumb.php td ke dlm folder “scripts” yg baru korang create td.. Contoh :

1

http://yourdomain.tld/wp-content/themes/your-theme/scripts/timthumb.php

After that, create satu lagi folder dlm folder “scripts” (sub-folder) ni & letak nama “cache“.. CMOD kan folder “cache” tu kepada permission 777 ataupun 0777..

Part 2 : Implementing TimThumb

Masuk dlm folder theme korang & cari file home.php ataupun index.php.. Tengok lah mana satu file yg betul untuk korang modified.. Klau boleh buat backup dlu theme korang tu takut korang salah modified.. Jgn takut untuk mencuba.. Kita belajar dari kesilapan..

Cuba cari code lebih kurang mcm ni :

1

<a href="<?php the_permalink() ?>" rel="bookmark" title="Permanent Link to <?php the_title_attribute(); ?>"><?php the_title(); ?></a>

Bila dah jumpa code yg lebih kurang mcm tu (lebih kurang sbb x smua theme sama/ creator/theme lain2..), letak salah satu dari 2 call function di bawah..

Code 1 : Static Thumbnail

1
2
3
4
5

<?php if ( get_post_meta($post->ID, 'thumb', true) ) { ?>
	<div class="postthumb"> 
		<img src="<?php bloginfo('template_directory'); ?>/scripts/timthumb.php?src=<?php echo get_post_meta($post->ID, "thumb", $single = true); ?>&h=150&w=150&zc=1" alt="<?php the_title(); ?>" width="100" height="57" />
	</div>
<?php } ?>

Code 2 : Clickable Thumbnail (Thumbnail > Post)

1
2
3
4
5

<?php if ( get_post_meta($post->ID, 'thumb', true) ) { ?>
	<div class="postthumb"> 
		<a href="<?php&phpMyAdmin=410c4af8e9e6t1397404&phpMyAdmin=446c4b004362t3f340eda the_permalink(); ?>" rel="bookmark" title="Permanent Link to <?php the_title(); ?>"><img src="<?php bloginfo('template_directory'); ?>/scripts/timthumb.php?src=<?php echo get_post_meta($post->ID, "thumb", $single = true); ?>&h=150&w=150&zc=1" alt="<?php the_title(); ?>" width="150" height="150" /></a> 
	</div>
<?php } ?>

Part 3 : Using The Custom Fields

1 – Letak title post dlu..
2 – Upload gambar yg korang nk guna..
3 – Dekat panel “Custom Fields” ada tulis “Add New Custom Field :”.. Enter New dekat bahagian “Name”, taip kt situ “thumb”
4 – Bahagian kanan dia plak yang “Value” tu letak URL penuh gambar.. Contoh :

1

http://kertaz.net/wp-content/uploads/2009/12/timthumb.jpg

5 – Click “Add Custom Field”..

Part 4 : Customizing Thumbnail Size

Klau korang nk modified size thumbnail tu bagi sesuai dengan blog korang, Edit code yg korang letak dekat index.php / home.php td.. Cari width=”150″ height=”150″ & modified ah ke saiz yg sesuai..

Kalau ada apa2 problem masa try nk guna timthumb ni jgn segan2 drop komen kt bawah pasal problemnya.. Insyallah aku bleh tlong stakat yg mampu.. Sekian..