Cách tạo Widget trượt trong WordPress đơn giản

Hữu Thuần

Updated on:

Cách tạo Widget trượt trong WordPress đơn giản – Khi truy cập một số trang web, có thể bạn đã thấy một số thành phần trên trang, chẳng hạn hình ảnh quảng cáo, sẽ trượt theo khi bạn kéo trang xuống. Như vậy những nội dung hoặc quảng cáo sẽ luôn đeo bám độc giả, điều này giúp độc giả để ý hơn từ đó tăng tính tương tác hơn.

Chờ chút: Muốn Website an toàn dữ liệu, không bị mất dữ liệu thì không còn cách nào khác bạn hãy Backup thường xuyên nhé, nếu bạn làm biến Backup thì hãy sử dụng BackupBuddy tuy là có phí nhưng rất an toàn.

Tạo Widget trượt trong WordPress

Có rất nhiều cách để bạn có thể thực hiện tính năng này trên WordPress, bạn có thể tùy biến code, tuy nhiên nếu bạn không rành về code cũng không sao, với sự hỗ trợ của các thành phần mở rộng (plugin) sẽ giúp bạn mọi thứ kế cả việc tạo Widget trượt trong WordPress.

Đầu tiên bạn cần tải Plugin Q2W3 Fixed Widget for WordPress và cài đặt sau khi cài đặt xong hãy kích hoạt (xem bài viết hướng dẫn cài đặt Plugin WordPress với các phương pháp).

Cấu hình Sticky Widget

Để widget hiển thị được đẹp mắt, bạn cần chỉnh một vài thông số trong phần cài đặt plugin. Để cài đặt, bạn truy cập Appearance (giao diện) > chọn Fixed Widget Options với các thông số cụ thể như sau.

Tạo Widget trượt trong WordPress
  • Margin Top: khoảng cách với lề trên. Để mặc định là đẹp, nếu muốn bạn có thể thay đổi.
  • Margin Bottom: khoảng cách với lề dưới. Thông số này quy định xem widget sẽ dừng trượt tại vị trí nào, mình sẽ chọn dừng trước Footer (cái này thông thường bạn nên để từ 500 đến 600 px tùy theo độ cao Footer của bạn).
  • Refresh interval: nếu blog có nội dung động (tự động tải thêm nội dung khi kéo xuống, image lazy load,..) thì widget vẫn sẽ chạy theo, plugin sẽ tính toán lại thông số của widget trong khoảng thời gian tính bằng mili giây. Giá trị nên dùng là 250 đến 1500. Nếu trang không có nội dung động, bạn có thể để số 0.
  • Disable Width: Sử dụng tùy chọn này để tắt plugin trên thiết bị di động. Khi chiều rộng màn hình trình duyệt nhỏ hơn giá trị được chỉ định, plugin sẽ bị vô hiệu hóa.
  • Disable Height: Sử dụng tùy chọn này để tắt plugin trên thiết bị di động. Khi chiều cao màn hình trình duyệt nhỏ hơn giá trị được chỉ định, plugin sẽ bị vô hiệu hóa.

Okey! đó là những cấu hình cơ bản để bạn có thể tạo Widget trượt trong WordPress, ngoài ra bạn cần chú ý thêm tính năng ở dưới cùng đó là.

Custom HTML IDs (each one on a new line): Quy định các thành phần mà bạn muốn cho chúng trượt theo trang. Không chỉ các widget mà bất cứ thành phần nào trên trang bạn cũng có thể áp dụng. Chỉ cần điền ID của chúng vào ô bên dưới. Ví dụ mình có thành phần menu như thế này <div id="site-topics"> và muốn cho nó trượt thì mình sẽ điền vào ô là site-topics. Bạn nhớ nhập mỗi ID trên một dòng.

Các thông số khác: theo mình nghĩ bạn có thể để mặc định mà không cần thay đổi gì cả.

Sử dụng Sticky Widget như thế nào ?

Khi bạn truy cập vào khu vực Widget và tiến hành thêm một Widget mới bạn sẽ thấy thêm tùy chọn Fixed widget. Muốn widget nào chạy theo bạn chỉ việc chọn Fixed widget là được.

co dinh widget wordpress

Vậy là đã xong, bạn đã tạo widget cố định cho Blog của mình một cách đơn giản phải không nào?

Hãy đợi chút: Bạn muốn giữ bản quyền hình ảnh trên trang Web của mình bằng cách đóng dấu hình ảnh bản quyền vậy hãy tham khảo cách tự động đóng dấu bản quyền vào ảnh WordPress hiệu quả nhất.

Kết luận

Đây là một Plgun rất nhẹ không ảnh hưởng đến tốc độ trang Web bạn nhiều bạn có thể cài đặt và sử dụng tính năng này, tuy nhiên trong quá trình sử dụng có rất nhiều nguyên nhân dẫn đến việc plugin không hoạt động như: lỗi Javascript trên trang; xung đột với các plugin và tập lệnh khác; không tương thích CSS.

Đánh giá và chia sẻ để nâng cao chất lượng bài viết?

Tỉ lệ 4.6 / 5. Phiếu: 24

Chia sẻ:

BÀI VIẾT LIÊN QUAN

BÀI VIẾT NÊN XEM

Xem thêm

4 bình luận về “Cách tạo Widget trượt trong WordPress đơn giản”

    • Bạn xem lại bố cục nhé với lại tùy theo giao diện hỗ trợ – Mình vào trang của bạn hình như bạn đang dùng Plugin sản phẩm vì thế bạn hãy xem lại phần cấu hình hiển thị. Nếu bạn up sản phẩm bạn nên tìm giao diện hỗ trợ tính năng này nhé có rất nhiều theme miễn phí đấy bạn!

      Bình luận

Viết một bình luận