Tips Menampilkan Similar Posts Dengan Thumbnail

Saat ini bisa dibilang menampilkan daftar artikel yang mirip atau berkaitan dengan artikel yang sedang ditampilkan merupakan hal yang biasa kita temui di blog atau situs-situs berita.

Di WordPress ada banyak sekali plugin yang bisa kita pakai untuk membuat tampilan seperti itu. Salah satunya yaitu Similar Posts yang dibuat oleh Rob Marsh. Plugin ini cukup populer dan cara menggunakannya pun sangat mudah.

Nah, pada artikel kali ini saya akan membahas bagaimana cara menampilkan daftar artikel yang mirip menggunakan plugin tersebut dan disertai dengan image thumbnail. Sebelumnya pastikan Anda telah menginstall kedua plugin berikut ini.

• Post Plugin Library
• Similar Posts Plugin

Setelah kedua plugin tersebut diinstall, kita akan menjumpai beberapa menu di bagian Settings yang bisa kita pakai untuk melakukan pengaturan, yaitu General, Output, Filter, Placement, dan Other.

Pada menu General kita bisa mengatur jumlah posting yang akan ditampilkan dan beberapa opsi lainnya yang terkait dengan kategori dan tag. Menu yang lain digunakan untuk mengatur bagaimana tampilan similar post tersebut.

Ada dua cara yang bisa kita pakai untuk menampilkan image thumbnail pada Similar Posts.

Cara 1

Similar Posts default-nya memiliki tiga buah tag (kalau tidak salah) yang berkaitan dengan image, yaitu {image}, {imagealt} dan {imagesrc}. Ketiga tag tersebut berfungsi untuk menampilkan image pertama yang terdapat pada posting tersebut. Nah, kita bisa memanfaatkan tag-tag tersebut untuk menampilkan image thumbnail pada Similar Posts.

Adapun caranya yaitu sebagai berikut:

1. Klik menu Settings – Similar Posts lalu pilih tab Output. Di bagian Output template ketikkan kode seperti berikut ini:

<li><img src="{imagesrc}" width="125" height="125" alt="" /><div>{link}</div></li>

Ganti parameter width dan height sesuai dengan ukuran thumbnail yang kita inginkan. Klik button Save Output Settings untuk menyimpan pengaturan tersebut.

2. Klik menu Placement yang ada di bagian atas halaman pengaturan. Isi bagian Parameters dengan kode seperti di bawah ini:

prefix=<h3>Similar Posts:</h3><ul class="similar-posts">&suffix=</ul>

Ubah pengaturan Activate menjadi Yes. Klik button Save Placement Settings untuk menyimpan pengaturan tersebut.

Cara 2

Cara lainnya yaitu dengan memanfaatkan fitur Featured Image yang terdapat pada WordPress 3.0. Menurut saya, cara yang kedua ini lebih praktis dibandingkan cara sebelumnya. Untuk bisa menggunakan fitur ini, pastikan kita telah mengaktifkan fitur Post Thumbnail pada file functions.php.

Berikut ini cara untuk mengaktifkan fitur Post Thumbnail.

add_theme_support('post-thumbnails');

Jika pada file functions.php sudah ada deklarasi fungsi seperti di atas, berarti fitur Post Thumbnail pada theme yang Anda pakai sudah aktif. Langkah berikutnya mirip dengan cara yang pertama.

1. Klik menu Output dan ketikkan kode seperti di bawah ini.

<li>{php: echo get_the_post_thumbnail($result->ID, array(75,75) ); }<div>{link}</div></li>

2. Sama seperti cara pertama.

Selanjutnya upload image yang akan kita jadikan Post Thumbnail melalui menu Featured Image yang ada di bagian kanan bawah editor Post.

Klik link Use as featured image pada kotak dialog Set Featured Image untuk menjadikan image tersebut sebagai Post Thumbnail lalu tutup kotak dialog tersebut.

Langkah selanjutnya (untuk cara 1 dan 2) edit stylesheet (style.css) dan tambahkan kode seperti berikut ini.

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16

.similar-posts {
   margin: 0;
   padding: 0;
}
 
.similar-posts li {
   list-style: none;
   padding: 0;
   margin-bottom: 10px;
}
 
.similar-posts img,
.similar-posts .wp-post-image {
   float: left;
   margin: 0 10px 10px 0;	
}

Selamat mencoba.