Tạo Side Bar cố định hay còn gọi là sticky Sidebar Widget sẽ giúp bạn giữ đứng yên sidebar thanh bên phải hoặc bên trái khi người dùng cuộn chuột mà chiều dài bài viết lớn hơn tổng chiều dài thanh side bar thì lúc này 1 side bar sẽ được giữ nguyên cố định. Mục đích của việc này là khách truy cập trang website có thể chú ý vào banner của bạn hơn. Lưu ý rằng cố định side bar bên trái hay bên phải chỉ có ý nghĩa khi người dùng Laptop. Còn Mobile thì không có tác dụng lắm.

Trong bài viết này IMTA sẽ hướng dẫn bạn cách tạo sticky widget (fixed widget) cho website WordPress. Đây là một thủ thuật rất hay dành cho người dùng WordPress mà bạn nên tham khảo để cải thiện trải nghiệm người dùng trên website và nhiều lợi ích khác.

Sticky widget là gì ?

Hiểu một cách đơn giản, sticky widget là thuật ngữ dùng cho website WordPress khi chỉ về các tiện ích (widget) có khả năng ghim lại khi cuộn trang. Bạn có thể hình dung qua video ví dụ về loại widget này như bên dưới. Khi mình cuộn trang thì quảng cáo bên sidebar được ghim lại (giữ cố định).

Ví dụ về một poster quảng cáo được ghim lại khi cuộn trang

Nguyên tắc hoạt động của sticky widget

Widget sẽ được ghim lại (stick) trong suốt quá trình bạn cuộn trang, cho đến khi gặp một phần tử đã được thiết lập sẵn sẽ không còn ghim lại nữa. Và lúc đó, sticky widget cũng bị cuộn qua như widget thường.

Hầu hết mọi người thiết lập để widget ngưng ghim lại khi cuộn đến footer. Điều đó giúp nội dung trong sticky widget không bị hiển thị chồng lên footer. Bạn có thể hình dung qua video minh họa sau:

Tính năng sticky widget ngưng hoạt động khi người dùng cuộn đến phần footer của website

Ngoài ra, sticky chỉ được dùng để ghim các tiện ích cần thiết cho các thiết bị có màn hình lớn như: máy tính bảng (màn hình có độ rộng hơn 11 inch) và laptop, destop. Trên điện thoại hoặc các thiết bị có màn hình nhỏ thì tính năng này không khả dụng.

Vai trò của sticky widget trên website

Dù là website dùng WordPress hay nền tảng khác cũng vậy. Sticky widget chỉ là một tính năng rất nhỏ nhưng mang lại nhiều giá trị cho cả khách truy cập lẫn chủ web và các nhà quảng cáo. Dưới đây là một số lợi ích của loại widget này để bạn tham khảo.

Đối với chủ website và nhà quảng cáo

Với thời gian hiển thị nội dung lâu hơn khi người dùng cuộn trang, sticky widget giúp tạo sự chú ý cho người đọc trong suốt quá trình cuộn trang. Điều đó giúp những đề xuất về nội dung/ sản phẩm/ dịch vụ tiếp cận  tốt hơn đến người đọc. Điều này tốt hơn nhiều so với việc đặt những thông điệp quảng cáo trên một widget thường, khi cuộn trang nó trôi đi quá nhanh mà người dùng chưa kịp nhìn thấy.

Vì luôn được ghim lại trong suốt quá trình người dùng cuộn trang, nên phần không gian trống của trang web được lấp đầy và cân đối.

Nhờ các nội dung “tuyển chọn” được ghim lại giúp thời gian onsite của khách truy cập lâu hơn. Điều đó cũng góp một phần ảnh hưởng tích cực đến vấn đề SEO website.

Đối với người dùng

Tính năng sticky không chỉ dùng để ghim lại nội dung/ quảng cáo. Với các website thương mại điện tử, rao vặt,… Thì việc trang bị công cụ lọc, phân loại nội dung/ sản phẩm/ dịch vụ sẽ giảm bớt được thao tác cuộn trang cho người dùng.

Ví dụ về việc ghim lại tính năng lọc sản phẩm trên một website bán hàng

Đối với những website bán hàng mà sản phẩm có quá nhiều thuộc tính phân loại. Nếu cứ mỗi lần muốn lọc sản phẩm lại phải cuộn lên trên để chọn thuộc tính phân loại thì không được tiện lắm (Theme Flatsome đang hỗ trợ). Hơn nữa, với hàng chục thuộc tính phân loại hoặc nhiều hơn thì việc sắp xếp chúng chỉ theo chiều ngang của màn hình là không tối ưu về trải nghiệm người dùng.

Ngoài ra khi bạn website chạy quảng cáo Google Ads người ta cũng có thể ghim các form hoặc nút gọi điện ở thanh side bar cố định để người dùng dễ dàng nhấn vào hơn. Một số bạn dùng bài viết (post) bằng WordPress sẽ chọn phương án này để thuận tiện cho người dùng và tăng tỷ lệ chuyển đổi mà trong khóa học Google Ads mình cũng đã nhắc đến.

Hướng dẫn cách tạo sticky widget (fixed widget) cho website WordPress

Hiện nay, một số theme đã hỗ trợ sticky widget (fixed widget) để người dùng tiện sử dụng. Tuy nhiên, còn rất nhiều theme chưa hỗ trợ tính năng này. Và rất có thể theme bạn đang sử dụng không có hỗ trợ tính năng này. Do đó, nếu bạn muốn có sticky widget thì chỉ có 03 cách như sau:

  • Cài plugin hỗ trợ tính năng sticky widget, phương pháp này đơn giản, nhanh gọn và cũng dễ thực hiện.
  • Chuyển qua sử dụng theme có tích hợp sẵn sticky widget.
  • Code tính năng sticky widget cho theme đang dùng. Nếu không biết code thì bạn có thể thuê lập trình viên WordPress họ làm cho bạn. Một số anh em ngại vấn đề cài thêm plugin gây nặng web thì có thể chọn hướng đó.

Và trong khuôn khổ bài viết này, IMTA chỉ hướng dẫn bạn cách tạo sticky widget (fixed widget) bằng plugin. Vì phương pháp này đơn giản, dễ làm và hơn nữa, plugin này hoàn toàn miễn phí trên kho WordPress.org – ai cũng có thể tải về dùng.

Nếu quý khách hàng dùng dịch vụ thiết kế website chuyên nghiệp tại IMTA bạn có thể yêu cầu những chức năng riêng biệt để bên mình lên phương án tư vấn và code tính năng fixed widget cho bạn nhé

Cài đặt và thiết lập plugin Q2W3 Fixed Widget

Plugin Q2W3 Fixed Widget có sẵn trên kho WordPress. org nên bạn tìm đúng tên đó để tải về, cài đặt và kích hoạt như mọi plugin khác nhé. Quan trọng là phải thiết lập đúng để tính năng sticky widget không phát sinh lỗi.

Dưới đây mình sẽ hướng dẫn bạn thiết lập và chú thích các tính năng của Q2W3 Fixed Widget. Bạn dựa vào đó để thiết lập cho phù hợp với website đang thực hiện.

Bonus: Hướng dẫn cài đặt Plugin trên website WordPress chi tiết

Bước 01: Trong trang quản trị của website, bạn nhấn chọn vào Appearance >> chọn tiếp vào Fixed Widget Options để mở phần thiết lập của plugin Q2W3 Fixed Widget lên.

Mở phần thiết lập của plugin Q2W3 Fixed Widget
Mở phần thiết lập của plugin Q2W3 Fixed Widget

Bước 02: Bạn thiết lập plugin Q2W3 Fixed Widget tương tự như hình bên dưới. Trong phần thiết lập của plugin này khá nhiều mục tùy chọn. Tuy nhiên, theo kinh nghiệm của mình thì chỉ cần thực hiện một số cái như mình đã làm mẫu trong hình là được. Mấy mục khác không cần quan tâm nhiều để không bị rối.

Thiết lập plugin Q2W3 Fixed Widget
Thiết lập plugin Q2W3 Fixed Widget
  • Margin Top: Là khoảng cách từ sticky widget đến thành phần phía trên, thường là một widget. Để nguyên giá trị mặc định là 10px hoặc thay đổi nếu bạn muốn;
  • Margin Bottom: Tương tự thì đây là khoảng cách từ sticky widget đến thành phần phía dưới nó.
  • Stop ID: Đây là ID của phần tử mà khi cuộn trang, sticky widget “chạm” phải thì tính năng ghim lại không có tác dụng (tức là bỏ ghim). Thông thường các nhà thiết kế theme hay đặt tên của ID này là “site-footer, footer hoặc footer-widgets ,.. Đây cũng là phần KHÓ NHẤT khi thiết lập Q2W3 Fixed Widget. Do đó, nếu bạn không xác định được ID cần chèn vào thì có thể đăng câu hỏi trên nhóm Tự Làm Website WordPress 101 để nhờ anh em nào đó hỗ trợ nhé !
  • Disable Width: Là độ rộng tối thiểu để tính năng sticky widget hoạt động. Nhưng trong hình mình có thiết lập độ rộng tối thiểu là 960px. Có nghĩa là, khi người dùng duyệt web trên màn hình có độ rộng dưới 960px thì sticky widget hoạt động như một widget thường.
  • Disable Height: Chiều cao tối thiểu, mục này bạn có thể để mặc định.
  • Compatibility: Mục này bạn chỉ quan tâm nếu website đang có dùng các plugin tối ưu hiệu suất website (các plugin cache). Nếu có dùng plugin cache thì bạn tick 02 mục như hình trên, còn nếu không dùng thì để trống tất cả các mục.

Bước 03: Nhấn Save Changes để lưu lại các thiết lập đã thực hiện. Lưu lý: nếu website có dùng plugin cache thì phải xóa cache mới thấy được kết quả bạn nhé.

Cách thêm sticky widget cho website WordPress bằng plugin Q2W3 Fixed Widget

Phần này khá đơn giản, bạn chỉ cần tạo một widget bình thường ở phần sidebar của website, sau đó tick chọn vào mục Fixed widget như hình bên dưới. Lưu ý là sticky widget phải nằm ở vị trí dưới cùng để không bị hiển thị đè lên các widget khác nhé.

Tick chọn vào widget cần ghim lại
Tick chọn vào widget cần ghim lại

Sau khi thêm xong sticky widget thì bạn lưu lại để kiểm tra đã thành công chưa. Nếu chưa thành công thì bạn quay lại phần thiết lập Q2W3 Fixed Widget để xem thử đã chèn đúng Stop ID chưa hoặc có bị lỗi do plugin cache không nhé.

Câu hỏi thường gặp

LỜI KẾT

Như vậy là IMTA đã hướng dẫn xong cho bạn cách tạo sticky widget cho website WordPress rồi đấy. Thủ thuật này mặc dù rất đơn giản nhưng khá hữu ích đúng không nào. Nếu bạn có điều gì thắc mắc khi thao tác thì có thể đăng câu hỏi lên nhóm hỗ trợ WordPress mình đã để trong bài đăng hoặc để lại bình luận bên dưới nhé.

Ngoài giữ cố định thanh bên phải của bài viết, một số bạn còn có nhu cầu cố định 1 bài viết bất kỳ năm trên trang chủ khi trang chủ dạng blog. Những bài viết sau mình sẽ viết nhiều hơn.

Xin chào và hẹn gặp lại bạn ở các bài viết sau về chủ đề thủ thuật WordPress tại IMTA. EDU.VN !

WordPressCố định Sider Bar Widget trên WordPress khi cuộn chuột