Tạo WordPress Theme – Content Slider

• January 11, 2010
• 31 comments

Ở phần trước tôi đã giới thiệu đến bạn cách tạo một Custom Page trong WordPress và cách kéo thông tin từ phần Back-end của WordPress để hiển thị lên trang đó. Trong phần này chúng ta sẽ xây dựng một Content Slider bằng cách sử dụng jQuery Plugin. Cái hay trong phần này là chúng ta không phải Hard code bất cứ thứ gì. Chúng ta sẽ sử dụng tính năng Image Attachment của WordPress để quản lý hình ảnh và nội dung cho Slider.

Hiện tại có rất nhiều Content Slider mà bạn có thể chọn để sử dụng. Mỗi loại có những điểm hay và dở khác nhau. Nhưng trong bài này tôi sử dụng LoopedSlider của Nathan Searles thỏa mãn những yêu cầu tôi đề ra. Tôi cần một Slider tự động slide hình và một ít nội dung, 2 nút di chuyển để có thể nhấp chuột, một phần hiển thị số cho người dùng chọn .v.v. Cái hay nhất của LoopedSlider theo tôi thấy là nó khắc phục được sự cố loop vòng tròn. Nhiều Slider khác khi chạy đến hình cuối, nếu bạn muốn quay lại hình đầu nó sẽ phải chạy từ từ qua những hình 5, 4, 3, 2 rồi mới đến hình 1. Nhưng LoopSlider có thể loop vòng tròn mà không cần bước này nên nhìn nó thân thiện hơn.

Cũng lưu ý các bạn ở đây là WordPress không quan tâm bạn sử dụng CSS gì, jQuery gì miễn là bạn biết cách áp dụng vào nó thì nó sẽ chạy được. Tất nhiên khi làm ra Plugin tác giả không làm cho tất cả các CMS hiện có mà chỉ làm ở mức chung nhất. Trong quá trình sử dụng bạn phải thông minh tìm cách áp dụng vào trường hợp của mình. Thay đổi cái này một chút, thêm cái kia một chút, tìm tòi thêm thông tin. Tóm lại bạn phải có một chút kiến thức nhất định để hiểu nguyên lý hoạt động của Plugin đó.

Thời lượng: 59:08

Download định dạng .avi chất lượng cao: MediaFire Part 1, MediaFire Part 2

Looped Slider jQuery Plugin Demo

Download Looped Slider

Đính chính: Trong phần tạo nút Previous tôi đặt lộn class cho nó là Prev nên nó không hoạt động được, để nút Previous hoạt động bạn phải đặt class=”previous”.