How to add thumbnail image to a post

July 14, 2008 by admin 

Berikut tutorial singkat cara menambahkan sebuah gambar kecil (thumbnail) kedalam daftar postingan disebuah blog yang menggunakan WordPress CMS dengan memanfaatkan custom fields _nya. Saya tidak akan membahas tentang custom fields itu sendiri, karena akan membuat kita pusing sendiri dalam memahami maupun menerapkannya kedalam blog kita, maklum aku juga masih newbie dibidang WordPress :)

WordPress has the ability to allow post authors to assign custom fields to a post. This arbitrary extra information is known as meta-data. Meta-data is handled with key/value pairs. The key is the name of the meta-data element. The value is the information that will appear in the meta-data list on each individual post that the information is associated with.

Itulah sedikit gambaran tentang custom fields yang saya temukan di sini

Langsung saja, berikut langkah-langkah yang perlu anda diikuti:

1. Bukalah file style.css yang ada di folder WordPress theme blog anda dengan dengan notepad,
dan tambahkan kode css berikut di dalam file style.css tersebut, lalu simpan:


img.kiri {
	margin: 0 10px 0 0;
	float: left; padding: 4px;
	border: 1px solid #b3d2fc;
	background: #fff;
	width:100px; height:100px;
}

2. Masih di folder theme WP anda, selanjutnya bukalah file index.php

Temukan baris dan code berikut:


<?php the_content('Read the rest of this entry &raquo;'); ?>

Lalu gantilah dengan code berikut:


<?php
$values = get_post_custom_values("thumbnail");
if (isset($values[0])) {
?>
<a href="<?php the_permalink() ?>" title="<?php the_title(); ?>">
<img class="kiri"
src="<?php $key="thumbnail"; echo get_post_meta($post->ID, $key, true); ?>"
alt="<?php the_title(); ?>" /></a>
<?php } ?>
<?php the_content('Read the rest of this entry &raquo;'); ?>

Setelah selesai simpanlah.

3. Terapkan langkah ke-2 ke file-file archive.php dan search.php jika perlu.

4. Selanjutnya upload file-file tersebut ke server hosting anda.

5. Saatnya menerapkannya pada postingan anda, cobalah buka salah satu postingan artikel blog anda, dan buatlah sebuah image (gambar) kecil, dalam contoh ini menggunakan ukuran 100pixel x 100pixel dan uploadlah seperti biasa, dalam hal ini anda hanya perlu mengetahui URL file gambar thumbnail tersebut.

6. Terakhir tambahkanlah URL thumbnail gambar tersebut di custom fields, dengan Key: thumbnail dan Value: URL dari gambar thumbnail tadi dengan cut and paste saja, lalu klik tombol “Add Custom Field”. Selanjutnya Save dan lihatlah hasilnya. Jika berhasil anda akan melihat postingan tersebut sudah berisi gambar kecil disebelah kirinya.

Selamat mencoba dan semoga berhasil!

p.s. Klik disini agar tampilan source code_nya lebih enak ;)

Share and Enjoy:
  • Digg
  • del.icio.us
  • Facebook
  • Mixx
  • Google
  • YahooMyWeb

Comments

7 Responses to “How to add thumbnail image to a post”

  1. Rivermaya on August 11th, 2008 8:35 pm

    Terima kasih kode tambahannya :)
    Rivermayas last blog post..Menyembunyikan Kategori Tertentu

    [Reply]

  2. Permana Jayanta on August 27th, 2008 9:25 am

    Hehehe … nice inpo …
    Tapi pake edit2x kodenya ya … ntar klo ganti theme jd bgg …
    Btw, boleh tuh klo ditambahin screenshot hasilnya klo sdh jadi :)
    Permana Jayantas last blog post..Bermain dengan warna

    [Reply]

  3. 474849 on September 11th, 2008 2:17 pm

    Wah, keren bgt nih tutorialnya….
    makasih banyak ya om ^^!

    474849s last blog post..Dr Jekyll and Mr Hyde

    [Reply]

  4. Escort Directory London on October 8th, 2008 11:49 pm

    Thanks I have always wondered how to do this in wordpress. THis will come in useful for our escort blog.

    [Reply]

  5. ide on October 24th, 2008 2:11 pm

    Thanks mas. Menambah khasanah pengetahuan ttg wordpress nih

    ides last blog post..StatPress plugins Wordpress

    [Reply]

  6. hendra on November 13th, 2008 12:02 am

    om ini source kodenya di klik kok ga’ muncul om ?

    hendras last blog post..TESTOMONIAL WINDOWS 7

    [Reply]

  7. Lea Long on November 13th, 2008 8:41 am

    v92xvwh4y1g3scez

    [Reply]

Feel free to leave a comment...
and oh, if you want a pic to show with your comment, go get a gravatar!