Membuat Related Posts Tanpa Plugin

Related posts adalah fitur untuk menampilkan artikel yang terkait dengan artikel pada halaman yang sedang dibuka.

Di pasaran ada banyak penyedia plugin yang menawarkan fitur related posts. Hanya saja cara kerja dari sebagian besar plugin-plugin tersebut memerlukan resource server yang tidak sedikit. Akibatnya bisa memperlambat kinerja website secara keseluruhan.

Lagi pula semakin banyak plugin yang terpasang dalam suatu website, akan memberatkan website itu sendiri. Oleh karena itu, untuk fitur-fitur sederhana seperti ini sebaiknya kita buat sendiri.

Saya menyarankan agar kamu menyunting child theme untuk memasukkan fungsi related posts yang akan diuraikan dalam tulisan ini, bukan parent theme. Sehingga apabila ada pembaruan tema hasil suntingan tidak ikut terhapus.

Bagi yang belum tahu cara menyunting tema, silahkan baca menyunting tema wordpress secara manual.

Related Posts by Tags

Fungsi related posts yang akan saya tunjukkan di bawah ini akan mencari artikel yang dikelompokkan dalam tag yang sama dengan artikel yang sedang ditampilkan. Kemudian menampilkan sejumlah tertentu artikel-artikel tersebut dalam bentuk list artikel.

Perlu dicatat, fungsi related posts ini akan bekerja dengan benar bila potongan kode yang diletakkan dalam loop.

Langkah 1. Membuat related post

Output yang dihasilkan oleh potongan kode (snippet) di bawah ini akan tampil dalam bentuk unordered list (ul), kamu bisa mengubahnya menjadi ordered list (ol) atau format lainnya.

Silahkan tulis atau salin snippet 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'	=> 4,
		'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>

Langkah 2. Memasukkan snippet pada tema

Buka berkas single.php dengan aplikasi text editor. Lalu sisipkan snippet di atas dalam loop, biasanya persis setelah konten atau artikel.

Kalau kamu tidak tahu loop, cari teks ‘the_content()‘ dalam berkas single.php. Sisipkan snippet yang telah kita buat di atas persis setelah baris berikut:

<?php the_content(); ?>

Atau, sebelum baris ini:

<?php comments_template(); ?>

Fungsi Related Posts by Tags yang kita buat akan tampilkan dalam bentuk unordered list. Tata letaknya akan mengikuti style tema yang kamu gunakan.

Contoh penerapannya pada website ini tampak seperti gambar di bawah.

Related Post by Tags with Thumbnail

Agar terlihat lebih dekoratif, kita bisa menambahkan thumbnail ke dalam setiap baris judul artikel.

Saya akan menambahkan thumbnail berukuran paling kecil, biasanya berbentuk kotak. Itu kalau pengaturan WordPress-nya sesuai dengan bawaan. Kalau kamu mengubahnya mungkin agak berbeda.

Untuk keperluan ini saya akan menyunting tiga berkas dalam tema, yaitu berkas function.php, style.css, dan single.php,

Mungkin dalam beberapa kasus nama berkas akan berbeda, karena tergantung pada tema masing-masing.

Langkah 1. Menyunting function.php

Langkah pertama, buka berkas function.php kemudian tambahkan potongan kode berikut:

add_theme_support( 'post-thumbnails' );

Penambahan kode di atas tidak diperlukan bila tema yang kamu gunakan sudah memilikinya. Kamu bisa langsung ke langkah berikutnya.

Langkah 2. Menyunting style.css

Buka berkas style.css dan tambahkan potongan kode dibawah ini.

.related-post{
	margin:20px 0;
	}
.related-post-section {
	clear:both;
	overflow:hidden;
	margin:0 0 20px 0
	}
.related-post-section img{
	float:left;
	width:75px;
	height:75px;
	margin:0 10px 0 0
	}

Baris css ini berguna untuk mengatur tampilan, misalnya mengatur tata letak halaman, format gambar, dan lain sebagainya.

Langkah 3. Menyunting singe.php

Selanjutnya saya akan modifikasi potongan kode Related Post by Tags sebelumnya dengan menambahkan fungsi untuk memanggil thumbnail, seperti berikut:

<?php 
	if ( has_post_thumbnail() ) { 
		the_post_thumbnail( 'thumbnail'); 
	} 
?>

Selain itu, saya juga menambahkan baris html (di-highlight warna biru) menggantikan tag ‘<ul></ul>‘ dan ‘<li></li>‘ untuk menerapkan stylesheet yang telah kita buat pada berkas style.css.

Hasil akhirnya menjadi seperti ini:

<div class="related-post">
	<h3>Related Posts</h3>
	<?php
		$tags = wp_get_post_terms( get_queried_object_id(), 'post_tag', ['fields' => 'ids'] );
		$args = [
			'post__not_in'      => array( get_queried_object_id() ),
			'post_type'			=> array ( 'blog' ),
			'posts_per_page'    => 4,
			'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(); 
	?>
	<div class="related-post-section">
		<?php if ( has_post_thumbnail() ) { the_post_thumbnail( 'thumbnail'); } ?>
		<a href="<?php the_permalink() ?>"><?php the_title(); ?></a>  
	</div>    
	<?php } wp_reset_postdata(); } ?> 
</div>

Salin dan sisipkan snippet di atas pada berkas single.php dengan cara seperti yang telah diterangkan sebelumnya.

Berikut tampilan Related Post by Tags with Thumbnail setelah diaplikasikan pada website ini.

Kamu bebas memodifikasi style sesuai dengan desain website masing-masing. Selain berbentuk kotak, format gambar thumbnail bisa berbentuk persegi panjang, atau bentuk-bentuk lainnya yang diatur dengan css.

Sekian tutorial membuat related posts yang bisa saya berikan. Bila ada yang ingin menambahkan, gunakan kolom komentar di bawah.