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

[Thủ thuật WordPress] 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 mình muốn độc giả chú ý sẽ luôn đeo bám độc giả. Nếu bạn cũng làm điều tương tự như vậy cho blog của mình. Mình sẽ hướng dẫn các bạn thực hiện bằng plugin Q2W3 Fixed Widget (Sticky Widget) gọn nhẹ. Không cần phải biết đến những đoạn mã JavaScript phức tạp, bạn chỉ việc cài đặt plugin và thiết lập một chút là ngon lành cành đào.

Trong bài viết trước đây về thủ thuật WordPress mình có hướng dẫn các bạn cách mở liên kết ra trang mới đơn giản trong WordPress đơn giản nhất giúp bạn có thể tùy biến các liên kết ngoài bằng cách mở ra một trang mới (hay tab mới) tiếp tục trong bài viết này mình sẽ hướng dẫn các bạn cách tạo Widget trượt trong WordPress đơn giản.

Wordpress tạo widget trược thật đơn giản

Tạo Widget trượt trong WordPress đơn giản

Đầu tiên bạn cần tải Plugin 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). Lúc này khi bạn truy cập vào Widget 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.

Cài đặt  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 > Fixed Widget Options.

Trong trang này sẽ có những mục sau

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.

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.

Screen Max Width: Quy định độ rộng màn hình mà plugin sẽ không hoạt động nữa, nghĩa là widget sẽ không trượt mà ở nguyên vị trí ban đầu. Sở dĩ có tùy chọn này là do nếu theme bạn dùng có hỗ trợ responsive thì bố cục trên trang sẽ thay đổi, và các thông số thiết lập ở trên có thể không còn chính xác nên widget sẽ hiển thị không chính xác.

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.

Use jQuery(window).load() hook: Sử dụng jQuery(window).load(), đánh dấu tùy chọn này nếu có xung đột JavaScript.

Enable plugin for logged in users only: Chỉ kích hoạt plugin đối với người dùng đăng nhập.

widget_display_callback hook priority: Độ ưu tiên của widget_display_callback. Cái này để thiết lập độ ưu tiên để nó được thực hiện trước các hàm trong WordPress, giống như xếp hàng mua vé ấy mà, được ưu tiên thì được mua trước.

Cách xác định giá trị cho plugin Sticky Widget

Bạn có thể dùng các công cụ khác nhau để xác định các giá trị cho cài đặt hoặc ước tính con số sao cho phù hợp với ý mình. Ở đây mình sẽ giúp các bạn xác định theo cách của mình.

Các công cụ cần thiết:

Trình duyệt Firefox mới nhất. Trong hướng dẫn này mình dùng Firefox 24.0

Cài đặt phần mở rộng Web Developer. Phiên bản của mình là 1.2.5.

Giờ mở trang web của bạn ra và bắt đầu thôi!

Trong hình trên bạn thấy “MarginTop” và “MarginBottom” như mình giải thích ở trên đấy. Để xác định giá trị cho “MarginBottom”, bạn hãy chọn Miscellaneous > Display Ruler của Web Developer ngay dưới thanh địa chỉ của Firefox.

Giờ bạn nhấn giữ chuột trái và kéo từ đầu Footer đến cuối Footer rồi ngừng nhấn chuột.

Bạn sẽ thấy độ dài của footer hiện trong khung Height của Web Developer Ruler. Đó là giá trị bạn sẽ điền vào “MarginBottom” trong phần cài đặt plugin.

Đối với Screen Max Width, bạn chọn Resize > Display Window Size In Title. Kích thước cửa sổ trình duyệt sẽ hiển thị trên thanh tiêu đề. Mình sẽ thu nhỏ trình duyệt đến khi nào thanh sidebar trượt xuống bên dưới phần nội dung.

Giờ nhìn kích thước của trình duyệt trên thanh tiêu đề. Ví dụ của mình là 771 x 629, mình sẽ điền số 771 vào Screen Max Width. Sau khi hoàn tất mọi thủ tục, công việc đã hoàn thành. Chúc các bạn thành công!

Cuối cùng không có gì hơn nếu bạn cảm thấy bài viết có ích hãy subscribe blog của mình thường xuyên để cập nhật những bài viết mới nhất qua Email – Chân thành cảm ơn!

Share

Thuần Te Tua

Chào các bạn mình tên thật là Nguyễn Hữu Thuần là một người nội tâm, thích sống khép kín tuy nhiên có nhiều lúc cũng rất tăng động, trang web huuthuan.net là nơi lưu giữ những kiến thức, kinh nghiệm cũng như góc cuộc sống của mình, nếu bạn thích tôi hãy tìm kiếm tôi trên kênh Youtube hoặc liên hệ với tôi tại đây.

You may also like...

4
bình luận. Để lại câu hỏi & nhận trả lời nhanh qua email.

avatar
2 Comment threads
2 Thread replies
0 Followers
 
Most reacted comment
Hottest comment thread
3 Comment authors
Chung CuNguyễn Hữu ThuầnMai Van Hieu Recent comment authors
newest oldest most voted
Chung Cu
Guest

Cám ơn Ad nhé, bài viết rất dễ hiểu

Mai Van Hieu
Guest

Ad ơi cho mình hỏi làm sao để mình có thể đưa sidebar lên song song với trang chính vả chỉnh sửa nó ngay ngắn như web của ad y :
ảnh hiện trạng web của mình :
http://prnt.sc/c3yqms
Mong muốn chỉnh sửa như của ad
http://prntscr.com/c3yqny.
Mình cảm ơn nhiều !