Tạo sticky widget trượt khi cuộn trang trên WordPress
Xin chào! Hôm nay mình chia sẻ với các bạn cách tạo tiện ích dính để nó trượt (ghim lại) khi cuộn trang trong WordPress.
Widget Sticky là gì?
Dành cho những bạn chưa biết, tiện ích dính aka Widget cố định hoặc tiện ích con trượt. Nó cũng là một widget thông thường, nhưng nó có thể ghim một vị trí (thường là thanh bên) mà khi chúng ta cuộn xuống, nó sẽ không biến mất cho đến khi chúng ta cuộn đến chân trang.
Để nắm bắt ý tưởng, bạn có thể xem qua hình ảnh minh họa sau đây!
Hình dung widget dính – widget trượt trên wordpress
Tôi sử dụng tiện ích cố định để ghim quảng cáo vào thanh bên để giúp thời gian hiển thị của nó lâu hơn. Và tất nhiên nó sẽ thu hút sự chú ý của người dùng hơn.
Cách tạo tiện ích dính
Để tạo một widget cố định, bạn có thể tải xuống một plugin có tên Tiện ích con cố định Q2W3, cách cài đặt và kích hoạt thì khỏi phải nói thêm! Chủ yếu chỉ là cách sử dụng nó.
Sau khi cài đặt và kích hoạt nó, bạn có thể tùy chỉnh plugin Tiện ích con cố định Q2W3 này một chút. Làm như thế nào:
- Đầu tiên bạn nhập Vẻ bề ngoài lựa chọn Tùy chọn widget cố định để vào trang tùy chọn của plugin này.
- Sau đó thiết lập các thông số như tôi bên dưới, tùy theo sở thích của bạn hoặc tùy theo trang web mà bạn sẽ cài đặt thông số phù hợp.
Tùy chỉnh plugin Tiện ích cố định Q2W3
Tiếp tục thiết lập như hình bên dưới, theo mình thì cứ để như vậy và không cần lựa chọn gì thêm.
Tùy chỉnh plugin Q2W3 Cố định Widget 02
Sau khi tùy chỉnh, bạn nhớ bấm lưu, giờ là lúc sử dụng. Bạn vào tạo một widget văn bản, viết một vài từ linh tinh hay gì đó. Ảnh dưới đây là quảng cáo tôi đã chuẩn bị.
Thử tạo một widget văn bản
Sau khi soạn bất kỳ nội dung nào cho nó, bạn đánh dấu vào Widget cố định và nhấn lưu để hoàn tất quá trình tạo tiện ích. Tiếp theo hãy ra ngoài để xem nó đã được ghim chưa! Ghi nhớ widget bạn tạo nằm ở dưới cùng của thanh bên.
Bây giờ nếu widget nó trượt theo thì không sao, nhưng nếu nó không hoạt động, tôi có một gợi ý cho bạn. Bạn có sử dụng một plugin? Tự động tối ưu hóa sau đó tự thiết lập nó tương tự như hình bên dưới.
Đặt plugin Tự động tối ưu hóa khi tiện ích cố định không trượt trước 01
Phần nén CSS chưa kích hoạt nhé các bạn, ở phía dưới các bạn thiết lập tương tự như hình bên dưới.
Đặt plugin Tự động tối ưu hóa khi tiện ích cố định không trượt qua 02
Ok, sau khi thiết lập xong như hình trên, bạn nhấn Lưu các thay đổi và làm trống bộ nhớ cache để lưu cài đặt.
Tôi đề nghị bạn đang sử dụng theme nhưng có giao diện rất cầu kỳ thì hãy chuyển sang theme có giao diện đơn giản để vùng cài đặt tùy chỉnh đơn giản, dễ nhìn, dễ hình dung.
Vâng, theo kinh nghiệm của tôi, bạn chỉ cần làm theo hướng dẫn chính xác. Khi tôi cài đặt nó, nó không trượt được, vì vậy tôi đã lưu cái này. Có thể nó sẽ có nhiều lỗi hơn, tùy thuộc vào chủ đề. Vì vậy, nếu không làm được, bạn có thể comment bên dưới vấn đề cụ thể hoặc thêm các mẹo khắc phục sự cố khác. Cảm ơn mọi người!
Bài viết liên quan
- Cách tạo widget trên WordPress
- Sửa lỗi font tiếng Việt trên widget văn bản
4/5 – (1 phiếu bầu)
Thông tin thêm
#Tạo #sticky #widget #trượt #khi #cuộn #trang #trên #WordPress
[rule_3_plain]
#Tạo #sticky #widget #trượt #khi #cuộn #trang #trên #WordPress
Hello, chào bạn ! Hôm nay mình chia sẻ đến bạn cách tạo sticky widget để nó trượt (ghim lại) khi cuộn trang trên WordPress.
MỤC LỤC NỘI DUNG1 Sticky widget là gì nhỉ ?2 Cách tạo sticky widget3 Bài viết liên quan
Sticky widget là gì nhỉ ?
Dành cho bạn nào chưa biết, sticky widget hay còn gọi là Fixed Widget hoặc widget trượt. Nó cũng là một cái widget thông thường thôi, 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é !
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.
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ả.
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.
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.
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.
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
Cách tạo widget trên WordPress
Khắc phục lỗi font tiếng Việt trên text widget
4/5 – (1 vote)
window.addEventListener(‘DOMContentLoaded’, function() {
jQuery(document).ready(function( $) {
$.post( ‘https://hocban.vn/wp-admin/admin-ajax.php’, {action: ‘mts_view_count’, id: ‘5572’});
});
});
#Tạo #sticky #widget #trượt #khi #cuộn #trang #trên #WordPress
[rule_2_plain]
#Tạo #sticky #widget #trượt #khi #cuộn #trang #trên #WordPress
[rule_2_plain]
#Tạo #sticky #widget #trượt #khi #cuộn #trang #trên #WordPress
[rule_3_plain]
#Tạo #sticky #widget #trượt #khi #cuộn #trang #trên #WordPress
Hello, chào bạn ! Hôm nay mình chia sẻ đến bạn cách tạo sticky widget để nó trượt (ghim lại) khi cuộn trang trên WordPress.
MỤC LỤC NỘI DUNG1 Sticky widget là gì nhỉ ?2 Cách tạo sticky widget3 Bài viết liên quan
Sticky widget là gì nhỉ ?
Dành cho bạn nào chưa biết, sticky widget hay còn gọi là Fixed Widget hoặc widget trượt. Nó cũng là một cái widget thông thường thôi, 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é !
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.
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ả.
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.
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.
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.
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
Cách tạo widget trên WordPress
Khắc phục lỗi font tiếng Việt trên text widget
4/5 – (1 vote)
window.addEventListener(‘DOMContentLoaded’, function() {
jQuery(document).ready(function( $) {
$.post( ‘https://hocban.vn/wp-admin/admin-ajax.php’, {action: ‘mts_view_count’, id: ‘5572’});
});
});
