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

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

Sidebar WordPress là gì ?

Sidebar là khu vực mà ở đó người dùng có thể thêm các widget tùy ý: bài viết mới, lịch, tìm kiếm,… 

Sidebar là một phần không thể thiếu của website . Nhiều bạn vẫn thường nghĩ rằng sidebar chỉ là thanh bên của website ? Nhưng không phải vậy đâu các bạn ạ ! Sidebar có thể sử dụng ở cả header, footer …  Nó được sử dụng rất linh hoạt .

Không thể phủ nhận vai trò của sidebar trong việc tăng pageviews , cải thiện khả năng điều hướng website . Tuy nhiên, trong một số trường hợp, bạn sẽ nhận thấy nó không cần thiết và thậm chí là khá thừa thãi, đặc biệt là trong giao diện responsive. Đối với trên giao diện di động sidebar sẽ tự động được chuyển xuống phần cuối của blog/ website, khiến site của bạn kéo dài lê thê .

Các nội dung trên sidebar người dùng di động không quan tâm cho lắm . 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. 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 cách ẩn sidebar wordpress trên thiết bị di động là ý tưởng được nhiều người quản trị website nghĩ đến.

Vậy chúng ta sẽ ẩn sidebar wordpress trên thiết bị di động như thế nào ?

Cách ẩn sidebar wordpress trên thiết bị di động bằng CSS

Tất cả những gì bạn cần làm là xác định class hoặc id nào đang bao quanh khu vực sidebar của bạn . Ví dụ với đoạn code sau 

BÙM ! Chỉ với 1 đoạn CSS đơn  giản là bạn đã ẩn sidebar trên thiết bị di động rồi . 

Bản thân mình đã dùng cách này trong quá khứ . Đấy là khi trình của mình vẫn còn còi , chưa để ý tới việc tối ưu tốc độ tải website pagespeed insights …. Với phương pháp này thì quả thực sidebar đã ẩn đi nhưng đó là đối với người đọc thôi . Còn thực tế website của bạn vẫn phải tải tất cả các thành phần không cần thiết trên thiết bị di động . Vải thưa không che được mắt thánh he he , không qua mắt được các công cụ đánh giá website . Ví dụ sidebar của bạn mà sử dụng các widget bên thứ ba như fanpage facebook thì thôi rồi chậm …

Bây giờ nhược điểm của phương pháp này là website bạn vẫn đang tải nội dung sidebar mà nó không hiển thị . Vậy chúng ta còn có cách nào không đây ? Sau nhiều năm chinh chiến gọi là Developer cho nó oai thì mình cũng có chút ít kinh nghiệm để giải quyết vấn đề này . 

Cách ẩn sidebar wordpress trên thiết bị di động bằng PHP

Với cách này thì sẽ phức tạp hơn 1 chút . Chúng ta sẽ sử dụng hàm wp_is_mobile() . Các bạn vào https://codex.wordpress.org/Function_Reference/wp_is_mobile để tham khảo thêm nhé !

Hãy chắc chắn rằng theme đang sử dụng là child theme  (hầu hết các theme cao cấp hiện tại đều đi kèm với child theme) . Cài đặt nó trên theme hiện tại của bạn để giữ các thay đổi của mình ngay cả khi theme bạn cập nhật.

Chúng ta sao chép tệp tin sidebar.php sang child theme để ghi đè không bị mất khi cập nhật theme lên . Mở file sidebar.php lên thêm đoạn code kiểu như sau vào đầu tệp sidebar.php

<?php if ( ! wp_is_mobile() ) : ?>

Sau đó, bạn cần phải đi đến dưới cùng của tập tin của bạn và thêm thẻ kết thúc.

<?php endif; ?>

Ví dụ với file sidebar.php mà theprokey.com mình đang sử dụng

Đó là tất cả các điều bạn cần làm để sidebar thật sự biến mất trên thiết bị di dộng . Chúc các bạn thành công ! Có điều gì thắc mắc hay chưa làm được hãy comment để cho mình biết ha .

Nếu bạn thích bài viết này, hãy subscribe blog của mình để thường xuyên cập nhật những bài viết hay nhất, mới nhất nhé. Cảm ơn rất nhiều. 🙂

5 1 vote
Article Rating
Nhận thông báo qua email
Nhận thông báo cho
guest
2 Comments
Cũ nhất
Mới nhất Bình chọn nhiều nhất
Inline Feedbacks
View all comments
Oanh
Oanh
4 tháng cách đây

Tks bạn, mình đã làm được. 🙂

DAT VU TRUONG
DAT VU TRUONG
1 tháng cách đây

Cảm ơn bạn đã chia sẻ. Mình đã áp dụng cách 2 thành công!

2
0
Would love your thoughts, please comment.x
()
x