How to Start a Blog? Panduan Membuat Website Hanya 30 Menit

Membuat Related Post WordPress Tanpa Plugin

Salah satu keuntungan besar menggunakan WordPress adalah adanya plugin. Dengan adanya plugin anda bisa membuat website yang anda inginkan, dari plugin untuk meningkatkan SEO maupun plugin untuk membangun toko online (E-commerce).

Namun dengan menggunakan terlalu banyak plugin itu bisa mengakibatkan website wordpress anda menjadi lambat dan mungkin ada beberapa plugin yang tidak support pada theme yang anda gunakan sehingga website anda tidak jalan. Dan ada beberapa plugin yang populer dan tentunya sering digunakan oleh banyak blogger, yaitu plugin untuk memunculkan related post atau post terkait di bawah postingan.

related post wordpress tanpa plugin

Dalam artikel ini saya akan memberikan tutorial bagaimana cara menambahkan related post / posting terkait dengan thumbnail ke blog Anda tanpa plugin.

Baca : 7 Plugin Related Post atau Posting Terkait Terbaik WordPress

Berikut Tutorial Related Post tanpa plugin :

1. Thumbnail

Aktifkan fitur thumbnail dan masukkan ukuran thumbnail sesuai keinginan anda di wordpress dengan memasukkan code berikut di function.php theme anda.

add_theme_support( 'post-thumbnails' );
set_post_thumbnail_size( 150, 100, true );

2. Tambahkan code berikut di file single.php

<div class="relatedposts">
<h3>Related posts</h3>
<?php
	$orig_post = $post;
	global $post;
	$tags = wp_get_post_tags($post->ID);
	
	if ($tags) {
	$tag_ids = array();
	foreach($tags as $individual_tag) $tag_ids[] = $individual_tag->term_id;
	$args=array(
	'tag__in' => $tag_ids,
	'post__not_in' => array($post->ID),
	'posts_per_page'=>4, // Jumlah related yang ditampilkan.
	'caller_get_posts'=>1
	);
	
	$my_query = new wp_query( $args );

	while( $my_query->have_posts() ) {
	$my_query->the_post();
	?>
	
	<div class="relatedthumb">
		<a rel="external" href="<?php the_permalink()?>"><?php the_post_thumbnail(array(150,100)); ?><br />
		<?php the_title(); ?>
		</a>
	</div>
	
	<?php }
	}
	$post = $orig_post;
	wp_reset_query();
	?>
</div>

*note : letakkan kode diatas di bawah the_content() dan anda bisa mengatur ukuran thumbnail di the_post_thumbnail(array(150,100))

3. Tambahkan code css berikut di style.css theme anda

 /*thumbnail related */ .relatedposts {width: 100%; margin: 0 0 20px 0; float: left; font-size: 12px;} .relatedposts h3 {font-size: 20px; margin: 0 0 5px 0; } .relatedthumb {margin: 0 1px 0 1px; float: left; } .relatedthumb img {margin: 0 0 3px 0; padding: 0;} .relatedthumb a {color :#333; text-decoration: none; display:block; padding: 4px; width: 150px;} .relatedthumb a:hover {background-color: #ddd; color: #000;} 

Baca : Tutorial Membuat Related Post Berbagai pilihan di WordPress

Anda Terbantu artikel ini? Silahkan bergabung dengan centerklik di Twitter dan Facebook+.

Daftar isi Tutorial WordPress Terlengkap Gratis
10 top hosting!

Register Now: TOP 10 Hosting

Dapatkan Hosting Murah dengan Kualitas Terbaik. For Serious Blogger! View Deals

Niagahoster

Rp.26.000/Bln Free Domain, Unlimited Space & Bandwidth Get Host

IDCloudhost

Rp.30.000/Bln Free Domain, Unlimited Space & Bandwidth Get Host

Bluehost Hosting

$2.95/Month Free Domain, Unlimited Space & Bandwidth Get Host

iPage Hosting

$1.99/Month Free Domain, Unlimited Space & Bandwidth Get Host

SiteGround Hosting

$3.45/Month Free Domain, Unlimited Space & Bandwidth Get Host

Hostgator

$3.95/Month Free Domain, Unlimited Space & Bandwidth Get Host

24 Comments

Add a Comment

Your email address will not be published. Required fields are marked *