Memasang Featured Image

Sejak versi 2.9 WordPress memiliki fasilitas baru dengan nama featured image. Ini adalah gambar thumbnail yang mewakili sebuah artikel. Tak banyak blog yang memanfaatkan ini (termasuk blog ini juga), tapi karena kita belajar membuat themes WordPress, jadi kita perlu untuk mempelajarinya juga.

Apalagi, seperti biasa kita lihat di themes-themes premium dimana di bagian home kita bisa melihat sebuah gambar dengan sedikit tulisan dan di bagian artikel, gambar yang lebih besar muncul dengan lebih jelas. Bagaimana sih cara membuatnya? Ternyata gampang lho.

Ada 3 file yang kita edit kali ini yaitu functions.php, index.php dan tentunya style.css untuk mempercantik tampilannya.

Baiklah, di function.php kita pasang kode ini:

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

Gampang ya? Angka 100 mewakili tinggi dan lebar gambar thumbnailnya. Jadi silahkan dimodifikasi sesuka hati.

Untuk memunculkan thumbnailnya, kita edit index.php tambahkan kode ini ditempat dimana anda ingin thumbnail itu muncul. Karena saya ingin dia muncul sebelum judul artikel, maka saya letakan diatas judul artikel seperti ini:

if (!is_single()) {
  if ( has_post_thumbnail() ) {
    the_post_thumbnail();
  } else {
    echo '<img src="'.get_bloginfo('template_url').'/images/thumbnail.png" alt="'.get_the_title().'" class="wp-post-image"/>';
  }
}
?>
<h2 class="title"><a href="<?php the_permalink() ?>" rel="bookmark" title="<?php the_title(); ?>"><?php the_title(); ?></a></h2>

Yang <h2 class="title">...</h2> adalah judul artikel yang muncul di home. Oke, saya coba jelaskan sedikit. Baris pertama berisi kode untuk mengecek apakah ini halaman artikel atau bukan. Kalau bukan halaman artikel, kita munculkan thumbnailnya, tapi kalau di halaman artikel kita hilangkan.

Baris kedua untuk memeriksa apakah artikel tersebut memiliki thumbnail atau tidak. Kalau punya, munculkan thumbnailnya, tapi kalau tidak, munculkan thumbnail default. Dalam hal ini saya menggunakan gambar dengan nama thumbnail.png sebagai thumbnail default.

Kedua gambar diatas baik thumbnail post maupun thumbnail default sama-sama memiliki class dengan nama wp-post-image. Maka dengan mudah bisa kita modifikasi tampilannya agar lebih menarik. Langsung menuju style.css dan tambahkan kode ini:

img.wp-post-image {
  float:left; 
  margin-right:5px; 
  width:100px; 
  height:100px; 
  padding:3px; 
  border:solid 1px #cccccc;
}

Tentunya anda bisa memodifikasi sesuka hati CSS-nya. Sesuaikan dengan themes anda yah. sekarang coba anda lihat tampilan blog anda sekarang

memasang post thumbnail

Tampilannya masih berantakan karena gambar yang kita masukkan di artikel masih keluar di halaman depan.. hehehe.. trus bagaimana dong?

Ditunggu artikel berikutnya ya xixixi…

Dicari dengan kata kunci:

featured image wordpress,gambar tidak muncul di wordpress,featured image,thumbnail tidak muncul,cara membuat Featured Post,membuat thumbnail di wordpress,wordpress featured image,cara membuat thumbnail di wordpress,feature image wordpress,cara membuat featured image di wordpress