Tạo sticky widget trượt khi cuộn trang trên WordPress

Hello, xin chào bà con ! Hôm nay Hocban.vn chia sẻ đến bà con cách tạo sticky widget để nó trượt khi cuộn trang trên WordPress.

Sticky widget là gì nhỉ ?

Dành cho bạn nào chưa biết, sticky widget hay còn có tên khác widget trượt, nó là một cái widget thông thường, nhưng có thể ghim lại một vị trí (thường là sidebar) mà khi ta cuộn chuột xuống nó không bị mất đi cho đến khi cuộn chuột đến footer.

Để hình dung thì các bạn có thể xem ảnh minh họa sau nhé !



Hinh dung ve sticky widget - widget truot tren wordpress

Hình dung về sticky widget – widget trượt trên wordpress

Mình dùng sticky widget để ghim quảng cáo ở sidebar nhằm giúp thời gian hiển thị của nó lâu hơn. Và tất nhiên nó sẽ gây được chú ý của người dùng hơn.

Cách tạo sticky widget

Để tạo sticky widget các bạn có thể tải về plugin có tên là Q2W3 Fixed Widget, cách cài đặt và kích hoạt chắc mình không phải nói thêm đâu hén ! Chủ yếu là cách sử dụng thôi.

Sau khi cài đặt và kích hoạt xong bạn tùy chỉnh cái plugin Q2W3 Fixed Widget này một tí. Cách làm như sau:

  • Đầu tiên bạn vào Appearance chọn Fixed widget option để vào trang tùy chọn của plugin này.
  • Sau đó thiết lập các thông số giống như mình dưới đây, tùy vào sở thích hoặc cũng có thể tùy vào website mà bạn sẽ đặt các thông số phù hợp.
tuy chinh plugin Q2W3 Fixed Widget

Tùy chỉnh plugin Q2W3 Fixed Widget

Tiếp tục thiết lập như hình dưới đây, theo mình là cứ để yên như thế và không cần phải tùy chọn thêm gì nữa cả.

tuy chinh plugin Q2W3 Fixed Widget 02

Tùy chỉnh plugin Q2W3 Fixed Widget 02

Sau khi tùy chỉnh xong thì nhớ nhấn lưu lại nhé, bây giờ đến đoạn sử dụng. Các bạn vào tạo thử một cái text widget, viết vài ba chữ linh tinh gì đó. Ảnh dưới đây là mình đã soạn sẵn cái đoạn quảng cáo rồi.

Tao thu mot text widget

Tạo thử một text widget

Sau khi soạn nội dung bất kỳ cho nó xong bạn tick vào phần Fixed widget và nhấn lưu để hoàn tất việc tạo widget. Tiếp theo bạn ra ngoài để xem nó đã được ghim lại chưa nhé ! Nhớ là cái widget bạn tạo nên nằm dưới cùng của sidebar.

Bây giờ nếu widget nó trượt theo thì tốt rồi, nhưng nếu chưa hoạt động được thì mình có đề xuất dành cho bạn. Bạn nào có xài plugin Autoptimize thì thiết lập nó tương tự như hình dưới đây cho mình.

Thiet lap plugin Autoptimize khi sticky widget khong truot theo 01

Thiết lập plugin Autoptimize khi sticky widget không chịu trượt theo 01

Phần nén CSS không kích hoạt nhé các bạn, ở dưới cùng các bạn thiết lập tương tự như hình dưới đây.

Thiet lap plugin Autoptimize khi sticky widget khong truot theo 02

Thiết lập plugin Autoptimize khi sticky widget không chịu trượt theo 02

Oke, sau khi thiết lập xong như hình trên thì các bạn nhấn Save Changes and Empty Cache để lưu lại thiết lập.

Mình đề xuất anh em đang xài theme mà nó giao diện cầu kỳ quá thì chuyển về theme có giao diện đơn giản để cái khu thiết lập tùy chỉnh nó đơn giản, dễ nhìn và dễ hình dung .

Đấy, theo kinh nghiệm của mình thì các bạn cứ làm theo y chang như hướng dẫn. Lúc mình cài vào nó bị lỗi không trượt nên mới ngâm cứu ra cái này. Có lẽ là nó sẽ còn nhiều lỗi hơn nữa, còn phụ thuộc vào theme. Vậy nên nếu anh em nào làm không được thì có thể comment bên dưới vấn đề cụ thế hoặc thêm những mẹo khắc phục khác. Cảm ơn anh em !

Bài viết liên quan

Nếu bạn thấy bài viết này hữu ích thì có thể chia sẻ nó qua:

Bài viết bạn đang xem được viết bởi Tịnh Nguyễn, một thanh niên đến từ Gia Lai, lai rai hay đi comment dạo 😂

avatar
8 Comment threads
19 Thread replies
0 Followers
 
Most reacted comment
Hottest comment thread
9 Comment authors
Trần PhươngĐặng Quốc ThắngTuấnPhan HùngCao Hiếu Recent comment authors
Trần Phương <span class="wpdiscuz-comment-count">29 bình luận </span>

Có nghĩa là mình muốn tạo sticky widget mà không cần dùng plugin đó.

Trần Phương <span class="wpdiscuz-comment-count">29 bình luận </span>

Bạn có code để không phải dùng plugin không vậy bạn?

Tuấn <span class="wpdiscuz-comment-count">1 bình luận </span>
Tuấn 1 bình luận

ad ơi cho mình hỏi, mình kích hoạt ok rồi nhưng sau đó chân thanh sidebar nó lại chờm một ít xuống footer chân trang, vậy phải xử lý thế nào? Cảm ơn bạn!

Phan Hùng <span class="wpdiscuz-comment-count">24 bình luận </span>

Cái này thỉnh thoảng nó xung đột với một số plugin khó chịu lắm

Phan Hùng <span class="wpdiscuz-comment-count">24 bình luận </span>

Mà site nào cho head trượt cùng thì k sử dụng được

Đặng Quốc Thắng <span class="wpdiscuz-comment-count">13 bình luận </span>

Hầu hết các plugin nén css hoặc các plugin liên quan đến shortcode rất dễ xung đột

Cao Hiếu <span class="wpdiscuz-comment-count">29 bình luận </span>

dạo này chuyển qua chém gió trên fb rồi, ít chém gió trên blog bác :v

ThucLe Blog <span class="wpdiscuz-comment-count">37 bình luận </span>

Đã dùng lâu rồi nhưng trước bị google cấm. Bây giờ chắc không sao

PhướcĐt <span class="wpdiscuz-comment-count">32 bình luận </span>

Hiện tại mình cũng đang dùng kiểu này để đặt qc GA trên web mình. Nhưng sử dụng dạng qc kiểu này của GA thì phải có network bảo kê mới giám dùng.

Phước Đt <span class="wpdiscuz-comment-count">32 bình luận </span>

Có thấy bác đặt GA đâu?

Hữu Thuần <span class="wpdiscuz-comment-count">88 bình luận </span>

Bác phước chắc cũng kiếm nhiều lắm hín 😀

Phước Đt <span class="wpdiscuz-comment-count">32 bình luận </span>

Không có đâu. Cũng đủ ăn mì tôm thôi mấy bác à :V

Hữu Thuần <span class="wpdiscuz-comment-count">88 bình luận </span>

Cái này Plugin này cũng OK tuy nhiên không khuyến khích dùng cứ để tự nhiên đê 😀

Hữu Thuần <span class="wpdiscuz-comment-count">88 bình luận </span>

Có thể là do ác cảm với nó chăng vì dạo qua nhiều trang Web cũng có mấy ai sử dụng chức năng này đâu 😀