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.
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 (hoặc widget cố định/ widget gim lại) 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é !
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 !
Web bạn đơn giản, gọn nhẹ mà tinh tế thật. Rất thích kiểu trình bày như vậy
Bác quá khen ạ, site em hiện tại có treo đỡ con GÀ nên cũng chưa được ổn lắm. Site bác trình bày mới gọi là đẹp nhé !
Đang tìm cách cố định widget ko dùng plugin mà có vè căng quá 🙁
Dùng plugin đi bác, nó cũng nhẹ à ! Gà đặt trên site chia sẻ về web ít có click quảng cáo lắm bác. Em nhốt gà 2 năm nay, mới thả nó ra tầm 2 tháng nay đó bác.
thì đó. cơ mà gian nang quá. với e nghĩ tụi mình share là chủ yếu. chứ Mấy con gà ko nhằm gì, ai thương thì thương 🙁
Plugin thấy nặng nề quá lun á. cái này code vẫn đươc. nhưng nó ko theo độ trê độ dày (nghĩa là cuộn xuốn nó ko đúng vị trí hay cuôn lên cũng vậy. E đang dùng pluin mà thấy thừa kiểu gì á 🙁
Vậy thì tạo cho nó một class và css lại cho nó xem sao bác, ngày xưa lúc mới làm web em cũng cài plugin cho lẹ chứ em cũng không biết HTML CSS gì, giờ thì có thể nghịch chút đỉnh rồi :v
Mình cũng nuôi con mà nó không mập nên làm thịt mất cho đỡ nặng :D.
Phá riết rồi giờ cũng chẳng biết xài theme gì lun. Giờ thích dùng theme đơn giản chứ ko thích mau mè mà nghe lười quá
Gà cho dân web phải là loại siêu to khổng lồ mới được bác ạ, còn không là hướng ngoại chứ trong nước người xem không click đâu. Web em quảng cáo nhiều vậy mà không giám click, toàn qua web mấy anh em xem ké. Vì quảng cáo hiện bên nào cũng như nhau mà tự nhấn xem bên này thì bị phạt 🙁
Có nghĩa là mình muốn tạo sticky widget mà không cần dùng plugin đó.
Cái này em chưa thử nữa bác, với lại e thấy nó cũng nhẹ và dễ sử dụng thì nên cài plugin nếu là dân không chuyên.
Bạn có code để không phải dùng plugin không vậy bạn?
Ý bác là sao nhỉ ?
Ý bác đó giống tui á. Là có cách nào để cố định mà ko dùng đến plugin
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!
Bạn vào: Appearance -> Fixed Widget Options >> Stop ID: bạn chèn vào ID là footer của theme bạn đang xài. Thử thử xem, do mình ko gặp lỗi này nên chưa làm lần nào.
Cái này thỉnh thoảng nó xung đột với một số plugin khó chịu lắm
Hiện Hiện tại Hocban.vn không xài một plugin nén CSS hay JavaScript nào để cho mọi thứ tự nhiên, kể cả cache. Dường như không thấy lỗi lầm gì luôn :v
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
Ò ò, cái vụ xung đột plugin mình cũng chưa kiểm nghiệm qua. Chỉ thấy là vụ thằng Autoptimize là nó dính đòn, nếu chọn nén CSS là nó không có trượt. Head trượt cùng là cái thanh menu ở header đó à Phan Hùng ?
Mà site nào cho head trượt cùng thì k sử dụng được
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
Haha, giống mình y chang ! Dạo này mình toàn chém gió trên Facebook thôi :v
Đã dùng lâu rồi nhưng trước bị google cấm. Bây giờ chắc không sao
Hay hay, thông tin hữu ích nè ! Học Bạn mà nhiều lượt truy cập như yeualo.com thì mới được chứ nhỉ. Hay nó có điều kiện/tiêu chí gì để tham gia network đó ko ? Chơi cái đó thì chắc chắn nhiều tiền hơn rồi đó !
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.
Em cũng có nghe nói là không được dùng nó cho quảng cáo Adsense. Em thấy cũng không ảnh hưởng đến trải nghiệm người dùng lắm, thấy Facebook dùng sticky, beat.vn cũng xài và có lẽ nhiều site khác. Và đây là những site lớn có đầu tư về trải nghiệm người dùng.
Dù vậy nếu bác có quy định mới về cái này, có thể chia sẻ liên kết ở đây nhé !
Có thấy bác đặt GA đâu?
Bác nào cũng đủ thuê host với ăn mì tôm không thế kia :v
Không có đâu. Cũng đủ ăn mì tôm thôi mấy bác à :V
Bác Phước nay chuyển qua bên điện ảnh với người mẫu rồi bác Thuần. GÀ thì thu nhập cao lắm nhưng là cái phụ thôi, em đoán thế ! :v
Bác phước chắc cũng kiếm nhiều lắm hín 😀
Cất để dành đặt site khác bác nạ, site này ít cờ líc quá :v
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ề hề, nát thật chứ bộ, chắc là do các site bác dòm thấy đặt quảng cáo quá đà ấy mà :v
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 😀
Theo bác vì sao không nên dùng mà nên để tự nhiên ? :v Tức là nó ưu điểm hoặc hạn chế gì ?