Như các Bạn cũng thấy ở phần đầu trang chủ vnkings.com có Slider các bài mới nhất, một số bạn đã inbox hỏi dùng plugin gì hay làm như thế nào, thực tế đây là 1 chức năng mình tự làm và được hỗ trợ bởi Owl Carousel chứ không dùng Plugin nào cả.
Tạo Slider WordPress chuyên nghiệp với Owl Carousel
Bài viết này sẽ giúp bạn tạo Slider WordPress chuyên nghiệp với Owl Carousel :
– Bạn vào trang OWL Carousel
Tạo Slider WordPress chuyên nghiệp với Owl Carousel
– Sau khi tải về bạn sẽ có 1 cấu trúc thư mục như thế này :
Tạo Slider WordPress chuyên nghiệp với Owl CarouselĐây là tất cả các file mà Owl Carousel hỗ trợ bạn tạo ra Slider, nhưng bạn không cần dùng hết chúng, bởi Owl Carousel để cả 2 dạng file đã tối ưu và dạng chưa tối ưu giúp bạn chỉnh sửa dễ hơn.
Các file cần có để làm 1 Slider :
owl.carousel.min.js
owl.carousel.css
Nếu bạn nào không muốn lọc file có thể dùng bộ Owl Carousel đã được mình tối ưu : Tải về
Sau đó upload các file này lên thư mục Theme bạn đang dùng.
Đầu tiên bạn thêm đoạn lấy CSS này vào file header.php
1
2
3
//đường dẫn tới file css : ví dụ file css nằm ở thư mục theme-vnkings/css/owl.carousel.css bạn có thể dùng đoạn này /css/owl.carousel.css" rel="stylesheet" type="text/css" />
– Bây giờ ở file index.php (trang chủ) các bạn tìm đến vị trí cần đặt Slider và thêm đoạn code này:
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
// Lấy 10 bài viết mới nhất
'post',
'post_status'=>'publish',
'orderby' => 'ID',
'order' => 'DESC',
'posts_per_page'=> 10));
?>
have_posts()) : $owl->the_post(); ?>
// lấy hình ảnh của bài viết mới nhất
// cấu hình 5 ảnh bài viết mới nhất trên 1 hàng dạng slider ngang.
Các bạn có thể thêm tùy chọn cho slider của mình bằng cách xem các cấu hình nâng cao ở trang này :http://owlgraphic.com/owlcarousel/
Sau đó bạn ra trang chủ F5 và xem thành quả của mình nhé
Tạo Slider WordPress chuyên nghiệp với Owl CarouselTrên đây là Slider mình đã làm bằng Owl Carousel, nếu có vấn đề gì thắc mắc hoặc cần hỗ trợ, bạn có thể liên hệ qua box comment bên dưới.
Chúc các bạn thành công!
0 nhận xét:
Đăng nhận xét