Related Posts merupakan sebuah fitur yang biasanya terdapat dibawah artikel yang dibuat dengan tujuan untuk memudahkan pengunjung dalam mengetahui artikel-artikel lain yang terkait dengan artikel sekarang yang sedang dibaca oleh pengunjung.

Namun dalam beberapa kasus Related Posts yang berada di bagian bawah artikel tidak mendapat perhatian dari para pengunjung, karena lokasinya yang terlalu bawah sehingga tidak sempat dibaca oleh pengunjung atau hanya karena tidak terlihat oleh pengujung karena si pengunjung terlalu fokus pada artikel sehingga tidak memperhatikan Related Posts yang Anda sediakan dibagian akhir artikel.

Agar Related Posts Anda dapat terlihat, Solusinya adalah meletakkan Related Posts didalam Artikel. Related Posts di dalam artikel memang sangat menarik apalagi diberikan style yang cocok dan eye catching.

Selain itu Related Posts di dalam artikel juga terbukti mampu menurutkan bounce rate blog atau website Anda, karena related posts terlihat dengan jelas oleh pengunjung.

Dan kali ini Hostingan ID akan berbagi snippet code, untuk membuat related posts didalam artikel tanpa Plugin.

Membuat Related Posts Tanpa Plugin

Ada beberapa tahap untuk membuat fitur Related Posts Tanpa Plugin.

Pertama yang harus Anda lakukan adalah membuat child theme wordpress, agar script atau kode related posts yang Anda buat tidak hilang karena Ada update theme/tema.

Jika sudah tulis atau letakkan kode berikut ini di file functions.php Anda. letakkan di paling bawah

 function hostingan_id_related_post($show = 3) {
     global $post;
 ​
     $related_by = array();
 ​
     /**
      * Related akan diambil dari tags
      * Jika tidak terdapat tags maka akan diambli dari category
      */
     $tags = get_the_tags( $post->ID );
 ​
     if ( ! empty($tags) ) {
         $tag_selected = array();
         foreach($tags as $tag) {
             $tag_selected[] = $tag->term_id;
         }
 ​
         $related_by = array('tag__in' => $tag_selected);
 ​
     } else {
         $categories = get_the_category($post->ID);
 ​
         if ( ! empty($categories) ) {
     
             $category_selected = array();
             foreach( $categories as $category ) {
                 $category_selected[] = $category->term_id;
             }
     
             $related_by = array('category__in' => $category_selected);
     
         }
     }
 ​
     // jangan ikutkan artikel yang sekarang.
     $related_by['post__not_in']   = array($post->ID);
     $related_by['posts_per_page'] = $show;
 ​
     $related_posts = new WP_Query($related_by);
 ​
     if ( $related_posts->have_posts() ) :
         ?>
         <div class="related-posts-inner-content">
             <h2>Related Posts</h2>
             <div class="related-posts-wrap">
         <?php
         while( $related_posts->have_posts() ) : 
             $related_posts->the_post();
             ?>
             <div class="related-posts-wrap-item">
             <figure class="related-thumbnail">
                 <?php if (has_post_thumbnail($related_posts->post->ID)) : ?>
                     <?php the_post_thumbnail(); ?>
                 <?php else : ?>
                     <img src="https://cf.hostingan.id/wp-content/uploads/2016/06/Hostingan-ID-Posting-Blog.jpg"/>
                 <?php endif;?>
             </figure>
             <h3><a href="<?php the_permalink($related_posts);?>" target="_blank"><?php the_title();?></a></h3>
             </div>
             <?php
         endwhile;
         ?>
             </div>
         </div>
         <?php
         wp_reset_postdata();
     endif;
 }

kode diatas adalah kode yang digunakan untuk membuat related post, dimana cara kerja kode/script diatas adalah dengan membaca ID post/artikel kemudian mencari tags, jika posting atau artikel tidak mempunyai tags maka akan dialihkan pada category. seminim-minimnya sebuah artikel WordPress pasti memiliki category.

kode diatas sudah bisa Anda gunakan untuk menampilkan related post dengan cara memanggil kode berikut ini

 hostingan_id_related_post();
 // atau
 hostingan_id_related_post(10); // jika ingin menampilkan 10 posts

dan letakkan di file single.php.

Namun kode tersebut belum cukup untuk menampilkan Related Posts di dalam artikel. untuk menampilkan Related Posts di dalam artikel terdapat beberapa cara, salah satunya adalah dengan menggunakan shortcode, berikut adalah cara membuat shortcode untuk Related Posts di dalam artikel.

Membuat Shortcode Untuk Related Posts Di dalam Artikel

Untuk membuat shortcode, Anda hanya perlu memasukkan kode berikut ini di file functions.php sama seperti sebelumnya, dan letakkan di baris paling bawah.

 function related_posts_funct($atts) {
     $atts = shortcode_atts( array(
         'show' => 3
     ), $atts );
 ​
     ob_start();
     hostingan_id_related_post($atts['show']);
     return ob_get_clean();
 }
 ​
 add_shortcode('hostingan_related_posts', 'related_posts_funct');

kemudian untuk menggunakannya Anda hanya perlu memasukkan kode

 [hostingan_related_posts]
 // atau
 [hostingan_related_posts show="10"]// untuk menampilkan 10 posts

di dalam artikel Anda, Anda bebas menaruhnya diparagraf berapapun sesuai keinginan Anda.

Memperbaiki Tampilan Related Posts Dengan CSS

Mungkin Anda bertanya-tanya “Kok acak-acakan?” ya wajar karena Related Posts di dalam artikel tersebut belum memiliki style, sehingga akan jadi acak-acakan, nah untuk mempercantik Related Posts di dalam artikel ini silahkan tambahkan CSS berikut ini, dan letakkan di file style.css

 .related-posts-inner-content {
     background-color:#fff;
     border-radius:5px;
     padding:20px;
 }
 ​
 .related-posts-inner-content h2 {
     font-size:2rem;
     margin:0;
 }
 ​
 .related-posts-wrap {
     margin-left:-10px;
     margin-right:-10px;
 }
 .related-posts-wrap:after {
     content:"";
     display:table;
     clear:both;
 }
 .related-posts-wrap-item {
     float:left;
     width:33%;
     margin-bottom:10px;
     padding: 10px;
 }
 .related-posts-wrap-item h3 {
     font-size: 1.6rem;
     margin: 10px 0;
     font-weight:400;
 }
 ​
 .related-posts-wrap-item h3 a {
     text-decoration:none;
 }

dan hasilnya akan tampak seperti berikut ini,

di sini hostingan id menggunakan child theme dari theme twentytweny versi terbaru.

jika Ada pertanyaan silahkan tinggalkan pertanyaan Anda di komentar di bawah ini.