Related Post Wordpress Tanpa Plugin

Salah satu faktor penentu baik tidaknya kunjungan pada sebuah blog adalah ukuran Bounce Rate pada Blog tersebut untuk meminimalisir dan memperkecil Bounce rate adalah dengan membuat Related Post, meskipun cara ini bukan salah satunya untuk memperkecil hal tersebut tapi setidaknya Blog kita dimata serach engine masih terlihat sehat dan bukan dianggap blog yang mendatangkan trafik yang hanya sebentar saja.

Nah terkait permasalahan tersebut di postingan ini akan dibahas Cara Membuat Related Post Wordpress Tanpa Plugin, Bagi sobat yang kebetulan menggunakan platform Wordpres dapat mencobanya dan ini cukup mudah dan simple tanpa harus menggunakan Plugin bawaan dari Wordpres itu sendiri, bagi sobat yang meau mencobanya mari disimak Cara Membuat Related Post Wordpress Tanpa Plugin.

Langkah Awal 

Silahkan sobat setelah masuk ke Wordpresnya buka file single.php lalu mulai cari kode yang mirip seperti kode dibawah ini

</div><!--/.post-content-->
</div><!--/.post-inner-->
</article><!--/.post-->
<?php endwhile; ?>

Setelah ketemu silahkan sobat letakkan kode dibawah ini tepat diatasnya kode yang tadi dicari

<div class="related-posts">
<?php $orig_post = $post;
global $post;
$categories = get_the_category($post->ID);
if ($categories) {
$category_ids = array();
foreach($categories as $individual_category) $category_ids[] = $individual_category->term_id;
$args=array(
'category__in' => $category_ids,
'post__not_in' => array($post->ID),
'posts_per_page'=> 6, // Number of related posts that will be shown.
'caller_get_posts'=>1
);
$my_query = new wp_query( $args );
if( $my_query->have_posts() ) {
echo '<div id="related_posts"><h2>You Might Also Like:</h2><ul>';
while( $my_query->have_posts() ) {
$my_query->the_post();?>
<li><div class="relatedthumb"><a href="<?php the_permalink()?>" rel="bookmark" title="<?php the_title(); ?>"><?php the_post_thumbnail(); ?></a></div>
<div class="relatedcontent">
<h3><a href="<?php the_permalink()?>" rel="bookmark" title="<?php the_title(); ?>"><?php the_title(); ?></a></h3>
</div>
</li>
<?php
}
echo '</ul></div>';
}
}
$post = $orig_post;
wp_reset_query(); ?>
<div style="clear:both"></div>
</div>

Perhatikan kode yang ditandai 'posts_per_page'=> 6, itu untuk mengatur jumlah postingan yang nantinya akan sobat tampilkan di Related post dan di Related post ini akan menampilkan Postingan yang sesuai dengan label atau kategori yang sejenisnya.


Langkah Berikutnya
Silahkan sobat salin kembali kode CSS dibawah ini lalu letakkan tepat di atas kode head pada di file Header.php

<?php if (is_single()) { ?>
<style type='text/css'>
.related-posts{line-height:1.3em;margin-right:-20px}
.related-posts h2{display:block;font-size:18px;font-weight:600;margin-bottom:10px;padding:0;}
.related-posts a{font-size:16px;font-weight:400;color:#555!important}
.related-posts li{display:block;float:left;list-style: none;width:50%;height:200px!important;overflow:hidden;height:auto;padding:0 20px 0 0;margin-bottom:10px;-moz-box-sizing:border-box;-webkit-box-sizing:border-box;box-sizing:border-box}
.related-posts .relatedthumb{padding:0;margin:0;height:130px}
.related-posts .relatedthumb img{width:100%;max-width:auto;height:100%;transition:all 400ms ease-in-out}
.related-posts .relatedthumb img:hover{opacity:.7}
.related-posts li:hover a{color:#e8554e!important}
@media screen and (max-width:375px){.related-posts li{width:100%;}
}
</style>
<?php } ?>

Perhatikan betul instruksinya terkadang salah menempatkan kode akan berakibat tidak munculnya Related Post, jika dirasa sudah sesuai silahkan simpan dan selesai, Selamat mencoba dan semoga bermanfaat.