• fans
  • 1036 reader
  • followers
Tạo WordPress Theme – Content Slider
  • Tutorial Details
  • Độ khó: Trung bình
  • Thời gian: 1 Giờ
  • File size: < 300mb
  • Yêu cầu: PHP Căn bản
Có 12 bài viết trong series WordPress ThemeHiển thị

Ở 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”.

Demon Warlock Website facebook twitter user_email

Tôi được sinh ra ở Việt Nam, nhưng hiện tại đang sống và làm việc tại Mỹ. Ngành tôi học không có liên quan gì đến thiết kế web. Nhưng đây là sở thích từ ngày còn là sinh viên du học, do vậy bây giờ dù cho đang đi làm nhưng tôi vẫn thích dùng thời gian rảnh rỗi của mình để học về thiết kế web. Như các bạn, tôi cũng việc mày mò tự học và khám phá.

  • vicent

    Em làm themes như của anh đây nhưng tại sao plugins slider ko chay duoc .em thu tat ca plugin slider anh,youtube,vimeo… nhu plugin promotion, plugin soliloquy,plugin slidedeck

  • thế anh

    cái dòng line thì chỗ tag a thêm dòng: outline: none; là sẽ ko còn nữa nha ad

  • Quốc Minh

    cho xin file js. link download bị die rồi

  • Đạt Lê

    Khi mình làm xong thì images trên slider có link đến chính ảnh đấy. Mình muốn hỏi cách nào làm cho biến mất link đấy, đã đặt trong code là : wp_get_attachment_link($attachment->ID, ‘full’,false) rồi nhé. Ai biết làm ơn chỉ dùm

Newbie

Các series nên xem trên izwebz cho newbie

Khi vào izwebz chắc nhiều bạn cho rằng các bài viết trên izwebz đều không có hệ thống gì cả? Thực chất, các bài biết đều đi theo một series của riêng nó, ví dụ như PHP, HTML & CSS, PSD2HTML, Photoshop, illustrator,… Trong bài viết này, mình sẽ tổng hợp lại các series bài viết cần thiết cho một newbie.

Izwebz facebook group

Social connect

Recent Comments

Archives