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');
- }
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">« Previous</a><a href="#" class="nextb">Next »</a>
- </div>
- </div>
- </li>
- <?php endwhile; ?>
- </ul>
- <div class="clear"></div>
- </div>
- </div>
- </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">« Previous</a><a href="#" class="nextb">Next »</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:
-
-
- #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:rightright;
- }
- .prevb {
- float:left;
- }
/* 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
namun WordPress telah menyediakan fitur “Menus” yang dapat digunakan membuat navbar secara mudah.
