Home Pemrogramman Web / Wordpress

Cara Membuat Related Post di Wordpress Tanpa Plugin (Manual)

SeniKoding.com - Wordpress adalah platform website terbaik di Dunia. Banyak situs-situs besar yang dibangun dengan CMS ini karena banyak keunggulan yang terletak pada platform ini, baik dari segi Sistem yang mudah dikelola, handal, aman dan desain yang mempunyai gaya terkini.

Dari desain kamu bisa menginstal plugin-plugin yang kamu mau yang bisa membuat website kamu tambah optimal begitu juga menambahkan plugin Related Post yang sangat penting untuk kemudahan pengunjung. Selain kemudahan dengan plugin, artikel ini akan memberikan cara bagaimana membuat artikel terkait tanpa plugin (manual koding).

Related Post (artikel terkait) didalam web / blog dapat meningkatkan jumlah Pageview dan menurunkan jumlah Bounc Rate (rasio pentalan) blog, keadaan ini sangat penting untuk pertumbuhan blog / website. Jika rasio pentalan blog rendah (optional semakin kecil semakin bagus) maka dapat di lihat bahwa pengunjung kamu senang dan nyaman membaca dengan blog kamu, itu artinya baik untuk blog kamu.

Cara Membuat Related Post (Artikel Terkait) di Wordpress Manual, Tidak dengan Plugin


Step #1: Buka file function.php pada dashboard admin Wordpress, tambahkan kode dibawah ini jika ingin menggunakan gambar Thumbnail. Cara mencari file ini pilih Tampilan - Editor - function.php.
add_theme_support( 'post-thumbnails' );
set_post_thumbnail_size( 150, 100, true );
- Baris ke 1 untuk mengaktifkan perintah Thumbnail
- Baris ke 2 untuk mengatur lebar dan tinggi gambar Thumbnail

Step #2 : Buka file single.php, tambahkan kode dibawah ini setelah bagian loop post / content.
kira-kira dibawah kode seperti gambar ini :

kode related post di wordpress

Kode Related Post berdasarkan Tag di Wordpress #1

<!-- Related Post BY TAG -->
<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
'caller_get_posts'=>1,
'orderby' => 'rand' // Yang ditampilkan Random / Acak
);
$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>   
<!-- End Related Post BY TAG -->
Jika kamu lebih suka dengan menampilkan artikel terkait pada laman sesuai relasi Tag, maka kamu bisa pasang kode diatas.

Kode Related Post berdasarkan Kategori / Category di Wordpress #2

<!-- Ralated POST BY KATEGORI -->
<?php
$orig_post = $post;
global $post;
$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),
'posts_per_page'=> 4,   // Jumlah yang ditampilkan
'ignore_sticky_posts'=>1,
'orderby' => 'rand'  // Tampilan Random / Acak
);
$my_query = new wp_query( $args );
if( $my_query->have_posts() ) {
echo '<div class="relatedposts"><h3>Related Posts :</h3>';
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 }
echo '</div>';
} };
$post = $orig_post;
wp_reset_query(); ?>
<!-- END Related Post BY KATEGORY -->
Jika kamu ingin menampilkan related post berdasarkan Kategori / Category maka gunakan kode diatas ini.

Kamu juga bisa mengatur Artikel Terkait ini sesuai keingin kamu dari Jumalh yang ingin ditampilkan dan Urutan yang ditampilkan (apakah dari awal ke akhir, akhir ke awal, atau acak).

Setingannya pada cuplikan kode berikut ini:

cuplikan #1 = 'posts_per_page'=> 4,   // Jumlah yang ditampilkan
cuplikan #2 = 'orderby' => 'rand'  // Tampilan Random / Acak

Cuplikan 1, kamu bisa mengatur jumlah related post yang ingin ditampilkan, ganti angka 4 dengan angka yang kamu mau.
Cuplikan 2, kamu bisa mengatur urutan related post yang mau ditampilkan, ganti kata "rand" dengan kosong kan kode (' ') jika ingin urut dari pertama-belakang, ganti "rand" dengan DESC (descending) jika ingin menampilkan urutan dari belakang-pertama.

Baca juga : Tips Memilih Template Website (Wordpress)

Sekarang kode CSS untuk desain tampilan Related Post :


Tambahkan kode CSS dibawah ini di file style.css, copy paste kode dibawah ini pada bagian file paling bawah saja untuk mempermudah pengeditan kembali.
/*thumbnail related-post */
.relatedposts {width: 100%; margin: 0 0 20px 0; float: left; font-size: 13px;} .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; width: 100%;} .relatedthumb a {color :#333; text-decoration: none; display:block; padding: 4px; width: 150px; font-weight: bold;} .relatedthumb a:hover {background-color: #ddd; color: #000;}
Sampai disini Cara Membuat Related Post di Wordpress Tanpa Plugin (Manual) semoga bermanfaat.

Ada pertanyaan tentang membuat Artikel Terkait di Wordpress? silakan.

Baca juga :

2 komentar

  1. Makasih bang untuk tutorialnya saya mau request dong cara ganti teks default yang di atas form kolom komentar seperti ini

    "Alamat Anda tidak akan dipublikasikan"

    BalasHapus

Dilarang SPAM Komentar!

to Top