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

Tìm bài viết bằng cú pháp: nguyenhung + từ khóa

  • ẩn hiện widget
  • ẩn sidebar wp
  • hướng dẫn xóa cài đặt widget
  • làm thế nào để cài đặt slidebar

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

7 Bình luận trên "Hướng dẫn cách ẩn Widget (Sidebar) trên giao diện di động"

avatar
Phieudu
Bạn đọc
Phieudu

Share mà sao nó khong mở khóa là sao

Nguyễn Thanh Nhớ
Bạn đọc

Cho mình hỏi, mình đang viết bằng blogspost thì phải làm sao để không cho 1 widget hiển thị trên chế độ mobi vậy? Cảm ơn AD rất nhiều.

Son Zim
Bạn đọc
Son Zim

theme của mình đang bị ẩn, để hiện lại thì làm thế nào?

Quang
Bạn đọc
Quang

Thanks. Cách này hay vậy mà mình mò mãi ko ra. Đang tìm cách tối ưu cho giao diện di động mà mãi chẳng biết tối ưu như nào. Web mình nó load chậm quá. Ad có cách nào hay nữa tư vấn giúp nhé

wpDiscuz
Hello! Tôi là Nguyễn Hùng, blog này tôi xây dựng nhằm mục đích chia sẻ miễn phí các kiến thức về máy tính và làm web Wordpress, SEO, SEM, MMO,... mà tôi biết cho tất cả mọi người. Cảm ơn bạn đã ghé qua và đọc blog, nếu thấy bài viết hay hãy chia sẻ nó thay cho lời cảm ơn nhé. → Xem tiếp"

ĐĂNG KÝ NHẬN TIN QUA EMAIL

Nhận thông tin bổ ích về WordPress, SEO, Thủ thuật máy tính, Word, Excel....và các phần quà hấp dẫn qua email.

Cảm ơn bạn đã đăng ký

Có lỗi gì đó rồi kìa