KURSUS MEMBUAT WEBSITE100% Gratis!

Cara Membuat Related Posts Tanpa Plugin pada WordPress

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

Cara membuat related posts

Ada banyak plugin yang menawarkan fitur related posts. Hanya saja sebagian besar plugin-plugin related posts memerlukan resource server yang tidak sedikit. Akibatnya bisa memperlambat kinerja website secara keseluruhan.

Lagi pula, semakin banyak plugin yang dipasang dalam suatu website akan memberatkan website itu sendiri. Oleh karena itu, ada baiknya untuk fitur-fitur sederhana kita buat sendiri.

Panduan ini memerlukan kemampuan menyunting tema. Saya menyarankan penyuntingan tidak dilakukan di parent theme, melainkan di child theme. Agar pada saat tema diperbarui, hasil suntingan tidak ikut terhapus.

Silahkan lihat cara membuat child theme pada WordPress.

Untuk mempraktekkan tutorial ini, kamu memerlukan aplikasi text editor.

Related Posts by Tags

Saya akan menunjukkan cara membuat Related Posts by Tags.

Berikut ini potongan kode untuk related posts yang dikelempokkan berdasarkan kesamaan tag.

<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>

Cara mengaplikasikannya sebagai berikut.

Buka berkas single.php yang ada pada tema kamu dengan text editor. Sisipkan potongan kode di atas pada berkas tersebut. Perlu di ingat, kode hanya bisa berjalan bila diletakkan dalam loop.

Bisa disisipkan persis dibawah baris ini:

<?php the_content(); ?>

Atau, sebelum baris ini:

<?php comments_template(); ?>

Hasil dari penyisipan potongan kode di atas akan ditampilkan dalam bentuk unordered list. Formatnya mengikuti style tema yang digunakan.

Contoh penerapan Related Posts by Tags pada website ini, tampak seperti gambar di bawah.

Related Posts

Agak tampak membosankan bukan?

Agar terlihat lebih dekoratif, kamu bisa menambahkan thumbnail ke dalam setiap baris judul artikel. Penambahan thumbnail harus disertai dengan penataan style-nya agar terlihat cocok dengan website kamu.

Saya akan jelaskan caranya, langkah demi langkah.

Menambahkan thumbnail

Saya akan memanfaatkan thumbnail ukuran 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 yang digunakan, yaitu berkas function.php, style.css, dan single.php,

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

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.

Menyunting style.css

Buka berkas style.css dan tambahkan potongan kode dibawah ini. Bisa diletakkan di mana saja.

.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 layout, tata letak gambar, dan lain sebagainya.

Menyunting singe.php

Selanjutnya kita modifikasi potongan kode Related Post by Tag menjadi Related Post by Tag with Thumbnail, dengan menambahkan fungsi untuk memanggil thumbnail berikut:

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

Selain itu, saya menambahkan baris html untuk menerapkan style yang telah kita.

Sehingga 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>

Baris yang di-highlight menandakan bagian yang dimodifikasi.

Bila potongan kode di atas diaplikasikan pada website ini, hasilnya akan seperti gambar di bawah ini.

Kamu bebas memodifikasi style sesuai dengan desain website masing-masing. Format thumbnail pun bisa diganti, misalnya dengan persegi panjang.

Related Posts by Category

Bila kamu memilih pengelompokkan category untuk menampilkan related posts, gunakan potongan kode Related Posts by Category with Thumbnail berikut:

<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>

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

BACAAN TERKAIT
Cara Membuat Child Theme Cara Membuat Child Theme pada WordPress
Mengganti tema wordpress Cara Menginstal Tema WordPress, Panduan Bagi Pemula
PANDUAN TERBARU
BLOG TERBARU