Home » Tutorial » Wordpress » Cara Membuat Artikel Terkait di WordPress Tanpa Plugin

Cara Membuat Artikel Terkait di WordPress Tanpa Plugin

loading...

Cara Membuat Related Post Thumbnail Tanpa Plugin di WordPress – Bila anda pengguna WordPress maka tentunya anda tahu bahwa banyak plugin yang bisa digunakan untuk membuat related post atau artikel terkait seperti YARP, Related Post dan plugin wordpress lainnya untuk menyisipkan artikel terkait di postingan. Tetapi pernahkah anda terpikir membuat artikel terkait yang berisi gambar serta judul artikelnya di bagian bawah postingan tanpa harus menggunakan plugin.

Bila itu yang anda mau maka masukkan kode script berikut ini pada theme wordpress anda yaitu pada bagian single.php

<div class="relatedposts">
<h3>Artikel Terkait Lainnya</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'=>10, // jumlah artikel terkait lainnya.
'orderby'=>date,
'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="<? the_permalink()?>"><?php the_post_thumbnail(array(120,120)); ?><br />
<?php the_title(); ?>
</a>
</div>
<? }
}
$post = $orig_post;
wp_reset_query();
?>
</div>

Pada script diatas ada beberapa hal yang perlu anda ketahui yaitu :

  • Artikel terkait lainnya yang dimunculkan sebagai related article atau related post didasarkan pada artikel yang mempunyai Tag yang sama. Oleh karenanya saat anda memposting artikel, maka juga anda harus memberikan tag pada artikel yang anda posting karena bila tidak, maka tidak ada satupun artikel terkait lainnya yang bisa ditampilkan.
  • Perhatikan pada script diatas pada bagian orderby, perintah ini akan menampilkan related post berdasarkan aturan tertentu, pada script diatas akan memunculkan artikel terakhir yang diposting dengan tag yang  sama, oleh karenanya yang dimasukkan dalam script adalah date. Namun bila anda ingin menampilkan artikel terkait lainnya secara random karena artikel yang lama dengan yang baru sama pentingnya maka anda ganti tulisan date dengan rand. Sehingga tulisan scriptnya yang awalnya ‘orderby’=>date, menjadi ‘orderby’=>rand,
  • Untuk merubah jumlah artikel terkait yang akan ditampilkan, maka anda ganti angka 10 dengan angka lainnya sesuai dengan jumlah artikel terkait yang ingin ditampilkan misalnya hanya 8 atau angka berapa saja pada script berikut ini : ‘posts_per_page’=>10, menjadi ‘posts_per_page’=>8, itu sesuai dengan keinginan anda.

Agar lebih menarik tampilannya dan tidak berantakan nantinya, maka coba anda tambahkan kode css untuk related artikelnya pada css wordpress yaitu pada bagian style.css :

/* ========= CSS Tambahan========= */
.relatedposts {width: 625px; margin: 0 0 2px 0; float: left; font-size: 12px;}
.relatedposts h3 {font-size: 20px; margin: 10px 5px 5px 0;font-family:"Showcard Gothic", "Arial Narrow";text-shadow: 0px 3px 2px #0000ff; color: #ff3399;text-decoration:underline; }
.relatedthumb {margin: 0 2px 0 1px; float: left;min-height: 170px;}
.relatedthumb img {
height: 100px;
width: 100px;
float: center;
margin: 4px 4px 2px 5px;
background: #F5F445;
background: -webkit-linear-gradient(left, #F5F445 0%,#FF3399 100%);
background: -moz-linear-gradient(left, #F5F445 0%,#FF3399 100%);
background: -o-linear-gradient(left, #F5F445 0%,#FF3399 100%);
background: -ms-linear-gradient(left, #F5F445 0%,#FF3399 100%);
background: linear-gradient(left, #F5F445 0%,#FF3399 100%)
-moz-border-radius: 50px;
-webkit-border-radius: 50px;
-khtml-border-radius: 50px;
border-radius: 50px;
border:0px solid #CCCCCC;
padding: 3px 3px 3px 3px; }
.relatedthumb a {color :#000; text-decoration: none; display:block; padding: 1px; width: 117px;line-height:14px;font-family:"Arial Narrow";}
.relatedthumb a:hover {background-color: #ddd; color: #000;}

Penjelasan Singkat Tentang Penulisan CSS diatas

  • CSS diatas terkait dengan related post sebagian telah saya modifikasi untuk memberikan nuansa tampilan yang berbeda, yang kebanyakan related article menampilkan gambar thumbnailnya seperti kotak segi empat saja tetapi menggunakan pengetahuan css yang saya ketahui saya modifikasi sehingga tampilan thumbnailnya menjadi seperti lingkaran atau seperti kaca pembesar. Ini terletak pada kode script :
    -moz-border-radius: 50px;
    -webkit-border-radius: 50px;
    -khtml-border-radius: 50px;
    border-radius: 50px;
    Bila sudut tumpulnya ingin anda rubah, maka ganti semua yang berukuran 50px ke ukuran lainnya sesuai dengan selera anda.
  • Pada border gambar thumbnail diatas menggunakan graduasi warna dasar kuning menjadi warna pink. Ini terletak pada script berikut ini :
    background: #F5F445;
    background: -webkit-linear-gradient(left, #F5F445 0%,#FF3399 100%);
    background: -moz-linear-gradient(left, #F5F445 0%,#FF3399 100%);
    background: -o-linear-gradient(left, #F5F445 0%,#FF3399 100%);
    background: -ms-linear-gradient(left, #F5F445 0%,#FF3399 100%);
    background: linear-gradient(left, #F5F445 0%,#FF3399 100%)
    Warna kuning pada kode warna #F5F445 dan warna pink pada kode warna #FF3399 , bila anda menginginkan graduasi warna yang lain silahkan anda ganti kedua kode warna tersebut.
  • Untuk merubah tinggi  ukuran per artikelnya maka silahkan anda ganti pada bagian min-height: 170px; dengan ukuran lainnya, misalnya menguranginya menjadi min-height: 150px; berdasarkan pengalaman, saya menambah tinggi ukurannya bila related postnya tersusun menjadi 2 baris, serta judul artikelnya yang ditampilkan cukup panjang serta tidak sama panjangnya maka susunan related artikelnya pada baris ke dua akan menjadi berantakan tidak sejajar.
  • Pada kode CSS ini untuk artikel terkait lainnya, penulisan ukurannya seharusnya disesuaikan dengan ukuran lebar konten utamanya anda bisa rubah sesuai dengan ukuran blog anda yaitu pada .relatedposts {width: 625px , silahkan anda ganti angka 625px sesuai dengan lebar main content blog anda.
  • Bila ada yang belum jelas, mungkin anda perlu belajar sedikit pengetahuan tentang CSS untuk mempermudah melakukan modifikasi css.

Bila anda penasaran ingin mengetahui bagaimana hasilnya bila diterapkan dalam blog, maka lihat gambar dibawah ini yang saya terapkan pada blog saya yang lain.

cara membuat related artikel tanpa plugin di wordpress

Semoga artikel diatas bisa bermanfaat bagi anda … Amin

Ini Yang Anda Cari :

cara membuat artikel terkait pada wordpress | menambah artikel terkait di wordpress | tulisan berbayang |

2 thoughts on “Cara Membuat Artikel Terkait di WordPress Tanpa Plugin

  1. arif mj says:

    penempatan kode style.css belum jelas gan, jadi gak muncul gambar cuman text

    1. admin says:

      Letakkan saja pada bagian bawah di bagian style.css

Leave a Reply

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