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

67 thoughts on “Memasang Featured Image

  1. suhe

    kalo memunculkan thumbnails dibawah judul / berdampingan posting di halaman index, kemudian gambar dengan ukuran sebenarnya muncul di single page gimana yah?
    tanpa plugin tentunya

  2. agrevo

    Mas… mau nanya nich…. Saya install theme TinyNews pada wordpress saya mas. Theme nya sudah dilengkapi thumbnail pada halaman depan.
    Nah… jika saya ambil image dari link lain pada post, thumbnailnya nggak muncul mas…
    Thumbnailnya hanya muncul jika imagenya langsung saya upload.

    Gmana cara memanggil image agar muncul di thumbnail nya mas?? ( image yg diambil dri link lain )

    Trimakasih sebelumnya mas…

    1. Lutvi Avandi Post author

      Memang ndak bisa bikin thumbnail dari web lain. Biasanya pakai script downloader dulu baru kemudian dibikinkan image thumbnailnya. Logikanya gini lah, itu image orang lain di hosting orang lain, masak anda bisa ngedit image-nya? Gak mungkin layau.

      Tapi kalau “memaksa” supaya image tampil kecil, maka cukup kasih atribut width dan height aja di tag img-nya beres πŸ™‚

  3. hari

    makasih mas atas infonya. Saya ingin bertanya, web punya saya itu ga ada “feature image” di tempat ketika kita mau post, biasanya setelah “excert” ada “feature image” dalam template itu ga ada. Nah, bagaimana mua tambahkan feature image dalam blog…?

  4. Kova

    Mas, tanya lagi boleh kan? Saya pakai theme warrior yang ada feature imagenya. Namun ketika url posting saya akses kok yang keluar cuma judul aja. Sedangkan artikelnya tidak keluar. Mohon di cerahkan. Misal saya akses indoblogger.eu/judul-post yang keluar nanti cuma judul post namun artikelnya gak mau tampak. Thanks mas

  5. rony haryono

    Mas mau tanya ya!, pada wp 3.2.1 apa tampilannya tdk bisa utk humbnail atau theme nya yg tdk bisa menampilkan thumbnail di postingan? (theme sy 3d sound, 3.2.1).
    Jika ada yg hrus di setting pda theme ini agar tampilannya sama dengan post di dashboard bagaimana caranya dan code scriftnya apa?.
    trims sbelumnya mas.
    catatan: ini contoh image thumbnail yg teks nya selalu di bawah image dan tdk bisa di setting teks nya sejajar dg image.
    http://www.penaswara.com/produk-dan-manajemen-entertainmen-studio-musik-penaswara/

  6. ari

    terima kasih mas ilmunya…mau tanya mas scirptnya dah tak pasang…hasinya gambarnmya setelah judul….na biar gambarnya itu di atas judul gimana caranya

  7. Edso WebID

    kok aku nyoba gagal yak… πŸ™
    yang kebaca malahan scipt dari fungtion.php ini
    if (!is_single()) {
    if ( has_post_thumbnail() ) {
    the_post_thumbnail(); } else { echo ‘

    1. masjajang

      coba perhatiin di functions.php
      dan pastiin yang tertulis adalah ini
      add_theme_support( ‘post-thumbnails’ );
      set_post_thumbnail_size(100,100,true);

  8. Jefry

    setelah saya mengganti template blog, dalam menu editor template tersebut tidak ada file function.php, hmm.. gimana ya
    terima kasih atas ulasan di atas setidaknnya menambah wawasan saya soal wp

  9. Dadan

    Permisi om itu if nya kurang <? gak sih aku jadi bingung om
    itu sudah saya taruh di atas
    <a href="” rel=”bookmark” title=””>
    tp kok tulisanya jadi hitam di notepad++

    if (!is_single()) {
    if ( has_post_thumbnail() ) {
    the_post_thumbnail();
    } else {
    echo ”;
    }
    }
    ?>

  10. Abeng

    Terima Kasih Mas Tutorialnya.
    tp saya mau tanya mas, bagaimana caranya agar gambar tadi tidak muncul pada saat single post, jadi dia hanya muncul pada home atau pada pencarian saja mas.
    monon pencerahannya, terima kasih (dvicosmailbox-website@yahoo.com)

  11. ADE

    mohon pencerahannya mas,.

    saya lg nyoba theme wp,. tp ada kendala di featured image,. pas saya set gambar ny berhasil. trs d publish. pas liat d page tp g muncul. itu kenapa y ?

  12. Merakyat

    Sangat bermanfaat buat saya yang lagi belajar.
    Tapi saya mau nanya ya teman2, mana yang lebih gampang mengelola WordPress atau Joomla?

    Trims dan salam kenal

  13. Ilmuonline

    Ya meskipun belum berhasil membuat featured image, tapi tetep semangat dan terimakasih udah share..
    sekalian mau nanya di theme saya script yg seperti kode ke-2 (index.php)

    jadi saya masukkan ke single.php (yg mirip dgn kode diatas), tapi hasilnya malah error.

  14. hardi

    mas, mau tanya nih.
    gimana caranya tambah featured image nya tidak lewat sesi upload, tetapi kita ambil dari link luar.. saya coba cari tutorial di internet belum ada yang membhas ini. saya pengen featured image nya dari link luar karena space hosting saya kecil. ini bakal terkendala untuk kedepannya. saya pakai wordpress versi 3.5.1

    ini web saya mas, http://www.hardi.web.id

  15. Wal Aspal

    Artikel yang sangat berguna,,,
    sudah saya coba dan berhasil..tp maunya featured image tampil disamping kiri ringkasan artikel di halaman home gimana ya mas??

  16. ankga

    artikelnya sip, dapet pelajaran baru ni. . . ???
    ow ya , saya mo tanya mas. . ??
    saya kan pake WP , buat online store.
    tapi saya buat WPnya tu yang WP multi site
    jadi kan bisa banyak store gitu maksudnya ??
    tapi waktu masukin product, setiap site saya harus upload images, nah ini masalahnya, kalo setiap site saya harus aploud image, space di domain saya abis dunk mas. . . ???
    gimana ya caranya biyar ga’ usah upload image lagi biyar disk space nya gak penuh. . . .

  17. wallpaper hd 1080p

    Saya udah nerapin cara diatas, hasilnya works.. tapi pada blog yang lain semua post menampilkan gambar default! problemnya image ga saya upload via post tp bulk upload lewat file manager cpanel.. btw thanks sharingnya mas (y)

  18. address

    I just want to say I’m new to blogs and truly savored your blog. Very likely I’m planning to bookmark your website . You certainly have great articles. Thanks for sharing with us your website.

  19. Racquel Dellinger

    I don’t even know how I ended up here, but I thought this post was great. I don’t know who you are but definitely you’re going to a famous blogger if you aren’t already πŸ˜‰ Cheers!

  20. Lonnie Roddey

    I was vastly delighted to find this site proceeding google.I sought to articulate thankfulness to you with regard to this excellent article!! I certainlyliked each insufficiently crumb of it and I’ve you bookmarked to look hooked on new ram you post.

  21. Burt Eckels

    I was recommended this blog by my cousin. I am not sure whether this post is written by him as nobody else know such detailed about my difficulty. You are amazing! Thanks!

  22. Abe Garlett

    Excellent blog here! Also your site loads up very fast! What web host are you using? Can I get your affiliate link to your host? I wish my site loaded up as fast as yours lol

  23. Sabina Hern

    Hello, Neat post. There is an issue along with your site in internet explorer, could test this… IE nonetheless is the marketplace leader and a huge component to other people will miss your fantastic writing due to this problem.

  24. Sage Winterberg

    Nice post. I was checking constantly this blog and I’m impressed! Very useful information specially the last part πŸ™‚ I care for such information much. I was seeking this certain information for a very long time. Thank you and best of luck.

  25. Anneliese Frid

    Thank you for the good writeup. It in fact was a amusement account it. Look advanced to far added agreeable from you! However, how could we communicate?

  26. Fredric Pasquino

    Your style is so unique in comparison to other people I have read stuff from. Many thanks for posting when you have the opportunity, Guess I’ll just book mark this site.

Comments are closed.