Cara Membuat Related Post WordPress Tanpa Plugin

Kamu punya situs atau blog yang tidak memiliki related post? atau ingin membuat related post pada blog WordPress? Kamu membaca artikel yang tepat!

Kali ini mimin Revolutioner Blog mau berbagi informasi tutorial bagaimana cara membuat related post wordpress tanpa menggunakan bantuan plugin. Kenapa tanpa bantuan plugin?

Jawabannya simple, semakin sedikit menggunakan plugin semakin baik buat situs kita, hehehe #hanyaopinipribadi

Oke kita langsung aja ya….

Untuk membuat related post di situs WordPress kita tanpa menggunakan plugin, teman-teman bisa ikuti langkah sederhana dibawah ini.

Langkah Pertama

Buka file single.php theme wordpress yang teman-teman gunakan kemudian copy kode script dibawah ini, kemudian teman-teman paste di line atau di tempat teman-teman ingin memunculkan related post tersebut.

<div class=”related_posts” >
<h3 id=”related-heading”>Related Posts</h3>
<?php
$RelatedPosts = new WP_Query( array(‘orderby’ => ‘rand’, ‘posts_per_page’ => ‘4’));
if ($RelatedPosts->have_posts()) :
while ( $RelatedPosts->have_posts()) : $RelatedPosts->the_post(); ?> <div class=’related-thumbnail’ >
<a href=”<?php the_permalink(); ?>”><?php the_post_thumbnail(); ?><br /><?php the_title(); ?></a>
</div>
<?php endwhile;
else :
endif;
wp_reset_postdata(); ?>
</div>

Langkah Kedua

Oke setelah kode script yang tadi kita paste di file single.php, jangan lupa disimpan terlebih dahuluya. Setelah itu coba cek apakah related post yang kita pasang tadi sudah muncul di halaman artikel? kalau sudah muncul pasti akan acak-acakan. Untuk membuat tampilan related post nya lebih rapih dan enak dipandang mata, teman-teman bisa menambahkan kode css di bawah ini yang bisa teman-teman tambahkan di file style.css, kode css nya dibawah ini ya.

.related_posts {width: 100%; margin: 0 0 30px 0; float: left; font-size: 15px;}
h3.related-heading {font-size: 28px; margin: 0 0 15px 0; line-height: 2em; }
.related-thumbnail {margin: 0 1px 0 1px; float: left; }
.related-thumbnail img {margin: 0 0 3px 0; padding: 0;}
.related-thumbnail a {color :#333; text-decoration: none; display:block; padding: 4px; width: 177px;}

Setelah kode cssnya ditambahkan jangan lupa untuk menyimpannya. Setalah kode css tersimpan pasti tampilan dari related post akan jauh lebih rapih dan enak dipandang mata seperti gambar dibawah ini.

 

Itulah cara mebuat related post pada wordpress menggunakan plugin, cukup sederhana mudah dan cepat. Untuk tampilan related post teman-teman bisa berkreasi sesuka teman-teman ya menggunakan css. Semoga artikel ini bermanfaat ya dan happy blogging!

Leave a Reply