Bài Viết Mới Nhất

Sunday, October 15, 2017

Yêu người không yêu mình

Bạn với một trang web chạy WordPress và trang của bạn hướng tới người sử dụng sử dụng những thiết bị di động thì việc tuyệt vời trang là việc khiến vô cùng quan trọng. Tại Việt Nam, ko nên thứ di động nào cũng được kết nối Internet tốc độ cao, hiện trạng 3G/4G “rùa bò” còn hơi phổ biến. Việc làm cho trang web của bạn thân thiện mang những trang bị di động thể tạo những trang AMP, nhưng không phải khi nào người tiêu dùng cũng tầm nã 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 bắt buộc khác mà tôi đưa ra ngày hôm nay chính là ẩn Sidebar Widget.

Hướng dẫn ẩn Widget WordPress trên <span class='marker'>các</span> <span class='marker'>thiết bị</span> di động

Ư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 lúc thông qua bằng thiết bị di động từ đấy cải thiện được trải nghiệm người dùng.
Hướng dẫn ẩn Sidebar Widget trên những trang bị di động
Đầu tiên những bạn nên cài plugin ZigWidgetClass để cấu hình CSS cho Widget. Về cài đặt plugin tôi sẽ ko nêu khía cạnh nữa, vì nó quá đơn thuần rồi nên không nào.
Tiếp theo, những bạn phải thêm đoạn code sau vào file style.css của theme.
@media only screen and (max-width:480px)
.cswp
display: none !important;


Ở đây, tôi thiết lập giả dụ màn hình của những trang bị di động mà nhỏ hơn 480px thì sẽ ko hiển thị Widget. Thông số này những bạn với thể cấu hình lại sao cho ưng ý là được.
Cuối cùng, các bạn vào cài đặt Widget, bạn để ý, hiện tại mỗi Widget của bạn sẽ xuất hiện thêm 1 mục nữa là CSS Classes, ở khung này các bạn chỉ buộc phải nhập class mà bạn vừa đặt thuộc tính trong file style.css là xong.



Đối các widget nào bạn ko 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 thể tạo đa dạng class khác nhau và nhập cho từng Widget. Chẳng hạn class .cswp sẽ ẩn widget Tag Cloud lúc độ rộng màn hình nhỏ hơn 48opx, còn class .cswp2 sẽ ẩn widget Text lúc màn hình nhỏ hơn 360px.

Thế thôi, các bạn đánh giá lại thử xem được chưa nhé. Bạn thể thu nhỏ trình thông qua của mình và load lại trang, ko khăng khăng buộc phải test trên những thứ di động đâu. Chúc các bạn thành công.

Bài viết liên quan