Membuat Related Post Wordpress Tanpa Plugin

Related Post merupakan salah satu elemen blog yang mempunyai kegunaan untuk menekan angka bounce dari sebuah blog. Dengan related post diperlukan sanggup meningkatkan page view blog. Kebanyakan blogger menyimpan related post di bab bawah postingan.

Baca juga: Membuat Related Post Responsive Ala Kompi Ajaib

Nah kali ini aku akan membagikan cara menciptakan related post untuk wordpress tanpa plugin yang aku gunakan di blog wordpress saya. Yang tertarik untuk mencobanya silahkan ikuti langkah-langkahnya di bawah ini.



1. Langkah Pertama
Silahkan buka file single.php lalu cari isyarat di bawah ini atau menyerupai mirip isyarat di bawah ini.

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

Kemudian silahkan simpan isyarat di bawah ini di atas isyarat tadi.

 <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="Membuat Related Post Wordpress Tanpa Plugin"><?php the_post_thumbnail(); ?></a></div>
 <div class="relatedcontent">
 <h3><a href="<?php the_permalink()?>" rel="bookmark" title="Membuat Related Post Wordpress Tanpa Plugin"><?php the_title(); ?></a></h3>
 </div>
 </li>
 <?php
 }
 echo '</ul></div>';
 }
 }
 $post = $orig_post;
 wp_reset_query(); ?>
 <div style="clear:both"></div>
 </div>

Related post ini memunculkan postingan dengan kategori yang sama atau sesuai kategori. Kode 'posts_per_page'=> 6, untuk mengatur jumlah postingan related post.

2. Langkah Kedua
Simpan isyarat CSS di bawah ini di atas isyarat </head> pada 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 } ?>

Selesai.... selamat mencoba...

Sumber php:
http://www.wpbeginner.com/wp-themes/how-to-add-related-posts-with-a-thumbnail-without-using-plugins/
Sumber https://www.kompiajaib.com/

Share this post