Cara Menampilkan Gambar Thumbnail Postingan WordPress

Hai, sudah buat resolusi yang bagus di tahun 2012 ini kok saya malah malas menulis di blog ini ya? Terbukti, postingan ini malah postingan perdana saya di tahun 2012. Duh, kemana saja selama ini? hihihi…

Ohya, kali ini saya mau kasih sedikit tutorial yang kebetulan banyak di tanya teman-teman saya. Sebenarnya ada juga sih tutorial sejenis di blog lain, tapi kebanyakan agak njelimet dan sering tidak berhasil. Pasti capek kan udah ngikuti step by step tapi gak berhasil juga.. Saya dulu juga mengalaminya kok.. :D

Sebelumnya saya kasih penjelasan dulu ya. Gambar Thumbnail adalah gambar ukuran kecil yang bisa mewakili isi dari sebuah postingan di blog. Contohnya seperti pada halaman depan (Homepage) blog ini. Coba lihat disini.

Perhatian : Tutorial ini hanya berlaku untuk blog wordpress dengan self hosting. Oke! ^__^

Sekarang bagaimana cara membuatnya?
Gampang kok! Kita hanya akan mengedit 3 buah file yang ada di themes WP kita. Mari kita mulai…

1. Buka file functions.php lalu tambahkan script berikut di bagian paling bawah sebelum kode ?>

add_theme_support( 'post-thumbnails' );
set_post_thumbnail_size( 60, 60, true );

Ini gunanya untuk mengaktifkan fungsi thumbnail di blog kita. Ganti angka 60 dengan ukuran pixel yang anda inginkan. Lalu simpan / Save.

2. Buka file Index.php atau home.php (file yang di gunakan untuk menampilkan halaman depan). Cari kode kira-kira seperti ini :

<?php the_content(); ?> atau <?php the_excerpt(); ?>

Kode itu untuk memanggil isi seluruh atau sebagian postingan kita di homepage. Kalau sudah ketemu (walau kodenya agak berbeda) copy script untuk memanggil thumbnail berikut ini :

<?php if (!is_single()) {
  if ( has_post_thumbnail() ) {
    the_post_thumbnail();
  } else {
    echo '<img src="'.get_bloginfo('template_url').'/images/thumbnail.jpg" alt="'.get_the_title().'" class="wp-post-image"/>';
  }
}
?>

Sekarang simpang dan lihat hasilnya. Kalau tidak ada error, berarti anda telah sukses membuatnya. Kemungkinan belum ada gambar thumbnail yang tampil kan? Sekarang bagai mana memasukan gambar yang kita inginkan sebagai thumbnail?

3. Buat postingan baru atau edit postingan yang sudah ada. Pada bagian sebelah kanan tempat menulis, ada tab baru bernama “Featured Image”. Nah untuk membuat gambar thumbnail pada postingan itu, cukup meng-uploadnya lewat featured image itu. Usahakan gambar yang di upload sudah berukuran kecil atau sama dengan ukuran yang kita tentukan pada functions.php tadi agar tidak berat karena kebanyakan thumbnail.

Gambar setelah di upload

4. Bagaimana kalau postingan tertentu tidak ada gambar thumbnailnya? Membiarkan kosong tanpa thumbnail pasti terlihat jelek, ini bisa kita akali dengan membuat gambar default. Artinya jika postingan itu tidak kita masukan thumbnail, maka akan di panggil gambar default yang sudah kita tentukan.

Caranya cukup membuat gambar dengan ukuran yang sama, dan beri nama gambar thumbnail.jpg lalu simpan di dalam folder images pada theme WP kita. Coba lihat hasilnya…

5. Agar bentuk dan posisi thumbnail tampak rapi, kita bisa menambahkan CSS pada style-nya. Buka style.css dan copas code berikut :

img.wp-post-image {
  float:left;
  margin-right:5px;
  width:60px;
  height:60px;
}

Anda bisa berkreasi menyesuaikan style pada gambar thumbnail tersebut sesuai selera anda.

Mudah bukan? Semoga bermanfaat… :)

Copyright © 2011 Catatan Masyhury | Web Desainku | Desainku.Net | Ideku.info