Monday, May 9, 2011

Cara membuat atau menampilkan artikel terkait (Related Posts) tanpa plugin WordPress

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 hotseleb.com
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.

No comments:

Post a Comment