Bài viết liên quan
Bạn có một trang web chạy WordPress và trang của bạn hướng tới người dùng sử dụng các thiết bị di động thì việc tối ưu trang là việc làm hết sức quan trọng. Tại Việt Nam, không phải thiết bị di động nào cũng được kết nối Internet với tốc độ cao, hiện trạng 3G/4G “rùa bò” còn khá phổ biến. Việc làm trang web của bạn thân thiện với các thiết bị di động có thể tạo các trang AMP, nhưng không phải lúc nào người dùng cũng truy cập vào các trang này, và trang AMP cũng không thể đầy đủ chức năng được. Một giải phải khác mà tôi đưa ra ngày hôm nay chính là ẩn Sidebar Widget.
Ưu điểm của phương pháp này sẽ giúp bạn cải thiện được tốc độ tải trang khi duyệt bằng thiết bị di động từ đó cải thiện được trải nghiệm người dùng.
Hướng dẫn ẩn Sidebar Widget trên các thiết bị di động
Đầu tiên các bạn phải cài plugin ZigWidgetClass để cấu hình CSS cho Widget. Về cài đặt plugin tôi sẽ không nêu chi tiết nữa, vì nó quá đơn giản rồi phải không nào.
Tiếp theo, các bạn cần thêm đoạn code sau vào file style.css của theme.
Ở đây, tôi thiết lập nếu màn hình của các thiết bị di động mà nhỏ hơn 480px thì sẽ không hiển thị Widget. Thông số này các bạn có thể cấu hình lại sao cho phù hợp là được.
Cuối cùng, các bạn vào cài đặt Widget, bạn để ý, bây giờ mỗi Widget của bạn sẽ xuất hiện thêm một mục nữa là CSS Classes, ở khung này các bạn chỉ cần nhập class mà bạn vừa đặt thuộc tính trong file style.css là xong.
Đối với các widget nào bạn không nó muốn hiển thị thì nhập CSS Classes vào, còn Widget bạn muốn hiển thị thì bạn để trống. Bạn cũng có thể tạo nhiều class khác nhau và nhập cho từng Widget. Chẳng hạn class .cswp sẽ ẩn widget Tag Cloud khi độ rộng màn hình nhỏ hơn 48opx, còn class .cswp2 sẽ ẩn widget Text khi màn hình nhỏ hơn 360px.
Thế thôi, các bạn kiểm tra lại thử xem được chưa nhé. Bạn có thể thu nhỏ trình duyệt của mình và load lại trang, không nhất thiết phải test trên các thiết bị di động đâu. Chúc các bạn thành công.
Nguồn: Việt Hùng admin https://chiasewp.com/
Bình Luận