Trên mạng đã có rất nhiều bài viết hướng dẫn tạo slider featured post cho wordpress rồi. Nhưng hôm nay mình sẽ hướng dẫn các bạn tạo một Featured Post ở trang chủ với một mức độ cao hơn bằng cách kết hợp nhiều yếu tố có sẵn và không có sẵn của WordPress để nâng cao độ tùy biến cho Featured Post.Trong bài viết này, chúng ta sẽ lợi dụng những ưu điểm của Widget như khả năng kéo thả, khả năng lưu trữ nội dung để tùy biến Featured theo ý mình và để tùy chỉnh thoải mái Featured Post ở Dashboar.
Trước tiên, để có thể làm việc dễ dàng hơn, mời các bạn quay lại bài viết Thiết kế giao diện WordPress. Có 2 phần bạn cần đọc đó là phần 9 và phần 10 có liên quan đến Widget. Đây là phần căn bản về cách tạo và thiết lập các widget mà chúng ta sẽ sử dụng để làm. Bạn muốn rõ hơn những dòng mã ngay dưới đây thì nên đọc kĩ.
Phụ mục
Một vài công việc bạn cần chuẩn bị
Bạn nên chuẩn bị một đoạn Javascript có tính năng tùy biến màu mè và chuyển động (animation) nhìn hấp dẫn một chút và thích hợp với các Featured Post. Bạn có thể dễ dàng tìm thấy những đoạn mã này ở vnwebmaster.com hoặc tại dynamicdriver.com. Bản thân WordPress hỗ trợ Jquery khá tốt nên mình thường có xu hướng sử dụng những plugin của jQuery để thực hiện. Trong bài viết này mình chọn plugin Cycle của jQuery để làm ví dụ. Sử dụng cái này để làm Featured Post không phải là một ý tồi đâu nhỉ :)
Việc tiếp theo bạn cần phải chuẩn bị là tạo một Category trong WordPress đặt tên gì tùy bạn. Mục này chúng ta sẽ giành lưu trữ những bài viết mà chúng ta sẽ đưa vào Featured. Và như vậy bạn muốn bài viết nào được hiện ở Featured thì chọn category đó. Như vậy sẽ tiện lợi hơn.
Tiếp theo, chúng ta biết rằng Featured Post thường kèm theo những hình ảnh mô tả. Do đó chúng ta phải thiết lập một chế độ ảnh tương ứng để có thể hiển thị ở Featured Post đẹp hơn. Bạn bổ sung đoạn code này vào functions.php nhé:
[php]
if ( function_exists( ‘add_theme_support’ ) ) {
add_theme_support( ‘post-thumbnails’ );
set_post_thumbnail_size( 600, 300 ); // default Post Thumbnail dimensions
}
[/php]
Đoạn mã trên sẽ giúp theme nhận dạng và tạo ra thumbnail có kích thường 600px-300px để phục vụ cho việc hiển thị Thumbnail ở Featured. Tùy theo nhu cầu của bạn bạn tự đưa vào con số của bạn để tạo đối tượng thumbnail nhé.
Tạo Widget Feature Post và xác lập vùng thể hiện
Chúng ta bắt tay thực hiện một cái Widget thôi.
1. Tạo Widget
Nếu bạn đã đọc phần 9 và phần 10 đã được tôi nói đến ở trên bạn sẽ không khó khăn gì nhận ra những đoạn mã sẽ được tôi cung cấp bên dưới:
[php] function nhanweb_featured_widget(){// Dang ky widget Featured cho Admin
register_sidebar( array(
‘name’ => __( ‘Featured Widget’, ‘nhanweb’ ),
‘id’ => ‘featured-widget-area’,
‘description’ => __( ‘Vị trí hiển thị Widget Featured Slider ở trang chủ’, ‘nhanweb’ ),
‘before_widget’ => ‘<li id="%1$s" class="widget-container %2$s">’,
‘after_widget’ => ‘</li>’,
‘before_title’ => ‘<h3 class="widget-title">’,
‘after_title’ => ‘</h3>’,
) );
}
add_action( ‘widgets_init’, ‘nhanweb_featured_widget’ );
/**
* Register widgetized areas, including two sidebars and widget-ready columns in the footer.
*
* To override nhanweb_widget() in a child theme, remove the action hook and add your own
* function tied to the init hook.
*
* @uses register_sidebar
*/
class nhanweb_featured_slider extends WP_Widget
{
function nhanweb_featured_slider(){
$widget_ops = array(‘description’ => ‘Hiện slider các bài viết tiêu biểu được lấy từ một category trên trang chủ’);
$control_ops = array();
parent::WP_Widget(false,$name=’Featured Slider’,$widget_ops,$control_ops);
}
/*Creates the form for the widget in the back-end. */
function form($instance){
//Defaults
$instance = wp_parse_args( (array) $instance, array(‘title’=>”, ‘featured_category’=>1, ‘number’=>5) );
$title = htmlspecialchars($instance[‘title’]);
$featured_category = intval($instance[‘featured_category’]);
$_number = intval($instance[‘number’]);
# Title
echo ‘<p><label for="’ . $this->get_field_id(‘title’) . ‘">’ . ‘Tiêu đề:’ . ‘</label><input class="widefat" id="’ . $this->get_field_id(‘title’) . ‘" name="’ . $this->get_field_name(‘title’) . ‘" type="text" value="’ . $title . ‘" /></p>’;
# category
echo ‘<p><label for="’ . $this->get_field_id(‘featured_category’) . ‘">’ . ‘Danh mục:’ . ‘</label>’;
$cat_lists = get_categories("hide_empty=0&orderBy=name");
echo "<select name=\"".$this->get_field_name(‘featured_category’)."\" id=\"".$this->get_field_name(‘featured_category’)."\">";
foreach($cat_lists as $cat_list){
?>
<option value="<?php echo $cat_list->term_id; ?>"<?php if($cat_list->term_id == $featured_category) { ?> selected="selected"<?php } ?>><?php echo $cat_list->name; ?></option>
<?php
}
echo ‘</select></p>’;
# Number
echo ‘<p><label for="’ . $this->get_field_id(‘number’) . ‘">’ . ‘Số tin:’ . ‘</label><input class="widefat" id="’ . $this->get_field_id(‘number’) . ‘" name="’ . $this->get_field_name(‘number’) . ‘" type="text" value="’ . $_number . ‘" /></p>’;
}
/*Saves the settings. */
function update($new_instance, $old_instance){
$instance = $old_instance;
print_r($new_instance);
//exit();
$instance[‘title’] = stripslashes($new_instance[‘title’]);
$instance[‘featured_category’] = intval($new_instance[‘featured_category’]);
$instance[‘number’] = intval($new_instance[‘number’]);
return $instance;
}
/* Displays the Widget in the front-end */
function widget($args, $instance){
?>
<script language="javascript">
jQuery(document).ready(function() {
jQuery(‘#slider-item’).cycle({
fx: ‘shuffle’,
speed: 300,
timeout: 3000,
delay: -4000
});
});
</script>
<?php
extract($args);
$title = apply_filters(‘widget_title’, empty($instance[‘title’]) ? ” : $instance[‘title’]);
$featured_category = empty($instance[‘featured_category’]) ? 1 : $instance[‘featured_category’];
$number = empty($instance[‘number’]) ? 5 : $instance[‘number’];
echo $before_widget;
if ( $title )
echo $before_title . $title . $after_title;
?>
<div id="content-slider">
<div class="wrap">
<ul id="slider-item">
<?php
$featuredPost = new WP_Query();
$featuredPost->query("showposts=".$number."&cat=".$featured_category);
while($featuredPost->have_posts()) : $featuredPost->the_post();?>
<li>
<a class="slider-image" href="<?php the_permalink(); ?>"><?php the_post_thumbnail(); ?></a>
<div class="slider-detail">
<div class="slider-detail-wrap">
<h3><a href="<?php the_permalink(); ?>" title="<?php the_title_attribute();?>"><?php the_title(); ?></a></h3>
<p><?php the_excerpt(); ?><a href="<?php the_permalink(); ?>" class="more-link"> </a></p>
</div>
</div>
</li>
<?php endwhile; ?>
</ul>
</div>
</div>
<?
echo $after_widget;
}
}// end Widget_name class
function registernhanweb_featured() {
register_widget(‘nhanweb_featured_slider’);
}
add_action(‘widgets_init’, ‘registernhanweb_featured’);
Tạo thời function widget() mà bạn thấy tôi ghi chú là để hiển thị ra ngoài front-end bạn không cần phải quan tâm, tôi sẽ giải thích sau. Trước mắt chúng ta nhìn vào tác dụng của Widget đã.
Đoạn mã này làm nhiệm vụ gì ?
Nó sẽ tạo ra một Widget để bạn có thể quản lý trong Dashboar của mình. Trong Widget này bạn có thể thiết lập những thông số như tiêu đề, danh mục, số lượng tin tiêu điểm (Featured Post). Nhờ đó chúng ta có thể tùy biến được nội dung hiển thị ra bên ngoài. Để tránh mất thời gian, bạn nào chưa hiểu rõ thì một lần nữa đề nghị đọc lại phần 9 và phần 10 của chuỗi bài viết Thiết kế giao diện WordPress nhé.
Cách sử dụng Widget như thế nào chắc tôi không phải nói lại nữa. Thôi thì dùng mấy cái hình để giải thích cho dễ.
Featured Widget và vị trí của nó
Nội dung Featured Widget
Giờ tôi sẽ giải thích về function widget() mà đoạn trên tôi bảo các bạn đừng quan tâm. Đây là đoạn mã dùng để hiển thị cái Widget ra bên ngoài nội dung. Nghĩa là cái widget của các bạn hình thù thế nào là do cái này quyết định. Tôi yêu cái cách trình bày Featured Post của NhanWeb nên tạm thời tôi copy nguyên phần HTML để xây dựng ra cái Featured Post của NhanWeb vào bài viết này và tiến hành viết lại tí code để được những đoạn mã trên. Đồng thời, tôi bổ sung jQuery và plugin Cycle của jQuery để tạo ra hiệu ứng thay đổi nội dung.
[code lang=”js”] <script language="javascript">jQuery(document).ready(function() {
jQuery(‘#slider-item’).cycle({
fx: ‘shuffle’,
speed: 300,
timeout: 3000,
delay: -4000
});
});
</script>
[/code]
Bạn nhớ dùng tôi, tôi thường chúng ta dùng dấu $ để gọi 1 lệnh của jQuery, nhưng với WordPress chúng ta dùng hàm jQuery() thay cho cái dấu đó nhá ! Nếu không nó không hiểu đâu. Lúc đó trong Firebug bạn sẽ thấy lỗi sau:
Lỗi jQuery trong WordPress
2. Xác lập vị trí hiển thị Widget
Bạn mở file index.php trong theme và bổ sung đoạn mã sau vào vị trí nào bạn muốn hiển thị Featured Post:
[php] <?php// A second sidebar for widgets, just because.
if ( is_active_sidebar( ‘featured-widget-area’ ) ) : ?>
<div id="featured_widget_area" class="widget-area" >
<ul class="featured_widget">
<?php dynamic_sidebar(‘featured-widget-area’ ); ?>
</ul>
</div>
<?php endif; ?>
[/php]
Cái này là đoạn mã thiết lập vị trí cho widget featured-widget-area mình sẽ không nói nữa. Việc sử dụng Widget để thể hiện feature post mang lại lợi ích khác là ngoài Featured mà chúng ta đang thực hiện ra bạn có thể lợi dụng Widget được setup cho vị trí này để đặt banner quảng cáo (thông qua Widget text(HTML)) cũng rất tiện.
3. Bổ sung các thành phần còn thiếu
Tôi đã nói đến jQuery, nhưng tôi chưa biết theme của bạn đã include sẵn jQuery vào hay chưa. Nếu theme chưa có jQuery thì chúng ta bổ sung đoạn mã sau vào functions.php nhé:
[php] wp_enqueue_script(‘jquery’,"http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js");[/php]
Tiếp theo bạn bổ sung plugin Cycle cho Jquery. Bạn download theo link sau của tôi để lấy bản rút gọn cho nhẹ: download jQuery Cycle(click chuột phải chọn Save link as nhé !). Sau khi download về bạn chép vào thư mục /js/ nằm trong thư mục theme của bạn cho tôi. Sau đó chúng ta bổ sung đoạn mã sau để gọi cái Cycle từ trong thư mục theme:
[php]
wp_enqueue_script(‘jqueryCycle’, get_bloginfo(‘template_directory’)."/js/jquery.cycle.all.js");
[/php]
Cuối cùng, để cái Feature Post được đẹp đẽ hơn chúng ta tiến hành “mông má” cho cái Stylesheet của nó tí:
[css] /***** Featured *****/.featured_widget_area, featured_widget{
margin:0;
padding:0;
}
.featured_widget li {
list-style:none;
}
/***** Slider *****/
#content-slider { clear: both; margin: 0 auto; padding: 0; }
#content-slider .wrap { background: #000000; position: relative; display: block; width: 100%; height: 300px; margin: 0 auto 20px auto; padding: 0; }
#content-slider #slider-item { position: relative; display: block; list-style: none; margin: 0; padding: 0; width: 100%; height: 100%; overflow: hidden; border: none; z-index: 1; }
#slider-item li { list-style: none; margin: 0; padding: 0; width: 100%; height: 100%; overflow: hidden; border: none; position: relative; display: block; }
#slider-item li a.slider-image { display: table-cell; text-align: center; vertical-align: middle;}
#slider-item li a.slider-image img { border: solid 1px #66f; vertical-align: middle; border: none; outline: none; margin: 0 auto; }
#slider-item li .slider-detail { width: 100%; background: #111111; position: absolute; bottom: 0; left: 0; margin: 0; padding: 0; color: #FFFFFF; }
#slider-item li .slider-detail .slider-detail-wrap { padding: 10px 10px 0 10px; }
#slider-item li .slider-detail h3 { font-size: 150%; font-weight: normal; color: #FFFFFF; margin-bottom: 10px; }
#slider-item li .slider-detail h3 a { color: #FFFFFF; }
#content-slider .wrap a.slider-prev { position: absolute; top: 45%; left: 10px; z-index: 2; text-indent: -9999px; cursor: pointer; display: block; width: 50px; height: 50px; background: transparent url(images/prev.png) no-repeat; }
#content-slider .wrap a.slider-next { position: absolute; top: 47%; right: 10px; z-index: 2; text-indent: -9999px; cursor: pointer; display: block; width: 50px; height: 50px; background: transparent url(images/next.png) no-repeat; }
#content-slider .wrap a.slider-prev:hover, #content-slider .wrap a.slider-next:hover {text-decoration: none; }
[/css]
Kết quả của tôi:
Kết quả cuối cùng của quá trình tạo Featured Post
Thông tin hữu ích !
– Trong bài viết này tôi sử dụng hiệu ứng shuffle cho Featured, bạn có thể lựa chọn các hiệu ứng khác từ kho hiệu ứng của nó và sẽ dễ dàng setup được để có các hiệu ứng chuyển ảnh, chuyển nội dung đẹp.
– Như tôi đã nói ở trên, tính tiện dụng của Widget Featured mà chúng ta vừa thực hiện đó là giảm thiểu khả năng tương tác với các đoạn mã mỗi khi cần chỉnh sửa hoặc thay đổi nội dung. Bạn có thể lợi dụng tính năng của widget để làm chuyện đó. Cũng như khi bạn không thích sử dụng widget Featured nữa bạn chỉ việc kéo nó ra từ Dashboar là xong mà không cần lo nghĩ đến việc lập trình và làm thế nào để gỡ code? Phải gỡ những đoạn code nào (nhiều lúc bạn quên)…
– Tiện ích tiếp theo nữa đó là bạn có thể lợi dụng vị trí hiển thị Widget có sẵn này để hiển thị thêm các banner quảng cáo ngay bên dưới hoặc bên trên của Featured Post cũng rất hay.
Chúc các bạn thành công.