Home » Internet » Tutorial web » Artikel Terkait Tanpa Plugin WordPress (Related Posts)

Artikel Terkait Tanpa Plugin WordPress (Related Posts)

Cara membuat atau menampilkan artikel terkait (Related Posts) tanpa plugin WordPress pada posting blog. Related post tanpa plugin dalam postingan ini untuk menampilkan artikel-artikel terkait dari artikel utama (konten blog) berdasarkan tags. Hal ini termasuk menjadi salah satu teknik on page SEO, sehingga pengunjung dapat mengetahui artikel-artikel yang satu tema, selanjutnya yang diharapkan membaca beberapa artikel yang tampil.

Pada artikel meluruskan tips SEO tentang letak keyword blog, saya pernah dibuat bingung oleh search engine Google, karena kalimat yang di indeks tidak hanya artikel utama, ternyata link dalam artikel terkait juga dibaca. Maka dengan membuat Related Post sendiri, kita bisa bebas memodifikasi sesuai dengan keinginan kita.

Sebelum melangkah jauh, sebaiknya di coba terlebih dahulu dengan server lokal (localhost), silahkan baca dulu install WordPress secara offline. Sehingga Anda bisa mencoba-coba kode php artikel terkait, sekaligus untuk bentuk desainnya, untuk menghindari error. Kalau sudah fix, baru deh di copy-paste kedalam blog.
Berikut kode php untuk membuat related posts (artikel terkait) tanpa plugin WordPress berdasarkan tags.

Buka file single.php theme WordPress, kemudian copy kode php di bawah ini.

<?php
$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),
		'showposts'=>10, // Jumlah artikel yang akan ditampilkan - Show post count.
		'caller_get_posts'=>1
	);
	$my_query = new wp_query($args);
	if( $my_query->have_posts() ) {
		echo '<h3>Related Posts :</h3><ul>';
		while ($my_query->have_posts()) {
			$my_query->the_post();
		?>
			<li><a href="<?php the_permalink() ?>" rel="bookmark" title="Permanent Link to <?php the_title_attribute(); ?>"><?php the_title(); ?></a></li>
		<?php
		}
		echo '</ul>';
	}
}
?>

Selanjutnya paste di bawah <?php the_content(); ?>
Atau terserah mau diletakkan di mana :roll: Dalam blog ini saya meletakkan di bawah artikel utama, di atas kategori dan tag. Bisa juga diletakkan pada bagian bawah komentar.

Kode di atas format atau desain akan mengikuti konten blog. Untuk memperindah tampilan artikel terkait tersebut, bisa juga dengan menambahkan style tersendiri. Langkahnya :

Letakkan kode related posts di atas diantara kode di bawah ini :
<div class=”post-related”>
Kode php related post di sini
</div>

Biar tidak membingungkan :) maka hasil selengkapnya menjadi seperti di bawah ini

<div class="post-related">
<?php
$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),
		'showposts'=>10, // Jumlah artikel yang akan ditampilkan - Show post count.
		'caller_get_posts'=>1
	);
	$my_query = new wp_query($args);
	if( $my_query->have_posts() ) {
		echo '<h3>Related Posts :</h3><ul>';
		while ($my_query->have_posts()) {
			$my_query->the_post();
		?>
			<li><a href="<?php the_permalink() ?>" rel="bookmark" title="Permanent Link to <?php the_title_attribute(); ?>"><?php the_title(); ?></a></li>
		<?php
		}
		echo '</ul>';
	}
}
?>
</div>

Kode-kode yang berwarna jingga bisa diubah-ubah sesuai dengan kebutuhan. Kode dalam tutorial ini adalah yang saya pasang dalam blog ini.

Selanjutnya buka file style.css dalam theme WordPress. Masukkan kode di bawah ke dalamnya.

.post-related { line-height:20px; position:relative; color:#000; margin-right:5px; padding:2px 25px;overflow: hidden; display:block;}
.post-related h3 { color:#0349a8; font-family:Georgia,FixedSys; font-size:22px; margin:5px 0; }

Kode untuk style.css ini tidak harus baku seperti itu. Contoh tersebut sudah saya sesuaikan dengan theme WordPress ini. Tentunya berbeda theme juga akan berbeda tampilan agar sesuai.

Thanks to Binny V A

Demikian artikel tentang cara membuat related posts atau artikel terkait blog WordPress tanpa plugin, berdasarkan tags. Sehingga kita tidak perlu repot-repot lagi install plugin artikel terkait :) inilah yang saya suka. Selamat mencoba. Maaf dan Terima kasih.

Update 30 April 2011 :
Setelah dipasang beberapa waktu lalu, ternyata membuat amburadul :) kategori, tag, link pagenavi dan komentar. Saya mengganti dengan kode php lain. Masih dalam taraf uji coba. Kalau sudah fix dengan tidak ditemukan kejanggalan segera posting update artikel Related Posts. Maaf dan terima kasih.

Share to : Facebook | Twitter | Digg | Google | Technorati | Stumbleupon | Delicious | Reddit |

Artikel terkait :

Random Posts :

6 Comments.

  1. thanks gan,, buat referensi uji coba,, :mrgreen:

    • Yusuf Fahrurrozi

      @ini putro: beberapa hari lagi kode yang berbeda segera posting, lg dlm taraf uji coba.

  2. gan, saya masih belajar wordpress tp apakah utk menambah “related post” baik dengan plug in maupun mengubah kode css spt di atas, harus dengan wordpress berbayar? saya masih memakai wordpress gratisan (blm diupgrade), dan tidak menemukan pilihan plug ins, kalo pilihan css ada sih, tapi katanya “save and purchase” > mesti bayarkah kalo mau upgrade?
    mohon petunjuknya nih :) thanks ya

    • Yusuf Fahrurrozi

      Related post atupun plugin yg lain memang untuk WordPress berbayar, atau menggunakan WordPress dengan hosting sendiri (bayar hosting ma domain). Termasuk untuk kustomisasi theme (CSS, PHP, JavaScript dll)…
      Kalau sekedar ingin tahu, beli saja hosting di Indonesia, nyoba setahun, terus tidak usah dilanjutin hehe… tp udah th bedanya blog WordPress.com ma CMS WordPress yang bisa dikustomisasi…
      Atau bisa nyoba WordPress secara offline (localhost), bisa mencoba-coba plugin, theme, editing css php dll. Tp hanya di server lokal. Kalo ingin di upload, harus memiliki hosting dan domain sendiri. Semoga membantu…

  3. Makasih infonya, langsung dicoba

Leave a Comment