• 4844 fans
  • 1036 reader
  • 122 followers

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

  • long

    Phần này lúc mình làm với hình nhỏ hơn thì bị khỏang trắng ở giữa 2 slide hình, bấm next 1 lần không tới hình kế, phải bấm lần 2 mới tới hình kế, ai bít fix chỉ vớiiiiiiiiiiii

  • vothanhbac

    Link Download Looped Slider bị die rồi , anh DW up lại giúp em nhé , thanks anh nhiều!

    • http://facebook.com/loxuanthanh Thành

      Search google đi bạn ^^

  • blueangel

    A DW ah,e làm theo a nhưng cái nút previous nó k work,và khi e sửa lại trong file imageSlider.php cái đoạn Previous thành
    Previous thì nó mới chạy.A xem lại đoạn đó nhé.Chúc a thành công.

    • blueangel

      Post k theo ý muốn rùi,cái đoạn class=pre thành class=previous.

  • tuan

    $(function(){$(“#imagesslider”).loopedSlider({
    autoStart: 3500,restart: 5000});
    });

    thế này đúng không nhỉ sao mình ko chạy đc

    • anhtuan215

      .loopedSlider
      cái này lấy chỗ nào vậy.có phải tên của file js.mình thấy có mấy cái ví dụ họ làm tên ko lấy giống với file js mà vẫn chạy bt mà sao mình sao chạy đc js là sao thế help me

  • http://www.freshbrand.vn Bùi Văn Lợi

    Anh DW ơi!trong phần này anh chưa chỉnh class clearfix nên .homeInfo bị lỗi rồi,anh kiểm tra lại giùm nha.Thanhks!

    • http://www.freshbrand.vn Bùi Văn Lợi

      Hix!chảng có ai trao đổi dể học hỏi,đành tự tìm lổi vậy,nếu ai bị loi như minh thi nhớ class: .clearfix{ float: left; } nha!
      Còn mot cai nhỏ nữa mình chưa sữa dc trong phan nay là minh làm nhu huong dan cua anh DW rui ma phan hinh anh no cu hien ra het lun, sua mai ma k dc,rat mong duoc giup do.
      Anh DW thi k thay dau?:(

      • phong711

        Bạn them cai nay vao .container{ overflow:hidden} hinh se ko xuat hien tum lum nua.
        Chuc ban vui.

        Cho P hoi cai phan js. Sao no ko chay duoc.

        $(function() {
        $(“#imageSlider”).loopedSlider({
        auto:500,
        speed:100
        });
        });

  • http://impressivetravelvietnam.com thanh phong

    Hay quá. Hôm nay ngồi tìm slider. Tìm thấy tut này. Thank demon nhìu

    • Bùi Huy

      Bạn sửa lại như này nha.

      $(function(){
      $(‘#imageSlider’).loopedSlider({
      autoStart: 3500,
      restart: 5000,
      });
      });

  • huuducvt

    Anh có thể chỉ cho em cách nào để cho slideshow áp dụng cho tất cả các trang không chứ add hình vào từng trang trong back end thì lâu quá, cảm ơn anh trước nha

  • Bạch Tuộc

    Mỗi lần xem tutorial của anh là cười vỡ ruột ra =))…
    Cảm ơn anh nhiều lắm!…

  • li_minh

    cảm ơn anh DW rất nhiều ! E đã học được rất nhiều từ các video của anh,
    Chúc A luôn thành công trong công viêc và izweb ngày thật lớn mạnh để cho các bạn yêu thích web có thể học hỏi.

    • kaitoholme

      trong các giáo viên ở izwebz tui thích nhất lão này ! :”> chúc anh thành công

  • http://thietkewebabc.com Trịnh Quốc Tuấn

    bác admin lại coi số 4 là may mắn, ở việt nam quan niệm số 4 là số tử =)). Cảm ơn vì tut rất vui này. Ước gì thầy giáo củ chuối của mình nói hay như bạn nhỉ.

  • http://scommax.com SComMax

    Em muốn hỏi sao em làm theo cách của anh không được nhỉ. Em muốn xin địa chỉ email của anh được không?

  • fully

    Như này thì chỉ được ở trang Home hoặc trang static nào mình muốn thôi hả anh, em muốn nó ở luôn trong trang index thì làm cách nào ạ

    • Bùi Huy

      Bạn vào phần cài đặt >> Đọc >> Tùy chọn hiển thị bạn chọn trang tĩnh là Home.

  • thanh

    Anh oi anh có thể cho cả link công cụ viết để bọn em tải dc ko .
    Tại tìm trên mạng toàn thiếu cài lên hay lỗi lắm
    ‘Cảm on anh !

  • http://tapchiseo.com/ tacmieu

    có plugin nào chạy sẳn cái slider feature content này ko nhỉ? mình đang cần 1 cái

  • tung1709

    Bài viết hay quá nhưng cái đoạn đính chính màu đỏ cho dễ nhìn anh ah . Hjhj
    EM không để ý đoạn đó nên cứ tưởng code sai .Huhu
    Thanks

  • mrpc

    hình ảnh thì em lấy ra được rồi,,nhưng nội dung trong page Home em không lấy ra được..không biết sai chỗ nào nữa

  • http://dattai.com dattai

    Slider này tự động lấy bài viết hả anh ?

    • linh linh

      có thể nội dung chính là phần descriotion???? mình cũng đang thắc mắc điều này? Anh DW nói là kéo phần p ra mà không nói phần p đó nằm ở đâu :D

      • Mr.DT

        a DW kéo trong phần p tức là phần content khi mà ban đầu bạn tạo page Home bạn có viết ở trong đó,,,,chịu khó để ý là ra thui mà.

  • Thành

    hay lắm bác DW ah` bác có thể dạy thêm về cách kết nối CSDL ko mình đang định làm 1 cái web bán hàng mà ko biết kết nối. Thank bác nhiều nhiều

    • huyhieu

      Ông này lười quá đi. cái gì cũng anh DW. nếu bạn chịu khó tìm 1 chút thì sẽ ra ngay: lên google search: code kết nối csdl thì ra 1 đống

  • Tung

    Thank you ban

  • http://thitruonggiaca.tk friday

    @Tung: bạn có thể phóng to để xem được mà, hoặc bạn có thểm dùng phần mềm vlc media player , mình đang dùng phần mềm để xem, cũng có thể xem bằng windowmedia nhưng mình cảm thấy hiện giờ vẫn thích dùng vlc media player ,

  • Tung

    Video rất hay
    Nhưng anh ơi sao không quay gàn vào vói .Khó nhìn quá .hjhj

  • http://forum.livesupport.vn Nguyen Ngoc Long

    Bài viết này quá hay. Video thật tuyệt vời. Nếu có nhiều nữa thì càng tốt

  • http://abc.com slider

    Mọi người cho em hỏi trong wordpress . Em có categories rồi , nhưng không muốn hiển thị cả thì có query nó hiện ra 1 parent categories đc không ạ ? WP khác blogger ở chỗ blogger có thể cho hiển thị label hoặc hide :(

    • http://hollandfc.net arjen

      bạn có thể dùng option exclude cho hàm list category của wordpress

  • Trung Hieu

    Hahaha dạo này bác làm TUT lẹ ghê. mà bác DW bữa nào chỉ tụi em làm cái form bình chọn nữa đi hihi

    • http://koco dao van kien

      toi rat thich trang website nay .cam on nguoi lam web nat nhe

  • http://babo.cz.cc uamnaruto

    hehe … hay quá … em đang có việc phải làm cái này …:D thank anh nhiều nhiều

  • kaylaximuoi

    Mấy links download sao anh kg set target = “_blank” để mở another window áh.. như vậy sẽ kg phải quay về nhìu lần như trg trường hợp download Slider jQuery plugin ở trên nè…hihi…

    • Bùi Huy

      Bạn có thể giữ Ctrl + Left Click là nó cũng ra tab mới hoặc trang mới mà. Hoặc Mouse3.

  • duocvang9999

    Mất gần hai ngày để download tất cả series WordPress này. (Chắc bác DW sẽ ra tiếp TUT mới, hi vọng là ko lâu :D ) chúc bác luôn khỏe, thanks!

  • học hỏi

    hic
    lại ra TUT chóng cả mặt ko biết bác ăn gì mà hồi xuân nhanh thế
    chúc bác luôn khỏe ra TUT nhiều nhiều

Izwebz store
Izwebz store

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