Bạn đạng tự xây dựng website bằng WordPress và muốn làm slide từ bài viết nhưng chưa có giải pháp để làm, vậy hãy cùng Sơn Web tìm hiểu cách làm qua vài bước đơn giản sau nhé.
Tạo chức năng bài viết nổi bật với plugin NS Featured Posts
Bạn có thể tự xây dựng hiển thị bài viết nổi bật bằng cách tạo thêm meta key tuy nhiên để nhanh chóng thì bạn có thể sử dụng plugin NS Featured Posts được phát triển bởi Nilambar Sharma.Bạn truy cập Admin vào Plugin cài mới ->gõ NS Featured Posts cài đặt như plugin chọn cài đặt và kích hoạt:
Plugin sẽ có tính năng check để chọn các bài viết,trang,sản phẩm nổi bật
Hướng dẫn tạo slider bài viết với Flexslider trong theme WordPress
Flexslider là thư viện hỗ trợ tạo slide được phát triển bởi woothemes.Hỗ trợ bạn tạo slide chuyên nghiệp với dạng captions,video,carousel,video,bạn có thể xem thêm hướng dẫn và chức năng chi tiết tại: http://flexslider.woothemes.com/
Để sử dụng Flexslider trong WordPress bạn cần nhúng css và js thư viện vào theme hoặc plugin,
Bước 1: Tải Flexslider từ http://flexslider.woothemes.com/ và copy toàn bộ thư mục flexslider vào trong theme của bạn
Bước 2: Insert css và js flexlider thừ file functions.php của bạn ví dụ:
wp_enqueue_style('flexSlidecss', get_template_directory_uri() . '/js/flexSlide/css/flexslider.css', array(), '1.0', 'all' );
wp_enqueue_script('flexSlidejs', get_template_directory_uri() . '/js/flexSlide/js/jquery.flexslider.js', array('jquery'),'1.2');
Bước 3: Tạo slider với Flexslider từ trang hiển index.php
Bạn có thể sử dụng code mẫu sau:
<div class="flexslider">
<ul class="slides">
<?php
$args = array(
'post_type' =>'post',
'posts_per_page' =>3,
'post_status' =>'publish',
'meta_key' => '_is_ns_featured_post',
'meta_value' => 'yes'
"orderby" => "date",
"order" => "DESC"
);
$news22 = get_posts($args);
foreach ($news22 as $post) : setup_postdata($post);
?>
<li>
<?php
//the_post_thumbnail('full');
$imgL = get_field('anh_banner',get_the_ID());
?>
<?php if( $imgL ): ?>
<img src="<?php echo $imgL['url']; ?>" />
<?php endif; ?>
<p class="flex-caption"><a href="<?php the_permalink();?>"> <?php $title = get_the_title(); echo $title ;?> </a> </p>
</li>
<?php endforeach;?>
</ul>
</div><!--end flex slider-->
Giải thích code:code trên lấy 3 bài viết mới nhất,với field ảnh tên là anh_banner sử dụng plugin acf filed để tạo
Bước 4: Sử dụng js để tạo slider
jQuery(document).ready(function($) {
$('.flexslider').flexslider({
animation: "slide",
controlNav: false,
directionNav:false
});
});
Kết luận: Việc sử dụng Flexslder tạo slider khá đơn giản, bạn có thể làm tương tự tạo slider từ banner,hay bài viết có custom field bất kỳ.Nếu bạn cần chỉnh sửa web WordPress đơn giản có thể inbox Sơn Web nhé
