KURSUS MEMBUAT WEBSITE100% Gratis!

Cara Membuat Related Posts Tanpa Plugin

Related posts adalah fitur untuk memunculkan artikel-artikel yang terkait dengan artikel pada halaman yang sedang dibuka. Fitur ini biasanya terletak di akhir artikel, sebelum kolom komentar.

Ada banyak plugin yang menawarkan fitur related posts. Hanya saja 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.

Cara membuat related posts

Panduan ini akan menjelaskan cara membuat related posts tanpa menggunakan plugin. Saya menyarankan agar kamu menyunting child theme bukan parent theme. Sehingga saat tema diperbarui, hasil suntingan tidak ikut terhapus.

Silahkan lihat cara membuat child theme pada WordPress.

Related Posts by Tags

Fungsi artikel terkait ini akan menampilkan artikel-artikel yang ditandai dengan tag yang sama. Fungsi hanya akan bekerja bila diletakkan dalam loop.

Langkah 1. Membuat related post

Tulis atau salin potongan kode (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 Posts

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.

ARTIKEL TERKAIT
Belajar WordPress : Panduan Membuat Website Bagi Pemula
Plugin Keamanan WordPress Terbaik 5 Plugin Keamanan WordPress Terbaik
memasang tema wordpress Cara Memasang Tema WordPress
Menyunting Tema WordPress Cara Menyunting Tema WordPress
PANDUAN PEMULA
BLOG UPDATE!