Diều Hâu
Kho theme & plugin bản quyền cho WordPress
  • WordPress
    • Plugin
    • Theme
    • Hướng Dẫn
    • Thủ Thuật
  • Công Nghệ
    • Điện thoại
    • Internet
    • Máy tính
  • Marketing
  • MMO
  • SEO
No Result
View All Result
  • WordPress
    • Plugin
    • Theme
    • Hướng Dẫn
    • Thủ Thuật
  • Công Nghệ
    • Điện thoại
    • Internet
    • Máy tính
  • Marketing
  • MMO
  • SEO
No Result
View All Result
Diều Hâu
No Result
View All Result
Home Thiết kế / Lập trình WordPress Thủ Thuật

Hướng dẫn loại bỏ Sidebar trong WordPress

22/09/2020
in Thủ Thuật
16

Mục Lục

  1. Tại sao phải loại bỏ Sidebar trong WordPress?
  2. Loại bỏ sidebar ở bất cứ chỗ nào trên WordPress
  3. Xóa sidebar trong khỏi các trang cá nhân trong WordPress
  4. Loại bỏ sidebar khỏi một trang tĩnh trong WordPress
  5. Loại bỏ sidebar khỏi trang bài viết blog trong WordPress
  6. Xoá sidebar khỏi một bài viết đơn trong WordPress

Bạn có muốn xóa sidebar khỏi trang WordPress của mình không? Sidebar là vùng có sẵn widget trong theme WordPress của bạn. Nó thường xuất hiện ở bên phải hoặc bên trái hoặc bên dưới khu vực nội dung trên mỗi trang. Trong bài này, chúng tôi sẽ chỉ cho bạn cách để dễ dàng loại bỏ sidebar trong WordPress.

Tại sao phải loại bỏ Sidebar trong WordPress?

Hầu hết các Theme WordPress miễn phí và trả phí đều đi kèm với Sidebar hoặc các Widget có sẵn.

Mục đích của các sidebar trong WordPress là để hiển thị các mục không phải là một phần của nội dung bài đăng hoặc trang. Thông thường đây là các đường link đến các khu vực khác nhau của website, quảng cáo, biểu mẫu đăng ký danh sách email, Social Profile, v.v … Các mục này có thể dễ dàng được thêm vào sidebar của một theme bằng các widget WordPress.

Trong hầu hết các theme WordPress, sidebar xuất hiện khác nhau khi người dùng xem trang web của bạn từ thiết bị di động. Do chiều rộng thu gọn của kích thước màn hình, các sidebar xuất hiện ở bên phải hoặc trái trên máy tính để bàn được di chuyển xuống dưới cùng trên màn hình di động.

sidebar rất hữu ích và có thể giúp bạn phát triển doanh nghiệp.

Tuy nhiên, một số chủ trang web cảm thấy rằng việc xoá sidebar sẽ giúp cải thiện trải nghiệm người dùng. Nếu bạn đang tìm cách xóa sidebar trên trang web WordPress của mình thì hướng dẫn này là dành cho bạn.

Loại bỏ sidebar ở bất cứ chỗ nào trên WordPress

Phương pháp này cho phép bạn đơn giản loại bỏ các sidebar từ mọi trang và bài viết trên trang WordPress của bạn. Nó đòi hỏi bạn phải chỉnh sửa các tập tin theme WordPress.

Trước tiên, bạn cần phải kết nối với web WordPress bằng một FTP client và sau đó chuyển đến /wp-content/themes/your-current-theme/folder.

Các theme WordPress được tạo thành từ các template khác nhau, do đó bạn sẽ cần phải chỉnh sửa tất cả các template khi một sidebar được hiển thị.

Ví dụ: trong một theme WordPress điển hình, bạn có thể cần phải chỉnh sửa các file như index.php, page.php, single.php, archive.php, home.php, hoặc sidebar.php

Hãy mở một tệp template để chỉnh sửa và xác định vị trí dòng code giống như sau:

<?php get_sidebar(); ?>

Nếu theme của bạn đi kèm với nhiều sidebar thì bạn sẽ thấy các trường hợp khác nhau của code này với một tên sidebar. Ví dụ:

<?php get_sidebar('footer-widget-area'); ?>

Hãy xóa dòng đại diện cho sidebar mà bạn không muốn hiển thị.

Bây giờ hãy lưu và tải tệp lên trang web của mình. Hãy lặp lại quá trình cho tất cả các tệp template chịu trách nhiệm hiển thị các trang khác nhau trên website của bạn.

Sau khi hoàn tất, bạn có thể vào trang web của mình và xem nó đang hoạt động như thế nào.

Bạn sẽ nhận thấy rằng mặc dù sidebar đã biến mất nhưng khu vực nội dung vẫn xuất hiện với cùng chiều rộng và khiến cho khu vực sidebar bị trống.

Đó là bởi vì theme của bạn đã xác định chiều rộng cho khu vực nội dung. Bây giờ sidebar đã biến mất, bạn cần phải điều chỉnh chiều rộng của vùng nội dung bằng cách thêm custom CSS vào theme.

Đầu tiên, bạn cần phải tìm ra class CSS được sử dụng bởi theme của mình để xác định chiều rộng của vùng nội dung. Bạn có thể làm điều đó bằng cách sử dụng công cụ Kiểm tra trong trình duyệt.

Dưới đây là đoạn CSS chúng tôi sử dụng trên trang thử nghiệm của mình trên theme Twenty Sixteen.

.content-area {
    width: 100%;
    margin: 0px;
    border: 0px;
    padding: 0px;
}
 
.content-area .site {
margin:0px;
}

Nó sẽ trông như thế này nếu không có sidebar:

Xóa sidebar trong khỏi các trang cá nhân trong WordPress

Có thể bạn chỉ muốn xóa các sidebar trên các trang nhất định mà vẫn muốn hiển thị chúng trên các phần khác của trang web.

Ví dụ: rất nhiều website hiển thị sidebar trên blog của họ chứ không phải trên các bài đăng trên blog cá nhân. Một số thích hiển thị các sidebar ở mọi nơi trừ các trang tĩnh.

Chúng ta hãy cùng xem xét các kịch bản khác nhau và cách để loại bỏ các sidebar từ các khu vực khác nhau.

Loại bỏ sidebar khỏi một trang tĩnh trong WordPress

Nhiều theme WordPress đi kèm với các template trang chiều rộng đầy đủ sẵn sàng để sử dụng. Các template này có thể được sử dụng với bất kỳ trang tĩnh nào trong WordPress và không hiển thị các sidebar ở cả hai bên của nội dung.

Bạn sẽ chỉ cần chỉnh sửa trang muốn xóa sidebar và chọn template toàn bộ chiều rộng dưới hộp meta ‘Page Attributes’.

Nếu bạn không nhìn thấy một tùy chọn để chọn một template thì điều này có nghĩa là theme của bạn không có template trang toàn chiều rộng.

Trong trường hợp đó, bạn sẽ phải tạo một template trang toàn chiều rộng theo cách thủ công. Hãy mở một trình soạn thảo văn bản đơn thuần như Notepad và dán code sau đây vào một tệp trống:

<?php /* * Template Name: Full-Width */ get_header(); ?>

Bây giờ hãy lưu tệp này dưới dạng full-width.php trên màn hình của bạn.

Hãy kết nối với trang WordPress của bạn bằng cách sử dụng một FTP client và đi tới / wp-content / themes / your-current-theme / folder.

Hãy chỉnh sửa tệp tin có tên page.php và sao chép mọi thứ xuất hiện sau dòng < Php get_header (); >.

Bây giờ hãy dán code này vào tệp width.php đầy đủ của bạn. Sau đó bạn cần xác định vị trí và xóa dòng giống như sau:

<?php get_sidebar(); ?>

Hãy lưu thay đổi và tải lên tệp tin full-width.php vào thư mục theme hiện tại.

Bây giờ bạn có thể chỉnh sửa bất kỳ trang nào trên trang WordPress của mình và bạn sẽ có thể chọn template trang có chiều rộng đầy đủ.

Loại bỏ sidebar khỏi trang bài viết blog trong WordPress

WordPress cho phép bạn sử dụng một trang tĩnh và một trang riêng cho các bài đăng blog. Thông thường hầu hết các theme WordPress đều hiển thị sidebar trên trang bài đăng trên blog.

Nếu không muốn hiển thị sidebar trên trang bài đăng trên blog, thì bạn cần chuyển đến trang Settings » Reading. Hãy chú ý dùng tên trang bạn đang sử dụng làm trang đăng bài trên blog.

Bây giờ đi tới Pages » All Pages và chỉnh sửa trang được sử dụng để hiển thị các bài đăng blog. Trong phần thuộc tính trang, hãy chọn template toàn chiều và sau đó lưu các thay đổi lại.

Nếu không nhìn thấy tùy chọn template có chiều rộng đầy đủ, thì bạn sẽ phải tự tạo mẫu toàn chiều. Hãy xem phần trước trong bài viết này để biết hướng dẫn chi tiết.

Xoá sidebar khỏi một bài viết đơn trong WordPress

Nếu bạn muốn xóa sidebar khỏi một số bài đăng nhất định, thì hãy tạo một custom single post template

Trong custom single post template, bạn chỉ cần loại bỏ phần sidebar của code thôi.

Chúng tôi hy vọng bài viết này đã giúp bạn tìm hiểu cách để có thể dễ dàng loại bỏ sidebar trong các theme WordPress.

Nếu thích bài viết này, hãy đăng ký kênh Youtube của chúng tôi để xem các video hướng dẫn về WordPress. Bạn cũng có thể tìm thấy chúng tôi trên Twitter và Facebook.

Tags: sidebarwordpress sidebar

Related Posts

Cách thêm hình ảnh vào Sidebar Widget trong WordPress
Hướng Dẫn

Cách thêm hình ảnh vào Sidebar Widget trong WordPress

07/08/2018
Làm thế nào để hiển thị Sidebar khác nhau trên mỗi Post và Page
Thủ Thuật

Làm thế nào để hiển thị Sidebar khác nhau trên mỗi Post và Page

22/09/2020
Ưu Nhược Điểm Việc Sử Dụng Sidebar Trêng WordPress
Thủ Thuật

Ưu Nhược Điểm Việc Sử Dụng Sidebar Trêng WordPress

22/09/2020
12 Thủ Thuật Về WordPress Sidebar Để Nhận Kết Quả Tối Đa
Thủ Thuật

12 Thủ Thuật Về WordPress Sidebar Để Nhận Kết Quả Tối Đa

22/09/2020
Next Post
Làm thế nào để sử dụng Rich Snippets trong WordPress

Làm thế nào để sử dụng Rich Snippets trong WordPress

Đăng ký
Thông báo về
guest
guest
16 Bình Luận
Inline Feedbacks
View all comments

quốc khánh
quốc khánh
04/07/2018 11:33 sáng

Em chào anh ạ.

Anh ơi, them best của mythemeshop thì chỉnh CSS như thế nào để ở Homepage là full chiều rộng ạ. Em làm theo hướng dẫn của anh thì xóa sidebar ở Homepage được nhưng chiều rộng thì vẫn thế. (Homepage em để chế độ Last post ạ)

Em cám ơn anh!

0
Trả lời
Diều Hâu
Diều Hâu
Quản trị viên
Trả lời  quốc khánh
05/07/2018 8:44 sáng

Bạn xóa sidebar bằng cách nào nhỉ. Nếu bạn đã xóa được sidebar với widget rồi thì thêm đoạn CSS sau nhé:

.latestPost {
padding: 0;
clear: both;
width: max-content;
}

0
Trả lời
Lin
Lin
25/03/2019 1:19 chiều

Chào bạn, bạn chỉ mình chỉnh CSS cho them mh-magazine-lite với đi, mình không biết cách nào cho nó full chiều rộng được nua,

0
Trả lời
Diều Hâu
Diều Hâu
Quản trị viên
Trả lời  Lin
25/03/2019 1:53 chiều

website bạn là gì nhỉ? Để mình ngó qua chút.

0
Trả lời
Lin
Lin
Trả lời  Diều Hâu
25/03/2019 4:27 chiều

Bạn xem giúp mình page này nhé: http://linvietnam.com/lin/chuong-trinh-khoi-nghiep-ben-vung-gan-voi-trach-nhiem-xa-hoi/

0
Trả lời
Diều Hâu
Diều Hâu
Quản trị viên
Trả lời  Lin
25/03/2019 4:42 chiều

bạn copy đoạn code này bào trong theme của bạn nhé

.mh-content {
width: 100% !important;
}

1
Trả lời
Lin
Lin
Trả lời  Diều Hâu
25/03/2019 5:00 chiều

Thanks bạn nhiều nhé!

0
Trả lời
Ý Nhân
Ý Nhân
25/02/2020 7:46 chiều

e đã làm các bước theo anh rồi ạ, mà tới đoạn điều chỉnh chiều rộng cho khu vực nội dung thì e không hiểu làm sao
anh xem qua website của e được không ạ
https://khaisangskillex.com/

0
Trả lời
Diều Hâu
Diều Hâu
Quản trị viên
Trả lời  Ý Nhân
26/02/2020 12:24 chiều

Bạn dùng mojomarketplace ak

0
Trả lời
Ý Nhân
Ý Nhân
Trả lời  Diều Hâu
26/02/2020 12:27 chiều

Mình dùng theme entreprenuer của theme shop

0
Trả lời
Ý Nhân
Ý Nhân
Trả lời  Ý Nhân
27/02/2020 5:24 chiều

mình dùng theme Entrepreneurship by MyThemeShop

0
Trả lời
Ý Nhân
Ý Nhân
Trả lời  Ý Nhân
27/02/2020 5:57 chiều

đây là nguyên file style.css của website mình. giúp mình với ạ
https://drive.google.com/file/d/1XmBAqVNPvASKs9CrwbOJf_dZT3FsUeRh/view?usp=sharing

0
Trả lời
Duy
Duy
03/03/2020 4:16 chiều

Nếu mình chỉ muốn ẩn sidebar trên điện thoại nhưng trên máy tính vẫn có thì làm thế nào bạn giúp mình với. Ví dụ như bài viết này của mình https://luatnqh.vn/thu-tuc-ly-hon-thuan-tinh/

0
Trả lời
Diều Hâu
Diều Hâu
Quản trị viên
Trả lời  Duy
03/03/2020 5:12 chiều

Ý bạn là mấy cái quảng cáo đó bên phải của bạn hả.

0
Trả lời
Duy
Duy
Trả lời  Diều Hâu
03/03/2020 8:54 chiều

Đúng rồi cái sidebar bên phải ấy. Mình muốn trên máy tính thì vẫn có, còn trên điện thoại thì nó không có cái sidebar đó nữa

0
Trả lời
Diều Hâu
Diều Hâu
Quản trị viên
Trả lời  Duy
03/03/2020 11:16 chiều

Làm được đó nhưng sẽ phức tạp hơn 🙂

0
Trả lời

Bạn Cần Hỗ Trợ Về

Viết Blog

Bảo Mật

Sửa Lỗi

Tăng Tốc

SEO

Bán Hàng

Xem Nhiều Nhất

Huong-dan-su-dung-WordPress

Hướng dẫn sử dụng WordPress cho người mới (Chi tiết từ A->Z)

26/09/2020
Loi-thuong-gap-trong-wordpress

25 lỗi thường gặp nhất trong WordPress và cách sửa chúng

21/09/2020
Cách khắc phục lỗi không kết nối được cơ sở dữ liệu

Cách khắc phục lỗi không kết nối được cơ sở dữ liệu

22/09/2020
Plugin-hay-nhat-cho-WordPress

20 Plugin tốt nhất phải có trên mọi website WordPress (2021)

03/03/2021
Hướng dẫn sửa lỗi Troubleshooting

Hướng dẫn khắc phục lỗi WordPress cho người mới bắt đầu

22/09/2020

Series Nổi Bật

Thủ thuật WooCommerce Thủ thuật WooCommerce Thủ thuật WooCommerce
Website đa ngôn ngữ Website đa ngôn ngữ Website đa ngôn ngữ

VPS Khuyên Dùng

VPS khuyên dùng VPS khuyên dùng VPS khuyên dùng
  • Liên hệ
  • Sitemap
  • Chính sách bảo mật
  • Điều khoản sử dụng

© 2021 Diều Hâu - Tạp chí công nghệ cho mọi người

No Result
View All Result
  • WordPress
    • Plugin
    • Theme
    • Hướng Dẫn
    • Thủ Thuật
  • Công Nghệ
    • Điện thoại
    • Internet
    • Máy tính
  • Marketing
  • MMO
  • SEO

© 2021 Diều Hâu - Tạp chí công nghệ cho mọi người

wpDiscuz
Comment Author Info
:wpds_smile::wpds_grin::wpds_wink::wpds_mrgreen::wpds_neutral::wpds_twisted::wpds_arrow::wpds_shock::wpds_unamused::wpds_cool::wpds_evil::wpds_oops::wpds_razz::wpds_roll::wpds_cry::wpds_eek::wpds_lol::wpds_mad::wpds_sad::wpds_exclamation::wpds_question::wpds_idea::wpds_hmm::wpds_beg::wpds_whew::wpds_chuckle::wpds_silly::wpds_envy::wpds_shutmouth: