Blog Kiếm Tiền » Thủ Thuật WordPress » Tạo Slider Cho WordPress

Tạo Slider Cho WordPress

by Thái Nguyên on August 9, 2011 · 59 comments

Hôm nay mình sẽ hướng dẫn các bạn tạo một slider cho từng chuyên mục hay Feature gì tùy vào cách nghĩ và hành động của từng bạn.

Bài viết này khắc phục được những thiếu sót đáng quan tâm mà bài viết trước đã làm nhưng chắc chắn là không khỏi thiếu sót.

Demo :
1 Tạo Slider Cho WordPress

Còn đây là mình tùy chỉnh cho khác với mọi người một tý.
2 Tạo Slider Cho WordPress

Hướng dẫn:

Bước 1 : Đầu tiên bắt đầu với tệp tin header.php
Bạn thêm đoạn code dưới vào trước tags </head>.

<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js" ></script>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.5.3/jquery-ui.min.js" ></script>
<script type="text/javascript">
$(document).ready(function(){
$("#featured > ul").tabs({fx:{opacity: "toggle"}}).tabs("rotate", 5000, true);
});
</script>

Bước 2 : Chèn đoạn CSS dưới vào tệp tin giao diện .CSS ( style.css chẳng hạn ) của blog bạn.

#featured{
width:400px;
padding-right:250px;
position:relative;
border:5px solid #ccc;
height:250px;
background:#fff;
}
#featured ul.ui-tabs-nav{
position:absolute;
top:0; left:400px;
list-style:none;
padding:0; margin:0;
width:250px;
}
#featured ul.ui-tabs-nav li{
padding:1px 0; padding-left:13px;
font-size:12px;
color:#666;
}
#featured ul.ui-tabs-nav li img{
float:left; margin:2px 5px;
background:#fff;
padding:2px;
border:1px solid #eee;
}
#featured ul.ui-tabs-nav li span{
font-size:11px; font-family:Verdana;
line-height:18px;
}
#featured li.ui-tabs-nav-item a{
display:block;
height:60px;
color:#333; background:#fff;
line-height:20px;
}
#featured li.ui-tabs-nav-item a:hover{
background:#f2f2f2;
}
#featured li.ui-tabs-selected{
background:url('images/selected-item.gif') top left no-repeat;
}
#featured ul.ui-tabs-nav li.ui-tabs-selected a{
background:#ccc;
}
#featured .ui-tabs-panel{
width:400px; height:250px;
background:#999; position:relative;
}
#featured .ui-tabs-panel .info{
position:absolute;
top:180px; left:0;
height:70px;
background: url('images/transparent-bg.png');
}
#featured .info h2{
font-size:18px; font-family:Georgia, serif;
color:#fff; padding:5px; margin:0;
overflow:hidden;
}
#featured .info p{
margin:0 5px;
font-family:Verdana; font-size:11px;
line-height:15px; color:#f0f0f0;
}
#featured .info a{
text-decoration:none;
color:#fff;
}
#featured .info a:hover{
text-decoration:underline;
}
#featured .ui-tabs-hide{
display:none;
}

Bước 3 : Có hai cách chèn slider, một là chèn trực tiếp vào tệp tin index.php, hai là tạo một tệp tin khác chứa slider và từ tệp tin index.php gọi tệp tin đó lên .

Mình giới thiệu về cách hai :
Tạo một tệp tin slider.php trong thư mục theme của bạn đang dùng và dùng code để gọi tệp tin đó :
Code :

<?php include ('slider.php'); ?>

3 Tạo Slider Cho WordPress

Cách 1 chính là chèn trực tiếp toàn bộ code bên trong slider.php vào tệp tin index.php .

4 Tạo Slider Cho WordPress

Cách làm :

Bạn mở index.html tệp tin đính kèm thấy có những đoạn code tương tự được lặp lại thì mình sẽ rút gọn nó lại để thực hiện như ở dưới đây.

<div id="featured" >
<ul class="ui-tabs-nav">
<li class="ui-tabs-nav-item ui-tabs-selected" id="nav-fragment-1"><a href="#fragment-1"><img src="images/image1-small.jpg" alt="" /><span>15+ Excellent High Speed Photographs</span></a></li>
</ul>
<div id="fragment-1" class="ui-tabs-panel" style="">
<img src="images/image1.jpg" alt="" />
<div class="info" >
<h2><a href="#" >15+ Excellent High Speed Photographs</a></h2>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla tincidunt condimentum lacus. Pellentesque ut diam....<a href="#" >read more</a></p>
</div>
</div>
</div>

Nếu chèn như đoạn code trên vào slider.php và thêm thắt bằng html thì trên trang chủ chỉ thể hiện slider đúng như những gì mà ta tự chèn vào ..Để tự cập nhật bài viết mình phải dựa vào loop trong wordpress ( Đại khái là vậy :D )

<div id="featured" >
<ul class="ui-tabs-nav">
<?php
$featuredPost = new WP_Query();$featuredPost->query('showposts=4&cat=10');while($featuredPost->have_posts()) : $featuredPost->the_post();?>
<li class="ui-tabs-nav-item" id="nav-fragment-<?php the_ID(); ?>"><a href="#fragment-<?php the_ID(); ?>"><img src="<?php echo get_post_meta($post->ID, "Feature", true);?>" height="50" width="80" alt="" /><span><?php the_title(); ?></span></a></li>
<?php endwhile; ?>
</ul>
<?php
$featuredPost = new WP_Query();$featuredPost->query('showposts=4&cat=10');while($featuredPost->have_posts()) : $featuredPost->the_post();?>
<div id="fragment-<?php the_ID(); ?>" class="ui-tabs-panel ui-tabs-hide" style="">
<img src="<?php echo get_post_meta($post->ID, "Feature", true);?>" height="250" width="400" alt="" />
<div class="info" >
<h2><a href="<?php the_permalink(); ?>" ><?php the_title(); ?></a></h2>
<p><?php the_excerpt(); ?><a href="<?php the_permalink(); ?>" >read more</a></p>
</div>
</div>
<?php endwhile; ?>
</div>

Trong đoạn code trên có đoạn code (‘showposts=4&cat=10′) và ($post->ID, “Feature”, true) được lập lại hai lần, và bạn khi bạn chỉnh một trong hai thì phải chỉnh cả code còn lại.

showposts=4 => Số bài viết sẽ hiển thị
cat=10 => Chuyên mục sẽ hiện bài viết
Feature => là Fields mà bạn điền trong phần Custom Fields trong bài viết .

Gợi ý : Hãy xem hình dưới

5 Tạo Slider Cho WordPress
Ảnh to : http://www.eblogviet.com/wp-content/uploads/2011/08/5.png

Feature trong đoạn code P1 và P2 có thể là hai Fields khác nhau bạn hay bạn có thể tùy chỉnh phù hợp với blog mình .

Còn riêng mình dùng 1 Fields là Feature vì mình dùng Timthumb để tùy chỉnh kích thước ảnh tự động nên sẽ đỡ tốt băng thông nếu chọn ảnh ở P1 quá lớn hay tăng kích thước ảnh ở như P2 do quá bé .

Mình không có thời gian để giải thích từng chi tiết tại sao chèn, và mình không có khiếu trong tạo video hướng dẫn nên các bạn thông cảm.

Hãy save lại và xem kết quả nhé !

Công việc dạo này bận rộn quá, không có nhiều ý tưởng mới nhưng vẫn còn những ấp sáng kiến chưa thành.
Cũng như yêu cầu từ bạn nguyenphuong.vn và mình cũng gửi đến các bạn đang bước chân vào wordpress.

About Thái Nguyên
Mình tên Thái Nguyên và là sáng lập viên No Face ,và mình hiện đang sinh sống tại một vùng quê thanh bình trên đất Long An Mình sống với phương châm chia sẽ tất cả những gì mình biết và câu danh ngôn luôn theo mình là "Điều ta biết không phải ai cũng biết" Nên mình rất tự tin vào những gì mình viết ..Mong được làm quen tất cả các bạn .

Visit my website →