Cara Membuat Related Post Otomatis Tanpa Plugin di Website WordPress

Info Menarik – Penting sekali jika website menampilkan related post atau artikel terkait dalam postingan. Banyak manfaat bagi website jika kita menampilkan artikel terkait. Salah satunya adalah ketika pengunjung selesai membaca artikel bisa saja kemudian akan klik artikel lain yang tampil di artikel terkait. Dengan begitu kemungkinan trafik website juga bisa meningkat. Jika Kamu belum tahu cara menampilkan related post di website WordPress, silakan simak artikel ini hingga selesai.

Apa itu Related Post?

Related post adalah sekumpulan link yang akan menuju ke postingan lain yang memiliki kesamaan topik dengan artikel yang sedang pengunjung baca. Keberadaannya mungkin saat ini sudah cukup lumrah bahkan adanya artikel terkait itu bisa menjadi wajib. Hal ini karena bisa membuat pengunjung tertarik untuk menjelajahi atau membaca postingan lainnya.

Adapun keuntungan memasang artikel terkait di website dari segi SEO adalah:

1. Bisa meningkatkan page views;
2. Dapat menurunkan bounce rate website;
3. Kemungkinan bisa meningkatkan waktu kunjungan rata-rata pengunjung;
4. Agar terlihat lebih profesional dengan melengkapi navigasi blog.

Posisi Related Post

Secara umum posisi penempatannya adalah pada akhir artikel. Hal ini agar pengunjung setelah selesai membaca positngan merasa penasaran ingin membaca artikel pada halaman posting lainnya. Kemudian ini bisa membantu pengunjung agar langsung bisa menuju artikel terakit yang pengunjung cari.

Cara Membuat Related Post di Website WordPress

Untuk pengguna WordPress bisa menggunakan plugin, karena saat ini banyak plugin WordPress untuk memenuhi kebutuhan tersebut. Namun pada artikel ini saya tidak akan membahas yang menggunakan plugin. Yang akan saya terangkan adalah yang tanpa plugin atau kita kerjakan secara manual.

Kemudian selain dapat menggunakan plugin, juga biasanya fitur artikel berkaitan ini sudah otomatis tersedia pada tema yang kita gunakan. Terlebih jika tema yang kita gunakan adalah tema premium atau berbayar. Sudah pasti kalau tema premium itu akan memiliki fitur yang lengkap termasuk fitur artikel terkait.

1. Kode Related Post

Sebelum praktik, tentu saja kita harus sudah memiliki kode khusus untuk menampilkan artikel berkaitan. Silakan Kamu salin atau copy kode berikut:

<h3>Related Posts</h3>
<ul>
<?php
$tags = wp_get_post_terms( get_queried_object_id(), 'post_tag', ['fields' => 'ids'] );
$args = [
'post__not_in' => array( get_queried_object_id() ),
'posts_per_page' => 5,
'tax_query' => [
[
'taxonomy' => 'post_tag',
'terms' => $tags
]
]
];
$related_query = new wp_query( $args );
if( $related_query->have_posts() ) {
while( $related_query->have_posts() ) {
$related_query->the_post();
?>
<li><a href="<?php the_permalink() ?>"><?php the_title(); ?></a></li>
<?php } wp_reset_postdata(); } ?>
</ul>

Untuk pengaturan menentukan jumlah artikel dalam tampilan artikel berkaitan, silakan Kamu ubah dan sesuaikan dengan kebutuhan. Contoh di atas saya telah menentukan hanya 5 artikel saja pada kode:

posts_per_page' => 5

Kamu ubah dan sesuaikan dengan kebutuhan.

Pasang Kode di WordPress

Jika sudah memiliki kode seperti di atas, silakan Kamu pasang kode tersebut pada single.php WordPress. Tentu saja sebelumnya Kamu harus sudah login di Dashboard WordPress.

Baca Juga: Cara Membuat Daftar Isi di WordPress Tanpa Plugin Lengkap Download Kode

Pada halaman single.php biasanya terdapat kode seperti berikut:

<?php the_content(); ?>

Silakan Kamu pasang kode related post pada halaman single.php sesudah kode tersebut. Lebih jelasnya nanti akan tampil seperti ini:

<?php the_content(); ?>
kode related post
<?php comments_template(); ?>

Tambahkan CSS

Untuk lebih mempercantik lagi tampilan related post baik yang berdasarkan kategori ataupun berdasarkan tags, silakan modifikasi dengan menambahkan kode CSS di file style.css Editor WordPress. Sebagai contoh saya menggunakan kode CSS sebagai berikut:

/*-[ Related Posts ]*/
 .relatedpost {
 background: #ebeef2;
 border-top:3px solid #b11c42;
 padding: 2px 2px 2px 20px;
 font-size: 14px;
 line-height: 1.7em;
 }
 .relatedpost a:hover {
 background: #0074a2;
 color: #ffffff;
 text-decoration: none;
 padding: 2px;
 border: 1px solid #666;
 border-radius: 3px;
 -moz-border-radius: 3px;
 -webkit-border-radius: 3px;
 }

Jika penulisan related post di atas tidak berfungsi, berarti tema yang Kamu gunakan tidak mendukung penggunaan kode ini. Solusinya adalah silakan Kamu ubah/tambahkan kode berikut, yang semula kita simpan di dalam single.php:

<h3>Related Post : </h3>

Menjadi:

<div class="judul-relatedpost">
<h3>Related Post :</h3>
</div>

Kemudian tempatkan kode berikut pada style.css:

.judul-relatedpost {
font-size: 1.7em;
margin: 10px 0;
}

Untuk modifikasi, silakan Kamu sesuaikan lagi dengan selera masing-masing. Semoga bisa membantu.