[WordPress] Hướng dẫn cách Ẩn Widgets trên thiết bị di động

Quảng cáo
Ads_ngang
Website dinhthuanit.com có bài [WordPress] Hướng dẫn cách Ẩn Widgets trên thiết bị di động Hướng dẫn cách Ẩn Widgets trên thiết bị di động. Làm thế nào để ẩn widget wordpress trên giao diện mobile.

wordpress-mobile

Cách ẩn Widgets trên thiết bị di động

Trong serie thiết kế web lần trước, mình đã viết bài về kiểu cách hướng dẫn để Ẩn WordPress Widgets trên một trang cụ thể. Trong bài viết này mình sẽ chỉ cho các bạn cách ẩn widgets trên thiết bị di động. Nếu bạn đích thực muốn có 1 trải nghiệm cho người dùng tuyệt hảo của bạn, bạn hãy gắng gượng xắp xếp nội dung một cách ngắn gọn, cách sắp xếp hài hóa trên giao diện mobile của bạn. Bây giờ bạn cũng có thể có thể dễ dàng khắc phục điều này bằng việc làm theo một số hướng dẫn dưới đây và ẩn bất kỳ WordPress widget mà bạn mong muốn trên bất kỳ thiết bị nào bạn muốn!

Ví dụ: Tôi có hai widget  Newsletter  trên trang web của tôi, một ở sidebar cùng một ở footer. Tôi không muốn hiển thị cả 2 wiget ở 2 địa thế đó trên giao diện mobile, nó sẽ gây cực khó chịu cho trải nghiệm người sử dụng và bố cục sẽ rối mắt. Vì vậy, tôi chọn để ẩn các widget footer.

Bước 1

Trước tiên, bạn sẽ rất càng phải cài đặt một WordPress plugin miễn phí gọi ZigWidgetClass . (Có một plugin thay thế là Widget CSS Classes , tuy nhiên nó đang không được cập nhật thời gian gần đây. Vì vậy tôi khuyên bạn nên dùng plugin tôi đang sử dụng).

Bước 2

Bây giờ chúng ta càng phải thêm một số tùy chỉnh CSS cho Widget CSS Classes và chúng tôi sẽ thêm đoạn mã CSS vào file style.css trong theme WordPress của bạn. Các bạn theo dấu phía dưới, tôi sẽ bổ sung thêm đoạn mã sau:

 @media only screen and (max-width:480px) { .hide_on_mobile { display: none !important;} }  

Khi thêm đoạn code như vậy, nó sẽ ẩn trên bất kỳ màn hình như là 480px và kích thước nhỏ hơn nữa. Chú ý ở trên, tôi đặt tên thẻ class là hide_on_mobile

Bước 3

Bây giờ chúng ta cần thêm thẻ class đó vào một widget bất kỳ nào mà bạn muốn ẩn trên giao diện thiết bị di động. Bạn truy cập vào Appearance và nhấn vào “Widget”.

appearance-widgets

Bước 4

Bây giờ bạn sẽ bấm vào mũi tên trỏ xuống để hiện thị thông tin chi tiết trong widget mà bạn muốn ẩn, hãy thêm class: hide_on_mobile vào ô “CSS Classes” như trên dưới. Trường class này được tạo ra khi cài đặt plugin ZigWidgetClass. Cuối cùng bạn nhấp vào “Save” trên widget của bạn.

hide-widget-on-mobile-device

Chúc bạn thành công !

Hãy like, comment nếu bài viết của tôi có ích với bạn 🙂

Nếu bạn thích bài viết này, hãy ủng hộ chúng tôi bằng phương pháp đăng ký nhận bài viết mới ở bên dưới và hãy nhớ chia sẻ kiến thức này với bạn bè của bạn nhé. Bạn cũng có thể có thể theo dõi blog này trên Twitter và Facebook

Bài viết [WordPress] Hướng dẫn cách Ẩn Widgets trên thiết bị di động được tổng hợp và biên tập bởi: dinhthuanit.com. Mọi ý kiến đóng góp và phản hồi vui lòng gửi Liên Hệ cho dinhthuanit.com để điều chỉnh. dinhthuanit.com xin cảm ơn.

Bài Viết Liên Quan


Bài Viết Khác


Quảng cáo
Ads_ngang