Cara membuat artikel terkait dengan gambar tanpa plugin wordpress

Membuat blog dengan wordpress itu punya kelebihan dari sisi SEO alias search engine optimation, sehingga setiap artikel bagus yang kita buat bisa secara mudah masuk halaman pertama google. apalagi jika ditambah dengan berbagai optimasi maupun install plugin tambahan, serasa mak nyus.. ibarat minum es ditengah panas terik matahari. Nah.. berbicara optimasi maka banyak plugin yang bisa digunakan apabila tidak ingin repot, misalnya untuk membuat artikel terkait dibawah artikel bisa menggunakan plugin “wp related post”. namun banyak yang bilang bahwa install plugin itu bisa menambah beban server sehingga loading blog menjadi lebih lambat, solusinya kita bisa memakai trik yang akan kita uraikan ini, yaitu tentang cara membuat artikel terkait dengan gambar thumbnail tanpa plugin wordpress, o.k begini langkahnya.

 

Contoh tampilan artikel terkait yang akan kita buat bisa dilihat dibawah setiap post di ilmusipil.com dengan penampakan seperti gambar ini

artikel terkait dengan gambar wordpress

artikel terkait dengan gambar wordpress

Cara membuat artikel terkait dengan gambar tanpa plugin wordpress

1.Edit theme single.php, caranya bisa melalui menu Appreance –> Editor

2. Lalu masuk ke single.php pada theme yang kita gunakan, cari kata <?php the_content(); ?>

3. Kemudian paste dibawahnya atau bisa diatur lokasinya, kode script related post dengan thumbnail tanpa plugin seperti ini

<?php
$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),
‘showposts’=>5,
);
$my_query = new wp_query( $args );
if( $my_query->have_posts() ) {
echo ‘<div class=”related-posts”><div class=”top-autore”><h3>’.__(‘Related Posts’,’adsensiathemes’).'</h3></div><ul>’;
$counter = 0;
while( $my_query->have_posts() ) {
++$counter;
if($counter == 5) {
$postclass = ‘last’;
$counter = 0;
} else { $postclass = ”; }
$my_query->the_post();?>

<li class=”<?php echo $postclass; ?>”>
<a rel=”nofollow” class=”relatedthumb” href=”<?php the_permalink()?>” rel=”bookmark” title=”<?php the_title(); ?>”>
<span class=”rthumb”>
<?php if(has_post_thumbnail()): ?>
<?php the_post_thumbnail(‘related’, ‘title=’); ?>
<?php else: ?>
<img src=”<?php echo get_template_directory_uri(); ?>/images/relthumb.png” alt=”<?php the_title(); ?>” width=’180′ height=’120′ class=”wp-post-image” />
<?php endif; ?>
</span>
<span>
<?php the_title(); ?>
</span>
</a>
<div class=”text-related-posts”><?php echo excerpt(18);?></div>
</li>

<?php
}
echo ‘</ul></div>’;
}
}
wp_reset_query();
?>
<!– related-posts –>

Jika sudah di paste code diatas selanjutnya akhiri dengan tombol update file.

4. kemudian membuat css pada style.css theme yang kita gunakan, kodenya seperti ini

.related-posts {
overflow: hidden;
width: 100%;
background: #f1f1f1;
margin-left: 4px;
}

.postauthor p {
padding-top: 0px;
}

.related-posts ul {
margin: 0px;
overflow: hidden;
padding: 0px;
}

.related-posts h5 {
color: #919191;
font-size: 13px;
line-height: 20px;
padding-left: 80px;
text-transform: uppercase;
}

.related-posts h3 {
color: #ffffff;
font-size: 14px;
line-height: 20px;
padding: 5px;
text-transform: uppercase;
}

.relatedthumb img {
height: 70px;
margin-bottom: 0px;
margin-top: 3px;
width: 100px;
}

.top-autore {
border-top: medium none;
margin-bottom: 3px;
}

.related-posts li {
float: left;
list-style: none outside none;
margin-bottom: 5px;
margin-right: 4%;
margin-left: 8px;
padding-bottom: 5px;
width: 98%;
}

.related-posts a {
color: #000000;
font-family: “Helvetica”,Garuda,Arial,sans-serif;
font-size: 17px;
}

.text-related-posts {
color: #464646;
font-size: 12px;
}

.rthumb {
float: left;
margin-right: 10px;
}

.related-posts .last {
margin-right: 0px;
}

Begitulah caranya, bisa juga dimodifikasi lebih lanjut agar sesuai dengan theme yang kita gunakan 🙂

2 Comments

  1. carolina 5 May 2016
  2. ankara 27 December 2018

Leave a Reply

This site uses Akismet to reduce spam. Learn how your comment data is processed.