Membuat Featured Slide Show

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:

view plaincopy to clipboardprint?

1. if (is_home()) {  
2.   wp_enqueue_script('jquery');  
3.   wp_enqueue_script('easing', get_stylesheet_directory_uri() . '/js/jquery.easing.1.1.js');  
4.   wp_enqueue_script('carousal', get_stylesheet_directory_uri() . '/js/jcarousel.js');  
5. }  

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:

view plaincopy to clipboardprint?

1. <script type="text/javascript">  
2. jQuery(function() {  
3.   jQuery(".mygallery").jCarouselLite({  
4.     btnNext: ".nextb",  
5.     btnPrev: ".prevb",  
6.     visible: 1,  
7.     speed: 2000,  
8.     auto: 3000,  
9.     easing: "backout"  
10.   });  
11. });  
12. </script>  
13.   
14. <div id="slidearea">  
15.   <div id="gallerycover">  
16.     <div class="mygallery">  
17.     <ul>  
18.     <?php   
19.       $my_query = new WP_Query('showposts=5');  
20.       while ($my_query->have_posts()) : $my_query->the_post();  
21.       $do_not_duplicate = $post->ID;  
22.     ?>  
23.     <li>  
24.       <div class="mytext">  
25.         <a href="<?php the_permalink() ?>">  
26.          <?php   
27.           if ( has_post_thumbnail() ) {  
28.             the_post_thumbnail();  
29.           } else {  
30.             echo '<img src="'.get_bloginfo('template_url').'/images/thumbnail.png" alt="'.get_the_title().'" class="wp-post-image"/>';  
31.           }  
32.          ?>  
33.         </a>  
34.         <h2><a href="<?php the_permalink() ?>" rel="bookmark" title="<?php the_title(); ?>"><?php the_title(); ?></a></h2>  
35.         <p><?php the_content_rss('more_link_text', TRUE, '', 30); ?>   
36.         <a href="<?php the_permalink() ?>" rel="bookmark" title="<?php the_title(); ?>">read more..</a></p>  
37.           
38.         <div class="slimeta">  
39.         <a href="#" class="prevb">&laquo; Previous</a><a href="#" class="nextb">Next &raquo;</a>  
40.         </div>  
41.       </div>       
42.     </li>  
43.       <?php endwhile; ?>  
44.     </ul>  
45.     <div class="clear"></div>          
46.     </div>  
47.   </div>  
48. </div>  

<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:

view plaincopy to clipboardprint?

1. /* SLIDER */  
2.   
3. #slidearea{  
4.   height: 170px;   
5.   overflow: hidden;  
6.   margin:10px 0px 0px 0px;  
7.   padding:10px;  
8.   position: relative;  
9.   width:560px;  
10.   border:solid 1px #cccccc;  
11.   background: #ededed;  
12. }  
13. #gallerycover{  
14.   overflow: hidden;  
15.   margin:0px 20px 0px 0px;  
16. }  
17. .mygallery{  
18.   overflow: hidden;  
19.   position:relative;  
20.   
21. }  
22. .mytext img{  
23.   float:left;  
24. }  
25. .mytext{  
26.   position:relative;  
27.   margin:0px 5px 0px 5px;  
28.   height: 240px;  
29.   display:inline;  
30.   float:left;  
31.   color:#c4c4c4;  
32.   }  
33. .mytext h2 {  
34.   padding:0px;  
35.   margin:0px;  
36.   font-size: 18px ;  
37.   font-weight:bold;  
38.   font-style:italic;  
39. }  
40. .mytext h2 a:link,.mytext h2 a:visited{  
41.   color:#006b97;  
42.   text-decoration:none;  
43. }  
44. .mytext p{  
45.   padding:0px 0px;  
46.   color:#555;  
47.   font-size: 14px ;  
48.   line-height:20px;  
49.   font-style:italic;  
50.   text-shadow:1px 1px 0px #f6f6f6;  
51. }  
52. .nextb {  
53.   float:rightright;  
54.   }  
55. .prevb {  
56.   float:left;  
57.   }  

/* 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