Menampilkan Related Posts dengan Thumbnail pada WordPress

Related Post sangat berguna bagi pengunjung maupun bagi situs itu sendiri. Bagi pengunjung akan lebih mudah menemukan tulisan dengan tema terkait dengan artikel yang dia baca sedangkan bagi situs akan meningkatkan pageview. Pada umumnya Related Posts ditampilkan dalam dua bentuk, pertama berupa list judul artikel kedua ditampilkan dengan thumbnail yang mewakili judul artikel. Pada tutorial WordPress kali ini kita akan belajar menampilkan Related Posts WordPress dengan thumbnail seperti yang ada pada Painthink.

Untuk menghasilkan Related Posts kita akan menggunakan plugin WordPress yang cukup terkenal yaitu Yet Another Related Post atau juga dikenal sebagai YARPP. Jika kamu belum menggunakannya sekarang juga download YARPP dan install pada WordPress kamu. Pada tutorial ini saya asumsikan para pembaca telah mengetahui cara menggunakan YARPP sehingga saya tidak akan memberi penjelasan terlalu banyak mengenai plugin ini.

Membuat File Related Posts Template

YARPP memiliki fitur yang sangat menarik yaitu kita bisa menggunakan file template untuk menampilkan Related Posts. Sebenarnya YARPP sudah menyediakan beberapa file template pada salah satu folder plugin ini, tapi disini kita akan membuat template sendiri. Kita mulai dengan membuat file php baru dengan nama “yarpp-template-thumbnails.php” dan letakkan file ini pada root folder theme kamu. Berikut ini adalah source code dari file yarpp-template-thumbnail.php yang telah saya buat, kamu bisa mengkopinya dan mempaste pada file kamu sendiri.

<?php /* 
Related Posts Template 
Author: Habieb (https://id.grafisia.com) 
*/  
?>  
  
<h3>Related Posts</h3>  
  
<?php if ($related_query->have_posts()):?>  

    <div class="related-posts"> 
        <ul> 
        <?php while ($related_query->have_posts()) : $related_query->the_post(); ?>  
  
            <?php  
                //Set Default Thumbnail Image URL's  
                $related_thumbnail = get_post_meta($post->ID, "thumbnail", $single = true);  
                $default_thumbnail = 'default-image.jpg';  
            ?>  
  
            <li>  
                <a href="<?php the_permalink() ?>" rel="bookmark">  
                <?php if ($related_thumbnail != "") : ?>  
                    <img src="<?php echo $related_thumbnail; ?>" alt="<?php the_title(); ?>" title="<?php the_title(); ?>" />  
                <?php else : ?>  
                    <img src="<?php echo $default_thumbnail; ?>" alt="<?php the_title(); ?>" title="<?php the_title(); ?>" />  
                <?php endif; ?></a>  
            </li>  
  
       <?php endwhile; ?>  
    </ul>
    </div>  
  
<?php else: ?>  
  
    <p>No related posts found</p>  
  
<?php endif; ?>

Algoritma dari skrip diatas adalah, ketika terdapat related posts ( tulisan terkait ) maka akan dilanjutkan menampilkan thumbnail dari setiap post yang URL dari gambar thumbnailnya tersimpan dalam custom field thumbnail yang secara temporer akan tersimpan pada variabel $related_thumbnail. Jika ternyata tidak ditemukan URL dari thumbnail maka akan ditampilkan thumbnail default yang diwakili dengan variabel $default_thumbnail, ini untuk mengantisipasi jika ada post yang tidak memiliki thumbnail preview.

Memasukkan ke Theme WordPress

Seperti yang ada di Painthink kita akan menaruh Related Posts dibawah konten. Buka file single.php kamu dan masukkan skrip berikut dibawah the_content().

<?php if (function_exists('related_posts')){ ?>  
      <?php related_posts();?>  
<?php }?>

Disini kita gunakan if (function_exists('related_posts')) maksudnya fungsi related_posts() (fungsi untuk menampilkan Related Posts) hanya akan dijalankan ketika plugin YARPP dalam keadaan aktif, sedangkan jika plugin YARPP di disable maka fungsi akan dilewati sehingga tidak akan terjadi error.

Mengatur Tampilan Related Posts dengan CSS

Style yang saya tunjukkan ini hanyalah contoh, kamu bisa langsung menggunakannya atau bisa juga kamu berkreasi sendiri dengan megutak-atik file CSS theme kamu.

.related-posts { 
   float:left; 
   width:100%; 
   background-color:#eff5f3; 
   border-top:1px solid #cde3ee; 
   border-bottom:1px solid #cde3ee; 
   padding:10px 0; 
   margin:10px 0; 
   text-align:center; 
}

.related-posts ul { 
   margin:auto; 
   padding:0px; 
   display:inline; 
}

.related-posts ul li { 
   list-style:none; 
   position:relative; 
   display:inline; 
   margin:0 5px;
}

.related-posts ul li a img { 
   border: none; 
   width:140px; 
}

Pengaturan pada YARPP Options

Aktifkan theme yang baru saja kamu edit. Theme baru ini memiliki template YARPP yang akan kita gunakan untuk menampilkan Related Posts.

Sekarang kita menuju ke pengaturan plugin YARPP. Pada admin WordPress pilih Related Posts (YARPP) pada menu Settings. Akan muncul berbagai pengaturan YARPP, kita langsung menuju ke Display Options. Beri tanda cek pada kotak “Display using a custom template file” dan pada drop-down dibawahnya pilih file “yarpp-template-thumbnails.php” yang sudah kita buat sebelumnya. Klik Update options di bagian paling bawah jika sudah selesai.

related posts wordpress dengan thumbnail dan yarpp

Custom Field untuk Thumbnail

Kamu bisa menemukan panel Custom Field di bawah panel dimana kita biasa memasukkan postingan. Tambahkan custom field baru dengan nama “thumbnail” dan pada kotak value masukkan alamat gambar kita. Perhatikan gambar berikut untuk lebih jelasnya.

menampilkan thumbnail related post dengan custom field

Sampai disini kamu telah berhasil menampilkan Related Posts dengan thumbnail pada blog WordPress kamu. Jika ada pertanyaan atau saran silakan tulis di kolom komentar, jangan lupa subscribe ke Painthink RSS feed atau mungkin kamu ingin berlangganan berbagai tutorial menarik melalui email, klik link subsribe via email ini dan masukkan email utama kamu.

12 Comments

  1. ini baru contoh pengguna plugin WP kelas expert
    thanks bro…

  2. saya baru pertama berkunjung ke web anda , sangat menarik
    kalau melihat artikel anda , anda sangat mendalami PHP dan wordpress

    tapi satu hal kenapa theme web anda sangat simple ,
    apakah anda setuju dengan simple is the best
    dengan banyaknya theme di dunia ini
    saya telah berratus kali desain theme , dan akhirnya saya sangat senang dengan desain theme simple
    terima kasih

    • makasih atas kunjungannya. saya kurang setuju dengan ‘simple is the best’ meski theme buatan saya ini cukup simple. bagi saya theme yang baik itu yang sesuai dengan fungsi dan kebutuhan, jadi kalau memang theme yang simple udah cukup ngapain bikin yag kompleks.

  3. ane dah nyoba bos. tapi tetep gak bisa thumbnailnya. kira2 apanya yang salah ya bos?

    • saya tidak tahu bagaimana mas widhi mencoba, jadi nggak tahu pasti letak kesalahannya. coba diulangi lagi langkah-langkah yang saya jelaskan diatas, periksa ulang settingan YARPP dan jangan lupa menambahkan custom field untuk setiap postingan

  4. Online Reviewed

    waaaaaaaahh, thanks yak.. makasih bro, ini sangat membantu, used on my site. 🙂

  5. matab gan infonya, makasih

  6. Makasih banyak mas, atas tuturialnya, ini sangat berguna bagi saya yang menggunaka plugin yarpp untuk menampilkan related post di blog saya yang menggunakan wp, sekali lagi terima kasih banyak

  7. irawsinvader

    Oke Gan…..makasih infonya…..
    Tapi ane tadi abis baca artikel, dia bilang kalo pake YARPP bisa menimbulkan masalah e…..

  8. e-ganeshaku.com

    segera ke TKP untuk mencoba tipsnya. Thank bro for share.

  9. lebih bagus mana ya wordpress related post sama yarpp? selama ini aku masih takut menggunakannya kalau-kalau memberatkan server

Leave a Reply to Online Reviewed Cancel