Heru Kurniawan WebLog

Menambahkan Thumbnails pada postingan di WordPress

Maaf kalo postingan ini sudah basi banget, pasti rekans blogger sering banget ngelihat gambar – gambar kecil pada postingan excerpt atau disebut thumbnails salah satu contohnya pada blog ini. Gimana sih cara buatnya? nah itu pertanyaan pertama yang aku ucapin. dalam kasus ini blog yang gunain CMS WordPress sebagai engginenya. kalau untuk web – web yang dibuat sendiri mah gampang.

Ternyata wordpress sudah ada yang buat pluginya untuk nyisipin thumbnails pada postingan. Tapi aku merasa kok buat nampilin gthu aja harus gunain plugin. darah koder ku mulai panas (lebay Mode On), sempat bingung karna seperti kasus – kasus yang aku buat sebelumnya ( Tidak Terlalu Familiar sama CMS ). mulai deh muter – muter di google, mulai dapat pencerahan ternyata kita bisa gunain custom field yang terdapat pada halaman posting. ditambah sedikit bincang – bincang via YM dengan teman yang pernah gunain custom field semakin dapat pencerahan. kayaknya cukup sudah mukadimahnya langsung praktek aja menyisipkan thumbnails tanpa plugin.

Langkah Pertama
buatlah sebuah postingan sebagai percobaan, selanjutnya buatlah sebuah field seperti gambar dibawah

jika sudah selesai click “add custom field”

langkah kedua
buka folder template yang digunain, untuk template2 standart yang sudah menggunakan function expert mungkin kira – kira potongan kodenya untuk menampikan 10 postingan terakhir di halaman awal.

berikut mengambil contoh dari template “MAZE”

1
2
3
4
5
6
7
8
9
10
11
12

<?php while (have_posts()) : the_post(); ?>
	<div class="post" id="post-<?php the_ID(); ?>">
	<h2><a href="<?php the_permalink() ?>"><?php the_title(); ?></a></h2>
	<div class="descr">
	under <?php the_category(', ') ?> (<?php comments_popup_link('No Respond', '1 Respond', '% Responds'); ?>)
    </div><!--end of #descr-->
	<div class="entry">
		<?php the_excerpt() ?>
		<?php the_tags(__('Tags: '), ', ', ' '); ?><?php edit_post_link(__('Edit This')); ?>
		</div><!--end of .entry-->
	</div><!--end of .post-->
<?php endwhile; ?>

itu koding defaultnya, sekarang sekenarionya kita ingin memanggil field thumbnails. silahkan copas(copy paste) potongan program ini

1
2

<? if(get_post_meta($post->ID,"Thumbnail","true")!=""){?>
					<img src="<? echo get_post_meta($post->ID,"Thumbnail","true");?>" width="100" align="left" hspace="5" style="border:solid 1px #ccc; padding: 2px;" ><?php } ?>

letakkan potongan code program tersebut sebelum

1

<?php the_excerpt() ?>

Berarti bentuk kode programnya kurang lebih seperti ini

1
2
3
4
5
6
7
8
9
10
11
12
13
14

<?php while (have_posts()) : the_post(); ?>
	<div class="post" id="post-<?php the_ID(); ?>">
	<h2><a href="<?php the_permalink() ?>"><?php the_title(); ?></a></h2>
	<div class="descr">
	under <?php the_category(', ') ?> (<?php comments_popup_link('No Respond', '1 Respond', '% Responds'); ?>)
    </div><!--end of #descr-->
	<div class="entry">
		<? if(get_post_meta($post->ID,"Thumbnail","true")!=""){?>
	<img src="<? echo get_post_meta($post->ID,"Thumbnail","true");?>" width="100" align="left" hspace="5" style="border:solid 1px #ccc; padding: 2px;" ><?php } ?>
		<?php the_excerpt() ?>
		<?php the_tags(__('Tags: '), ', ', ' '); ?><?php edit_post_link(__('Edit This')); ?>
		</div><!--end of .entry-->
	</div><!--end of .post-->
<?php endwhile; ?>

selesai, Untuk template - template lain silahkan disuaikan saja. simple kan jadi kita ngak perlu gunain plugin - plugin lagi.

maaf kalo topik yang aku sajikan udah basbang (Basi Banget) tapi sekedar mengingatkan rekan - rekan blogger dan meramaikan kata kunci ini di google.

hepi koding pren

Posted in: Pemrograman, PHP, Wordpress

Tags: cms, koding, PHP, plugin, Thumbnails, Wordpress

This entry was posted on Monday, August 10th, 2009 at 4:30 am and is filed under Pemrograman, PHP, Wordpress. You can follow any responses to this entry through the RSS 2.0 feed. You can leave a response, or trackback from your own site.