Ẩ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é).
Đầ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:
//* Ẩn sidebar trong Genesis khi ở giao diện mobile
add_action( 'get_header', 'remove_sidebars_mobile' );
function remove_sidebars_mobile() {
if ( wp_is_mobile() ) {
# Force full width content
add_filter( 'genesis_pre_get_option_site_layout', '__genesis_return_full_width_content' );
}
}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. :)
Trong 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?
Không bạn nhé.
Chà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!
Bạ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
Bá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 à :(
Bạn bỏ text-transform: uppercase; trong đoạn css của menu đi là được mà. :P
Thanks bro nha
http://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 ạ
Phần Yoast SEO Settings ở dưới cùng đâu? Sao không đẩy phần mô tả vào đó?
Yoast nỏ có phẩn mô tả bác ơi http://sanvoucher.com/wp-content/uploads/2016/02/faaa.jpg
Thế cái gì nằm dưới tiêu đề và permalinks đó? :P
kiki 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
Archive 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. :)
em 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
Chỉ 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
Bá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.
Trong 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
Ơ sao em viết description mà nó ko hiện ra nhỉ
Viết hết vào các mục “Description”, “Archive Intro Text” và “Yoast SEO Settings” thử xem nào. :P
Là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
Bạ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
Thế 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
Mình biết mà. :D Theme của mình cũng được re-build từ Magazine Pro. :P
Ừ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ả :))
Trê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
Đượ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 :)
Ủa. Sao kỳ cục vậy trời? @@!
Tui cũng không biết. Nhưng mà sự thật nó như vậy ;)
Mì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.
Chà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
Chà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
Sau khi chèn code, bạn nhớ xóa cache (nếu bạn đang sử dụng plugin cache) nhé. :)
Vâ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
Có 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. :)
Ớ 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 :)
Bạn thử loại bỏ lần lượt từng hàm xem nó xung đột với hàm nào? :D
Bá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ủ đó, :)
Chà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. :)