Hướng dẫn sử dụng Fixed Widget để tạo Widget trượt

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. Lấy mẫu ngay tại InfoBlogTech, khi đang xem bài viết này và kéo trang xuống thì sẽ thấy thanh chia sẻ ở bên trái chạy theo. 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.

Sau khi cài đặt và kích hoạt thành công plugin, trong khu vực quản lý của WordPress, dưới thẻ Appearance sẽ xuất hiện thêm mục Fixed Widget Options và mỗi widget sẽ có 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.

Fixed widget

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

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ị khuyê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 nhé.
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 đinh 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!

margin_top

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.

Display Ruler

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.

01-10-2013 8-32-48 CH

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.

01-10-2013 8-42-26 CH

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.

01-10-2013 8-43-42 CH

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!

Dương Triều Blog © 2016