• WordPress
    • Thủ thuật WordPress
    • WordPress plugins
    • WordPress themes
    • Hosting và Domain
  • Kiếm tiền
    • Google AdSense
    • Tiếp thị liên kết
    • Rút gọn link
  • Quà tặng
  • Khuyến mãi
  • Đánh giá
  • Dịch vụ
    • WordPress Hosting
    • Cài đặt WordPress
    • Tối ưu WordPress
    • Cài theme Paradise
  • Liên hệ

WP Căn bản

Thủ thuật WordPress và kiếm tiền online

wordpress-theme-tot-nhat

  • Bắt đầu
  • Thủ thuật WordPress
  • WordPress plugins
  • WordPress themes
  • Hosting và Domain
  • Thông báo
Trang chủ » WordPress » Thủ thuật WordPress » Ẩn sidebar trong giao diện mobile của Genesis

Ẩn sidebar trong giao diện mobile của Genesis

31/10/2014 01/06/2016 Trung Hiếu 38 Bình luận

Mục lục

  • Hướng dẫn ẩn sidebar trong giao diện mobile của Genesis

Ẩn sidebar trong giao diện mobile của Genesis Framework và child theme.

hide-genesis-sidebar-on-mobile-devices

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:

  • Tạo giao diện mobile cho blog WordPress
  • Top 15 mobile plugins tốt nhất dành cho WordPress

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. :)

Bài viết liên quan

Chuyên mục: Thủ thuật WordPress Thẻ: Genesis Framework, Thủ thuật Genesis

dich-vu-cai-dat-website-wordpress-mien-phi

Tác giả: Trung Hiếu

"Cảm thấy blog quá nhỏ? Nếu bạn chỉ có một độc giả và blog của bạn làm thay đổi cuộc sống của họ thì nó là đủ lớn".

Previous Post: « Cài đặt CloudFlare SSL miễn phí cho website WordPress
Next Post: SiteGround giảm giá hosting 70% nhân dịp Halloween »

Reader Interactions

Bình luận

    Trả lời Hủy

    Lưu ý:
    > Không sử dụng từ khóa trong mục "Tên".
    > Hãy sử dụng tên thật và địa chỉ email chính xác.
    > Vui lòng bình luận bằng tiếng Việt có dấu.
    Mọi bình luận trái quy định sẽ bị gỡ bỏ link hoặc xóa bỏ hoàn toàn.

  1. Phát đã bình luận:

    09/11/2014 lúc 18:37

    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ủ đó, :)

    Trả lời
    • Trung Hieu đã bình luận:

      09/11/2014 lúc 19:09

      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. :)

      Trả lời
  2. Xuân Tĩnh đã bình luận:

    12/11/2014 lúc 01:04

    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.

    Trả lời
    • Trung Hieu đã bình luận:

      12/11/2014 lúc 07:49

      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

      Trả lời
      • Xuân Tĩnh đã bình luận:

        12/11/2014 lúc 07:53

        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

        Trả lời
        • Trung Hieu đã bình luận:

          12/11/2014 lúc 07:59

          Sau khi chèn code, bạn nhớ xóa cache (nếu bạn đang sử dụng plugin cache) nhé. :)

          Trả lời
          • Xuân Tĩnh đã bình luận:

            12/11/2014 lúc 08:03

            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

        • Trung Hieu đã bình luận:

          12/11/2014 lúc 08:04

          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. :)

          Trả lời
          • Xuân Tĩnh đã bình luận:

            12/11/2014 lúc 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 lúc 10:00

          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

          Trả lời
  3. Xuân Tĩnh đã bình luận:

    12/11/2014 lúc 10:03

    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

    Trả lời
    • Trung Hieu đã bình luận:

      12/11/2014 lúc 10:05

      Mình biết mà. :D Theme của mình cũng được re-build từ Magazine Pro. :P

      Trả lời
      • Xuân Tĩnh đã bình luận:

        12/11/2014 lúc 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ả :))

        Trả lời
        • Trung Hieu đã bình luận:

          12/11/2014 lúc 10:14

          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

          Trả lời
          • Xuân Tĩnh đã bình luận:

            12/11/2014 lúc 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 lúc 16:10

          Ủa. Sao kỳ cục vậy trời? @@!

          Trả lời
          • Xuân Tĩnh đã bình luận:

            12/11/2014 lúc 16:13

            Tui cũng không biết. Nhưng mà sự thật nó như vậy ;)

  4. Kiên đã bình luận:

    05/02/2015 lúc 15:46

    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

    Trả lời
    • Trung Hiếu đã bình luận:

      05/02/2015 lúc 15:52

      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

      Trả lời
  5. Mã giảm giá Lazada đã bình luận:

    16/02/2016 lúc 22:21

    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.

    Trả lời
    • Trung Hiếu đã bình luận:

      17/02/2016 lúc 09:11

      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

      Trả lời
      • Mã giảm giá Lazada đã bình luận:

        17/02/2016 lúc 11:55

        Ơ sao em viết description mà nó ko hiện ra nhỉ

        Trả lời
        • Trung Hiếu đã bình luận:

          17/02/2016 lúc 12:11

          Viết hết vào các mục “Description”, “Archive Intro Text” và “Yoast SEO Settings” thử xem nào. :P

          Trả lời
  6. Mã giảm giá Lazada đã bình luận:

    18/02/2016 lúc 13:02

    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

    Trả lời
    • Trung Hiếu đã bình luận:

      18/02/2016 lúc 13:44

      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

      Trả lời
  7. Mã giảm giá Lazada đã bình luận:

    18/02/2016 lúc 13:59

    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 ạ

    Trả lời
    • Trung Hiếu đã bình luận:

      18/02/2016 lúc 14:23

      Phần Yoast SEO Settings ở dưới cùng đâu? Sao không đẩy phần mô tả vào đó?

      Trả lời
      • Mã giảm giá Lazada đã bình luận:

        18/02/2016 lúc 16:54

        Yoast nỏ có phẩn mô tả bác ơi http://sanvoucher.com/wp-content/uploads/2016/02/faaa.jpg

        Trả lời
        • Trung Hiếu đã bình luận:

          18/02/2016 lúc 16:56

          Thế cái gì nằm dưới tiêu đề và permalinks đó? :P

          Trả lời
          • Mã giảm giá Lazada đã bình luận:

            18/02/2016 lúc 20:37

            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

          • Trung Hiếu đã bình luận:

            19/02/2016 lúc 04:54

            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. :)

  8. Dương dê đã bình luận:

    27/10/2016 lúc 12:36

    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 à :(

    Trả lời
    • Trung Hiếu đã bình luận:

      27/10/2016 lúc 12:55

      Bạn bỏ text-transform: uppercase; trong đoạn css của menu đi là được mà. :P

      Trả lời
      • Dương dê đã bình luận:

        27/10/2016 lúc 13:27

        Thanks bro nha

        Trả lời
  9. Nghiệp đã bình luận:

    20/06/2017 lúc 15:36

    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!

    Trả lời
    • Trung Hiếu đã bình luận:

      20/06/2017 lúc 20:20

      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

      Trả lời
  10. Hu đã bình luận:

    16/04/2018 lúc 01:01

    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?

    Trả lời
    • Trung Hiếu đã bình luận:

      16/04/2018 lúc 08:17

      Không bạn nhé.

      Trả lời

Primary Sidebar

NHẬN BÀI VIẾT QUA EMAIL

Hãy đăng ký ngay để là người đầu tiên nhận được thông báo qua email mỗi khi chúng tôi có bài viết mới!

Theo dõi qua mạng xã hội

Dịch vụ WordPress Hosting

dich-vu-wordpress-hosting-gia-re-tot-nhat

Bạn đang tìm gì?

  • WordPress căn bản
  • Bảo mật WordPress
  • Tăng tốc WordPress
  • Sửa lỗi WordPress
  • Thủ thuật Genesis
  • Thủ thuật SEO

Dịch vụ tối ưu WordPress

dich-vu-toi-uu-website-wordpress-chat-luong-cao

Bài viết mới nhất

  • Lỗi gia hạn tự động Let’s Encrypt và cách khắc phục 19/02/2019
  • Thay thế hình ảnh trong WordPress giữ nguyên tên 16/01/2019
  • Cài đặt lại toàn bộ plugin trên website WordPress 02/01/2019
  • Hướng dẫn nâng cấp PHP 7.3 cho website WordPress 27/12/2018
  • Gỡ bỏ Gutenberg stylesheet khỏi website WordPress 24/12/2018
  • Điểm Google PageSpeed Insights liệu có còn đáng tin? 20/12/2018

Hỗ trợ quét mã độc miễn phí

quet-ma-doc-mien-phi-cho-website

Footer

Bình luận mới nhất

  • Dat Tran trong Lỗi gia hạn tự động Let’s Encrypt và cách khắc phục
  • tuyenlab trong Tạo sticky post cho category trong WordPress
  • Trung Hiếu trong Tạo sticky post cho category trong WordPress
  • tuyenlab trong Tạo sticky post cho category trong WordPress

Bình luận nhiều nhất (tháng)

  1. Chiến (3)
  2. nghiep (3)
  3. Ngô Văn Cương (3)
  4. Nguyen Huy (3)
  5. tuyenab (3)
  6. Đoàn Thái Hưng (2)

Liên kết và Đối tác

  • Quy định sử dụng
  • Chính sách bảo mật
  • Bản quyền nội dung
  • Canh Me

Thống kê WP Căn bản

10 Chuyên mục - 913 Bài viết - 31883 Bình luận

Bản quyền © 2014 - 2019 · WP Căn bản · Sử dụng Paradise child theme và dịch vụ WordPress Hosting · Bảo vệ bởi CloudFlare Pro