Cara Membuat Post Thumbnail di WordPress

 Tutorial wordpress
Cara Membuat Post Thumbnail di WordPressby Jonoon.Cara Membuat Post Thumbnail di WordPressThumbnail adalah gambar kecil yang digunakan untuk mewakili isi sebuah artikel. Membuat post thumbnail atau featured image di wordpress sudah dapat dilakukan sejak versi wordpress 2.9, jadi ini merupakan hal yang sudah tidak asing lagi di wordpress. Meniru konsep theme blog magazine, Thumbnail biasanya dipasang pada halaman homepage, recent post atau random post. Tujuannya agar lebih […]

cara membuat thumbnail di wordpressThumbnail adalah gambar kecil yang digunakan untuk mewakili isi sebuah artikel. Membuat post thumbnail atau featured image di wordpress sudah dapat dilakukan sejak versi wordpress 2.9, jadi ini merupakan hal yang sudah tidak asing lagi di wordpress.

Meniru konsep theme blog magazine, Thumbnail biasanya dipasang pada halaman homepage, recent post atau random post. Tujuannya agar lebih menarik dilihat pengunjung, dan membuat mereka penasaran untuk meng-kliknya.

Mungkin anda pernah melihat sebuah blog yg di halaman homepagenya hanya ada judul, gambar kecil/thumbnail, sepenggal kata-kata yang mewakili artikel tersebut dan readmore. Namun ketika kita klik menuju halaman artikel tersebut gambar kecil/thumbnail-nya tadi hilang. Nah seperti itulah konsep theme blog magazine.

Cara membuat post thumbnail di wordpress

Banyak theme yang sudah mendukung untuk menampilkan thumbnail, akan tetapi banyak juga theme yang bulum bisa atau belum support untuk menampilkan thumbnail. Untuk itu anda dapat melakukannya dengan cara berikut.

  1. Buka function.php, dan tambahkan kode berikut
    add_theme_support( 'post-thumbnails' );
    set_post_thumbnail_size( 100100, true );

    Berdasarkan kode diatas (100,100) merupaka tinggi dan lebar maksimal thumbnail yang akan ditampilkan, jadi silahkan dimodifikasi sesuai kebutuhan.

  2. Untuk memunculkan thumbnail menggunakan kode/script seperti ini.
    <?php if ( has_post_thumbnail() ) {
    the_post_thumbnail();
    } else {
    echo '<img src="http://i1147.photobucket.com/albums/o553/jonobones/thumbnaildefault.png" alt="'.get_the_title().'" class="wp-post-image"/>';
    } ?>
  3. Kode diatas masih kode mentah untuk menampilkan thumbnail, jika ingin menampilkan thumbnail hanya di post halaman homepage bisa dengan menambahkan kode pada no.2 tersebut kedalam index.php, letakkan kode tersebut diatas <?php the_excerpt(''); ?> atau diatas <?php the_content(''); ?>, atau  bisa juga meletakkan kode tersebut dibagian lain yang diinginkan, jadi tinggal di pindah saja kode untuk menampilkan thumbnail-nya.
  4. Agar tampilan thumbnail lebih menarik tambahkan kode berikut pada style.css
    img.wp-post-image {
    float:left;
    margin-right:5px;
    width:100px;
    height:100px;
    padding:3px;
    border:solid 1px #cccccc; }

Maka dengan cara ini theme yang digunakan sudah support penggunaan thumbnail, dan thumbnail hanya akan muncul di halaman yang diinginkan, apabila link di klik dan masuk ke halaman single atau halaman postingan artikel yang bersangkutan maka thumbnail akan hilang.

Cara memasang post thumbnail untuk setiap postingan

Tidak cukup dengan cara seperti itu saja, cara diatas hanya membuat thumbnail agar tampil di halaman homepage, apabila anda tidak menambahkan gambar yang ingin dijadikan thumbnail untuk setiap postingan, yang tampil hanyalah thumbnail default saja.

Untuk itu perlu dilakukan penambahan gambar yang akan dijadikan thumbnail untuk mewakili sebuah artikel, caranya

  1. Buka all posts
  2. Pilih judul postingan yang ingin ditambahkan thumbnail, klik edit pada judul tersebut
  3. Cari dibagian sidebar sebelah kanan featurede image, lalu klik set featured image untuk menambahkan thumbnail
  4. Maka hasilnya akan seperti ini
membuat post thumbnail atau featured-image

Nah dengan demikian gambar default thumbnail untuk judul postingan tersebut akan digantikan dengan gambar thumbnail yang telah dipilih. Lakukan seperti cara diatas untuk mengatur thumbnail untuk tiap-tiap judul postingan. Baca juga artikel mengenai cara mengganti avatar atau photo profile di wordpress untuk melengkapi blog anda agar lebih menarik.

Dengan demikian berarti anda telah berhasil membuat post thumbnail atau feature image di wordpress. Jika tampilan/letak kurang rapi atau melenceng silahkan modifikasi margin dan padding pada kode yang ditambahkan di style.css.

Author: 

Saya adalah pemilik Kaplik.Com, Tujuan saya menulis adalah untuk berbagi pengetahuan maupun pengalaman kepada semua pembaca. Buat yang ingin tanya-tanya bisa langsung Contact ke Google +1, atau bisa melalui facebook. Thanks...

16 Responses

Leave a Reply