Cách ẩn Widget / Nội dung ở giao diện mobile trong Wordpress

Ẩn nội dung trên thiết bị di động (giao diện mobile) là cách giúp giảm lược nội dung hiển thị - giao diện người dùng trên điện thoại sẽ gọn hơn. Cái này khá đơn giản, tuy nhiên với những bạn không có nhiều kiến thức về code thì đó lại là vấn đề cần đến sự trợ giúp của anh Google.

Bài viết này sẽ hướng dẫn các bạn cách ẩn Widget trên thiết bị di động đối với website mã nguồn Wordpress (mã nguồn Wordpress có lẽ là loại dễ dùng nhất dành cho mấy bác kiến thức code không sâu, chỉ yếu vọc trên mạng)

B1: Thêm tùy chỉnh css class cho Widget bằng Plugin Widget CSS Classes


- Với website Wordpress thông thường sẽ không có phần tùy chỉnh class trong Widget, khi kích hoạt plugin Widget CSS Classes bạn sẽ thấy có thêm phần CSS Classes (như hình dưới)

CSS Classes được thêm vào Widget sau khi cài plugin

- Bạn hãy nhập tên class vào, ví dụ mình đặt tên class ẩn Widget là: hide_on_mobile

B2: Thêm code css cho class hide_on_mobile

- Trong trang quản trị website Wordpress bạn đi đến Giao diện >> Sửa và tìm đến file style.css

Mở file style.css trong giao diện quản trị

- Thêm đoạn code sau vào cuối file và lưu lại:

@media only screen and (max-width:480px) {

.hide_on_mobile {

display: none !important;}

}

Bây giờ bạn có thể sử dụng class hide_on_mobile để ẩn bất kỳ Widget nào (bằng việc thêm "hide_on_mobile" vào phần nhập CSS Classes)

Với đoạn nội dung bất kỳ trên trang bạn có thể thêm class="hide_on_mobile" vào thẻ chứa của nó. Ví dụ:

<span class="hide_on_mobile">Nội dung sẽ ẩn ở giao diện điện thoại</span>

Thử theo bài hướng dẫn đi nào. Chúc các bạn thành công!