Membuat Featured Slide Show

Akhirnya kita coba sesuatu yang sedikit rumit.. hehehe.. Jika anda mengikuti panduan ini dari awal, insya Allah panduan berikut biasa-biasa aja. Silahkan copy paste dan modif sendiri koding-kodingnya ya.
Featured slide show adalah sebuah fasilitas di sebuah web berita yang memungkinkan pemilik web berbagi sesuatu yang spesial. Misalnya berita-berita khusus yang penting dan hot atau peristiwa yang langka dan layak diketahui oleh banyak orang. Untuk blog, biasanya dipakai di artikel-artikel khusus. Fasilitas ini dibuat dalam bentuk dinamis dengan animasi yang keren.
Ada macam-macam slideshow sih. Tapi yang coba saya share disini adalah slideshow yang cukup sederhana sehingga mudah untuk memodifikasinya. Anda bisa mengkombinasinya sendiri agar nampak lebih keren misalnya dengan menambah thumbnail dengan ukuran lebih besar khusus untuk slideshow ini. Anda juga bisa memodifikasi tampilannya. Oke, mari kita mulai.
Untuk keperluan membuat slideshow ini, kita membutuhkan 2 buah file javascript yang akan mengelola slideshow kita nanti. Jadi, silahkan unduh dulu filenya disini. Itu adalah sebuah file zip dengan folder js di dalamnya. Anda hanya perlu meng-ekstract-nya ke folder themes yang sedang anda bangun.
Jika sudah, sekarang mari kita mulai mengedit 2 file yaitu index.php dan style.css. Pada file index.php kita memasang 2 deret kode di 2 tempat terpisah. Pertama sebelum tag </head> dan kedua di tempat dimana anda ingin slideshow ini muncul. Biasanya saya taruh setelah div content.
Sebelum tag </head> kita masukkan kode ini untuk memanggil 2 file javascript diatas dan file jquery yang sudah ada di WordPress:

if (is_home()) {
  wp_enqueue_script('jquery');
  wp_enqueue_script('easing', get_stylesheet_directory_uri() . '/js/jquery.easing.1.1.js');
  wp_enqueue_script('carousal', get_stylesheet_directory_uri() . '/js/jcarousel.js');
}

Kemudian di tempat dimana slideshow muncul, silahkan pasang kode slideshow ini:

<script type="text/javascript">
jQuery(function() {
  jQuery(".mygallery").jCarouselLite({
    btnNext: ".nextb",
    btnPrev: ".prevb",
    visible: 1,
    speed: 2000,
    auto: 3000,
    easing: "backout"
  });
});
</script>

<div id="slidearea">
  <div id="gallerycover">
    <div class="mygallery">
    <ul>
    <?php 
      $my_query = new WP_Query('showposts=5');
      while ($my_query->have_posts()) : $my_query->the_post();
      $do_not_duplicate = $post->ID;
    ?>
    <li>
      <div class="mytext">
        <a href="<?php the_permalink() ?>">
         <?php 
          if ( has_post_thumbnail() ) {
            the_post_thumbnail();
          } else {
            echo '<img src="'.get_bloginfo('template_url').'/images/thumbnail.png" alt="'.get_the_title().'" class="wp-post-image"/>';
          }
         ?>
        </a>
        <h2><a href="<?php the_permalink() ?>" rel="bookmark" title="<?php the_title(); ?>"><?php the_title(); ?></a></h2>
        <p><?php the_content_rss('more_link_text', TRUE, '', 30); ?> 
        <a href="<?php the_permalink() ?>" rel="bookmark" title="<?php the_title(); ?>">read more..</a></p>
        
        <div class="slimeta">
        <a href="#" class="prevb">&laquo; Previous</a><a href="#" class="nextb">Next &raquo;</a>
        </div>
      </div>     
    </li>
      <?php endwhile; ?>
    </ul>
    <div class="clear"></div>        
    </div>
  </div>
</div>

Kode diatas akan memunculkan 5 artikel terbaru di slideshow. Jika anda ingin mengubahnnya, silahkan merubah kode ini sesuai query yang anda inginkan:
$my_query = new WP_Query('showposts=5');
Selanjutnya, kita tinggal mengatur bagaimana slideshow ini muncul melalui style.css. Berikut ini style yang saya gunakan. Anda bisa memodifikasinya sendiri:

/* SLIDER */

#slidearea{
  height: 170px; 
  overflow: hidden;
  margin:10px 0px 0px 0px;
  padding:10px;
  position: relative;
  width:560px;
  border:solid 1px #cccccc;
  background: #ededed;
}
#gallerycover{
  overflow: hidden;
  margin:0px 20px 0px 0px;
}
.mygallery{
  overflow: hidden;
  position:relative;

}
.mytext img{
  float:left;
}
.mytext{
  position:relative;
  margin:0px 5px 0px 5px;
  height: 240px;
  display:inline;
  float:left;
  color:#c4c4c4;
  }
.mytext h2 {
  padding:0px;
  margin:0px;
  font-size: 18px ;
  font-weight:bold;
  font-style:italic;
}
.mytext h2 a:link,.mytext h2 a:visited{
  color:#006b97;
  text-decoration:none;
}
.mytext p{
  padding:0px 0px;
  color:#555;
  font-size: 14px ;
  line-height:20px;
  font-style:italic;
  text-shadow:1px 1px 0px #f6f6f6;
}
.nextb {
  float:right;
  }
.prevb {
  float:left;
  }

Nah, itu aja yang perlu dilakukan untuk membangun slideshow. Tinggal anda kemudian yang harus menentukan sendiri seperti apa tampilan yang anda inginkan. Karena tiap orang pasti punya sentuhan seni sendiri-sendiri. Oke, selamat berkreasi

sumber :http://wordpress.or.id/membuat-featured-slide-show.html