Sukandia Personal Blog

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