Minggu, 21 April 2013

Cara Memasang Related Post Di Bawah Postingan WordPress

Cara Memasang Related Post Di Bawah Postingan WordPress

Bismillah, Mungkin saja sobat sedang mencari cara membuat Related Post atau biasa kita kenal dengan nama Artikel Terkait, namun setiap kali sobat mencari melalui embah google, hasil penelusuran hanya memunculkan cara memasang related post atau artikel terkait pada blog berplatform blogspot dan hanya beberapa blog sobat yang membahas khusus wordpress self host dan selebihnya hanya membahas memnggunakan plugin Related Posts saja. Bagi sobat pengguna blogspot bisa dilihat cara membuat Related Post pada postingan saya sebelumnya.
Artikel kali ini saya akan menambah perbendaharaan bagaimana cara memasang Related Post atau Artikel Terkait tanpa menggunakan plugin di bawah postingan wordpress. Ok langsung saja;
  1. Login ke WordPress sobat dalam hal ini wordpress dengan self hosting
  2. Pilih Appearance > Editor pilih style.css, selanjutnya tambahkan kode css berikut :
    /*-------------------------------------
        Artikel Terkait
    -------------------------------------*/
    #relatedposts {padding: 20px 0 20px 5px;}
    #relatedposts > h3 {margin: 16px 0 6px;}
    #relatedposts > ul {margin-left: 15px;}
    #relatedposts > ul li {list-style: circle inside;}
    
    #relatedposts > ul li a {
      display: auto; 
      width: auto;
      border-bottom: 0px solid #FFFFFF;box-shadow:0 1px 0 #ffffff;
      -webkit-transition: all 0.26s ease-out;
        -moz-transition: all 0.26s ease-out;
        -o-transition: all 0.26s ease-out;
        -ms-transition: all 0.26s ease-out;
    }
    
    #relatedposts > ul li a:hover {
      color: #fff;
      text-shadow: 2px 2px 1px rgba(0, 0, 0, 2);
      text-decoration: none; 
      font-weight: bold;
      padding-left: 10px;
      background:none repeat scroll 0 0 rgba(0, 0, 0, 0.0);
    }
  3. Selanjutnya buka file single.php dalam folder themes sobat, edit selanjutnya cari kode <?php the_content(); ?> kemudian tambahkan kode berikut dibawah ini tepat dibawah kode diatas :
    <!--Artkel Terkait-->
     <?php
         $original_post = $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),
             'showposts' => 7,
             'order' => 'ASC',
             'orderby' => 'rand'
            );
           $my_query = new WP_Query($args);
           if( $my_query->have_posts() ) {
               echo "<div id="relatedposts" class="gridview">";
               echo "<h4 id="relatedtitle">Baca Juga :</h4><ul>";
    
           while ($my_query->have_posts()) : $my_query->the_post(); ?>
    
             <li><a href="<?php the_permalink(); ?>" title="<?php the_title(); ?>"><?php the_title(); ?></a></li>
         <?php endwhile;
    
         echo "</ul></div>";
     }
     }
     $post = $original_post;
     wp_reset_query();
     ?>
  4. Langkah terakhir save themes sobat dan lihat hasilnya
Semoga berhasil, dan mudah-mudahan artikel kali ini membantu sobat-sobat sekalian. Wassalam.

Tidak ada komentar:

Total Tayangan

Banner1