Ẩn sidebar trong giao diện mobile của Genesis Framework và child theme.
Không ai có thể phủ nhận vai trò của sidebar (thanh bên) trong việc tăng pageviews, giảm bounce rate, cải thiện khả năng điều hướng… cho blog/ 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. Chẳng hạn như khi blog/ website của bạn hiển thị trên các thiết bị có kích thước màn hình nhỏ (mobile, tablet), sidebar sẽ tự động được chuyển xuống phần cuối của blog/ website, khiến site của bạn “dài miên man”… gây bất tiện cho người dùng khi họ phải mất khá nhiều thời gian để trượt từ đầu đến cuối trang. Hơn nữa, việc phải tải thêm sidebar sẽ khiến tốc độ truy cập site của bạn trở nên chậm chạp hơn. Vì vậy, việc loại bỏ sidebar trong giao diện mobile là một ý kiến không hề tồi.
Tham khảo thêm:
Trên thực tế, sáng nay, tôi vừa quyết định áp dụng điều này cho blog WP Căn bản và nhân đây, tôi cũng xin chia sẻ luôn cho các bạn về cách ẩn sidebar trong Genesis child theme khi hiển thị trên thiết bị di động (chỉ dành riêng cho Genesis thôi nhé).
Hướng dẫn ẩn sidebar trong giao diện mobile của Genesis
Đầu tiên, các bạn truy cập vào Appearance => Editor => Chọn đúng child theme mà bạn đang dùng. Mở file functions.php của Genesis Framework hoặc child theme và thêm đoạn code sau đây vào:
Click vào nút “Update File” để lưu lại các thiết lập. Xong!
Thật đơn giản phải không nào? Bây giờ hãy thử truy cập site của bạn trên mobile hoặc tablet để xem thành quả nhé. Chúc các bạn thành công!
Nếu bạn thích bài viết này, hãy subscribe blog của tôi để thường xuyên cập nhật những bài viết hay nhất, mới nhất qua email nhé. Cảm ơn rất nhiều. :)
Phát đã bình luận:
09/11/2014 at 18:37Bác ơi em muốn chỉnh lại giao diện theme Schema thành màu cam thì làm thế nào ạ! trong theme option không thấy chỉnh về đó. định làm web về handmade nên thấy màu đen không hợp, mà menu, thanh tìm kiếm, đều màu đen hết á, bác xem dùm em với. Em up đường dẩn theme của em cho bác luôn: . . Bạn nào chưa có thì Doadload về sài nhé, hàng chính chủ đó, :)
Trung Hieu đã bình luận:
09/11/2014 at 19:09Chào bạn. Bạn có thể truy cập vào Appearance => Editor, mở file style.css ra và đổi mã màu hexa ) ở trong đó cho phù hợp. Nếu không làm được, bạn gửi thông tin đăng nhập WordPress qua email admin@wpcanban.com, mình sẽ giúp bạn chỉnh sửa. :)
Xuân Tĩnh đã bình luận:
12/11/2014 at 01:04Mình đã thử trên site mình với đoạn code của bạn nhưng nó không tác dụng.
Trung Hieu đã bình luận:
12/11/2014 at 07:49Chào bạn, không biết sau khi chèn thêm code, bạn đã thử truy cập nó trên điện thoại di động chưa? Nếu vẫn không được thì có thể nó đã bị xung đột với một hàm nào đó trong functions.php của bạn. :P
Xuân Tĩnh đã bình luận:
12/11/2014 at 07:53Chào Trung Hiếu. Mình edit bằng điện thoại và kiểm tra trực tiếp trên điện thoại luôn. Chắc có lẽ là vẫn còn cookie. Quên mất vụ này
Trung Hieu đã bình luận:
12/11/2014 at 07:59Sau khi chèn code, bạn nhớ xóa cache (nếu bạn đang sử dụng plugin cache) nhé. :)
Xuân Tĩnh đã bình luận:
12/11/2014 at 08:03Vâng mình có plugin cache. Nhưng tối qua trễ quá nên mình Remove code luôn rồi. Để tối về check lại xem thế nào. Hy vọng nó được. Chứ để sidebar dài thấy bất tiện
Trung Hieu đã bình luận:
12/11/2014 at 08:04Có gì thì PM lại cho mình một tiếng nhé. Vì blog của mình sử dụng code này và hoạt động rất bình thường. :)
Xuân Tĩnh đã bình luận:
12/11/2014 at 09:56Ớ chắc là bị xung đột với cái nào đó rồi bạn. Xóa cookie và cache mà vẫn không được :)
Trung Hieu đã bình luận:
12/11/2014 at 10:00Bạn thử loại bỏ lần lượt từng hàm xem nó xung đột với hàm nào? :D
Xuân Tĩnh đã bình luận:
12/11/2014 at 10:03Thế thì để tối về nghịch chứ giờ ra ngoài chẳng có wifi mà dùng điện thoại phát Wifi để sửa nên lâu lắm :) Mình dùng Magazine Pro
Trung Hieu đã bình luận:
12/11/2014 at 10:05Mình biết mà. :D Theme của mình cũng được re-build từ Magazine Pro. :P
Xuân Tĩnh đã bình luận:
12/11/2014 at 10:11Ừa bạn. Thích thằng này nhờ nhẹ nhàng chạy mượt mà và tùy biến nhanh mặc dù mình chẳng biết tí xíu gì về code cả :))
Trung Hieu đã bình luận:
12/11/2014 at 10:14Trên StudioPress chia sẻ rất nhiều code snippet để tùy biến Genesis mà. Cứ dựa vào đó mà quất thôi. :D
Xuân Tĩnh đã bình luận:
12/11/2014 at 15:37Được rồi ông bạn à. Chẳng phải do lỗi lầm gì cả. Lúc tôi copy hết đoạn code của ông thì nó không mất sidebar. Nhưng tôi tự nhập bằng tay theo dòng code của ông thì nó mất sidebar rồi. :)) Chẳng hiểu nổi :)
Trung Hieu đã bình luận:
12/11/2014 at 16:10Ủa. Sao kỳ cục vậy trời? @@!
Xuân Tĩnh đã bình luận:
12/11/2014 at 16:13Tui cũng không biết. Nhưng mà sự thật nó như vậy ;)
Kiên đã bình luận:
05/02/2015 at 15:46Làm không có được bác Hiếu ơi, ở web của bác em co trình duyệt lại hết cỡ vẫn còn
Trung Hiếu đã bình luận:
05/02/2015 at 15:52Bạn phải test trên trình duyệt điện thoại di động nhé. Còn trên trình duyệt máy tính bạn có co đến mức nào nó vẫn hiện thôi. :P
Mã giảm giá Lazada đã bình luận:
16/02/2016 at 22:21Bác ơi làm sao để hiện archive description cho Genesis được vậy bác, hướng dẫn có nhiều nhưng mà theme này lại ko có file Archive.php, không có archive description SEO từ khóa toàn vào trang chủ thôi.
Trung Hiếu đã bình luận:
17/02/2016 at 09:11Trong phần chỉnh sửa tags, categories có hết cả mà. Ai bảo theme Magazine Pro không có? Bậy quá đi. :P
Mã giảm giá Lazada đã bình luận:
17/02/2016 at 11:55Ơ sao em viết description mà nó ko hiện ra nhỉ
Trung Hiếu đã bình luận:
17/02/2016 at 12:11Viết hết vào các mục “Description”, “Archive Intro Text” và “Yoast SEO Settings” thử xem nào. :P
Mã giảm giá Lazada đã bình luận:
18/02/2016 at 13:02em mới thử bác ơi, phần mô tả nó ko hiện chỉ hiện phần Archive headline và Archive intro text thui, hix 2 phần này ko viết HTML được
Trung Hiếu đã bình luận:
18/02/2016 at 13:44Chỉ hỗ trợ text nhé. Không dùng được HTML. Mà vô lý nhỉ. Gửi mình xem screenshot của nó nào. :P
Mã giảm giá Lazada đã bình luận:
18/02/2016 at 13:59http://sanvoucher.com/wp-content/uploads/2016/02/Untitled-2.jpg nó đây bác, không hiển thị phần mô tả mới hay ( link category đây ạ http://sanvoucher.com/category/voucher-mua-sam/coupon-zalora/) cho e hỏi luôn đường dẫn category của em có sâu quá ko nhỉ, có nên đặt category con vậy ko ạ
Trung Hiếu đã bình luận:
18/02/2016 at 14:23Phần Yoast SEO Settings ở dưới cùng đâu? Sao không đẩy phần mô tả vào đó?
Mã giảm giá Lazada đã bình luận:
18/02/2016 at 16:54Yoast nỏ có phẩn mô tả bác ơi http://sanvoucher.com/wp-content/uploads/2016/02/faaa.jpg
Trung Hiếu đã bình luận:
18/02/2016 at 16:56Thế cái gì nằm dưới tiêu đề và permalinks đó? :P
Mã giảm giá Lazada đã bình luận:
18/02/2016 at 20:37kiki bác hiểu sai ý em rồi, ý em ko phải cái description ở yoast ở đó thì gõ vào đc, nhưng vào web sẽ ko thấy, e muốn gõ vào description cho nó tự hiện ở yoast và vào web category đó vẫn thấy đoạn description đó http://sanvoucher.com/wp-content/uploads/2016/02/sdfqw.jpg đoạn này là e viết vào Archive intro text, nếu viết vào phần mô tả thì có thể viết đc HTML
Trung Hiếu đã bình luận:
19/02/2016 at 04:54Archive Intro Text không hỗ trợ HTML nhé. Chỉ có text thôi. Chấp nhận sự thật đi. :D Mình thường viết mô tả trong mục này và Yoast SEO Settings. Một cái để cho người dùng đọc. Cái còn lại dành cho Bots tìm kiếm. :)
Dương dê đã bình luận:
27/10/2016 at 12:36Bác cho em xin đoạn code ẩn secondary menu trên giao diện mobile với.
Và 1 cái nữa là có đổi font chữ trong 2 menu của theme magazine pro này ko bác. Chứ mặc định chữ hoa hết và nét chữ gầy đét à :(
Trung Hiếu đã bình luận:
27/10/2016 at 12:55Bạn bỏ text-transform: uppercase; trong đoạn css của menu đi là được mà. :P
Dương dê đã bình luận:
27/10/2016 at 13:27Thanks bro nha
Nghiệp đã bình luận:
20/06/2017 at 15:36Chào bác!
Em đang sử dụng genesis framewwork. Tuy nhiên, ở theme chính hay bất cứ child theme nào của nó đều không có sidedar.
Em đã làm theo bài này: https://thachpham.com/wordpress/wordpress-development/tu-tao-sidebar.html của bác thachpham. tuy nhiên không thể hiển thị ra được.
Không biết những hàm đó có bị lỗi gì không?
Thank bác!
Trung Hiếu đã bình luận:
20/06/2017 at 20:20Bạn thử vào Genesis => Theme Settings => Default Layouts => Kiểm tra xem đã chọn bố cục mặc định dạng có sidebar chưa? :P
Hu đã bình luận:
16/04/2018 at 01:01Trong paradise childtheme thì cố định menu khi cuộn xuống, còn giao diện mobile mình cũng muốn cố định menu hoặc logo khi cuộn xuống thì có cách nào ko bạn?
Trung Hiếu đã bình luận:
16/04/2018 at 08:17Không bạn nhé.