Hướng dẫn cách ẩn Widget (Sidebar) trên giao diện di động

Trong WordPress, sidebar (widget) là thành phần mà bất kỳ 1 theme nào cũng đều có. Sidebar giúp tăng khả năng điều hướng cho web/blog từ đó tăng pageviews, giảm bounce rate và cuối cùng cũng vẫn là cải thiện SEO. Đối với nhưng theme (giao diện) responsive thì khi hiển thị trên di động (mobile) toàn bộ sidebar sẽ bị đẩy xuống cuối làm cho thanh cuộn kéo dài ra. Lúc này thì sidebar gây nhiều bất tiện cho người dùng hơn là sự tiện lợi. Không những thế việc phải load thêm sidebar còn làm web/blog nặng hơn, dẫn đến tốc độ tải trang thêm lâu hơn. Vì vậy việc loại bỏ sidebar (widget) ra khỏi giao diện di động là ý tưởng không hề tồi.

huong-dan-cach-widget-sidebar-tren-giao-dien-di-dong

Để biến ý tưởng ẩn widget trên di dộng thành hiện thực thì không phải ai cũng biết. Vậy nên hôm nay NguyenHungPlus.Com xin được chia sẻ cho các bạn cách ẩn Widget (Sidebar) trên di dộng mà Nguyễn Hùng vừa áp dụng ngay trên blog của mình. Chi tiết các bước để ấn sidebar thế nào bạn hãy theo dõi ở dưới đây nhé 🙂

Hướng dẫn chi tiết cách ẩn Widget (Sidebar) trên giao diện di động

Bước 1: Để làm ẩn sidebar trên mobile chúng ta cần 1 plugin hỗ trợ. Bạn hãy cài đặt plugin Widget CSS Classes hoàn toàn miễn phí.

Bước 2: Sau khi cài đặt plugin xong bạn không cần thiết lập gì hết. Bạn chỉ cần thêm đoạn CSS sau vào file style.css của theme WordPress bạn đang dùng. Bạn có thể thêm vào file style.css của child theme vẫn ok nhé. Bạn copy code CSS ở đây:

Với đoạn CSS này thì những widget nào chứa class là hide_on_mobile sẽ bị ẩn khi màn hình hiển thị nhỏ hơn hoặc bằng 480px.

Bước 3: Bây giờ chúng ta truy cập vào Giao diện (Appearance) -> Widget và tìm những widget nào cần ẩn thì bạn click vào nó thêm class hide_on_mobile vào ô CSS Classes như sau

huong-dan-cach-widget-sidebar-tren-giao-dien-di-dong-1

Bây giờ bạn xóa cache đi rồi kiểm tra thử bằng cách truy cập web/blog bằng điện thoại di động xem sidebar  có ẩn trên mobile không nhé. Chắc chắn ok mà. Không tin thì thử kiểm tra ngay trên blog của mình nhé :))

Nếu bạn thấy bài viết hay nhớ like và share nhé. Và nhớ theo dõi NguyenHungPlus.Com để cập nhật thêm nhiều bài viết hay về WordPress nhé. Chúc các bạn thành công!

Hướng dẫn cách ẩn Widget (Sidebar) trên giao diện di động
5 9 votes

Bình luận mới

  1. Phieudu 22/08/2017
  2. Son Zim 31/10/2016
    • Nguyễn Hùng 31/10/2016
  3. Quang 08/06/2016
    • Nguyễn Hùng 08/06/2016

Để lại ý kiến của bạn

Hello! Tớ là Nguyễn Hùng, blog này tớ xây dựng nhằm mục đích chia sẻ miễn phí các kiến thức máy tính và làm web Wordpress, SEO, SEM, MMO,... mà tớ biết cho tất cả mọi người. Cảm ơn bạn đã ghé qua blog, nếu thấy bài viết hay, hãy chia sẻ để ủng hộ tinh thần cho tớ nha. → Xem tiếp"
Đăng ký nhận bản tin!

Đăng ký nhận bản tin!

Đăng ký email để nhận bài viết mới và các khuyến mãi, quà tặng trên blog Nguyễn Hùng.

Đăng ký thành công!