如何在WordPress中刪除側邊欄


您是否要從WordPress網站中刪除邊欄? 邊欄是WordPress主題中的小部件就緒區域。

它通常出現在每頁的右側或左側。

在本文中,我們將向您展示如何輕鬆地在WordPress中刪除側邊欄。

如何在WordPress中刪除側邊欄

為什麼要在WordPress中刪除邊欄?

大多數免費和付費的WordPress主題都帶有多個補充工具欄或小部件就緒區域。

WordPress邊欄的目的是顯示不屬於帖子或頁面內容的項目。 通常,這些是指向您網站的不同區域的鏈接,廣告,電子郵件列表註冊表單,社交媒體資料或您希望人們看到的任何其他鏈接。

這些項目可以使用WordPress小部件輕鬆添加到主題的側邊欄。

WordPress驅動的網站上的側欄

在大多數WordPress主題中,當用戶從移動設備查看您的網站時,邊欄會以不同的方式顯示。 由於減小了屏幕尺寸的寬度,因此出現在桌面右側或左側的側邊欄被移動到了移動屏幕的底部。

側邊欄非常有用,可以幫助您發展業務。 查看這些WordPress側邊欄技巧以獲取最大效果。

但是,某些網站所有者認為刪除側邊欄有助於改善用戶體驗。 如果您要刪除WordPress網站上的側邊欄,那麼本教程適合您。

影片教學

訂閱WPBeginner

如果您不喜歡該視頻或需要更多說明,請繼續閱讀。

使用WordPress主題設置刪除邊欄

許多最好的WordPress主題都帶有內置的設置來刪除邊欄。 根據您的主題,您可以在整個網站上將其刪除,也可以將它們從單個帖子或頁面中刪除。

您可以通過編輯單個帖子或頁面來確定主題是否具有此選項。

在右列中,您將看到刪除邊欄的選項。 例如,如果您使用的是Astra WordPress主題,則將看到以下內容。

使用主題設置刪除邊欄

某些主題可能具有選擇單個帖子或頁面模板(包括全角模板)的選項。 您會在右列的頁面屬性部分下找到選擇模板的選項。

全寬頁面模板

某些主題還允許您從主題選項中選擇側邊欄佈局。 您可以在下面找到這些選項 外觀»定制 頁。

使用主題設置刪除WordPress側邊欄

根據您的主題,這些選項的位置和外觀可能會有所不同。 找到設置後,您將能夠立即看到您的更改顯示在實時預覽中。

在退出主題定制器之前,請不要忘記發布更改。

請記住,某些WordPress主題可能根本沒有此功能。 在這種情況下,請繼續閱讀,我們將向您展示其他刪除WordPress側邊欄的方法。

在WordPress中從任何地方刪除側邊欄

使用此方法,您可以簡單地從每個頁面中刪除側邊欄,並將其發佈在WordPress網站上。 它還要求您編輯WordPress主題文件。 因此,如果您以前沒有做過,請參閱有關如何在WordPress中復制和粘貼代碼的指南。

請記住,如果直接編輯WordPress主題文件,則更新主題時這些更改將消失。 這就是為什麼您需要創建一個子主題來保存更改的原因。

首先,您需要使用FTP客戶端連接到WordPress網站,然後轉到/ wp-content / themes / your-current-theme /文件夾。

WordPress主題由不同的模板組成,因此您將需要編輯顯示側邊欄的所有模板。 要找到文件,請參閱我們的WordPress模板層次結構指南。

例如,在典型的WordPress主題中,您可能需要編輯index.php,page.php,single.php,archive.php,home.php等。

打開模板文件進行編輯,然後找到如下所示的行:


如果您的主題帶有多個側邊欄,那麼您將在函數內看到帶有側邊欄名稱的此代碼的不同實例。 例如:


刪除代表您不想顯示的側邊欄的行。

現在,保存文件並將其上傳回您的WordPress託管帳戶。 對負責在您的網站上顯示不同頁面的所有模板文件重複此過程。

完成後,您可以訪問您的網站並查看其運行情況。

您可能會注意到,邊欄消失後,內容區域仍以相同的寬度顯示,而邊欄區域為空。

WordPress主題中的空白邊欄區域

那是因為您的主題的內容區域具有定義的寬度。 現在邊欄消失了,您需要通過向主題添加自定義CSS來調整內容區域的寬度。

首先,您將需要弄清楚主題使用的CSS類來定義內容區域的寬度。 您可以通過使用瀏覽器中的檢查工具來執行此操作。

這是我們在演示站點上使用的樣本CSS,使用了二十十六歲主題。

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

.content-area .site {
margin:0px;
}

沒有側邊欄的外觀如下:

從WordPress主題中刪除邊欄

從WordPress的單個頁面中刪除邊欄

您可能只想刪除某些頁面上的側邊欄,而將其顯示在網站的其他部分。

例如,許多網站在其博客頁面上顯示側邊欄,但在各個博客文章上不顯示側邊欄。 有些人喜歡在靜態頁面之外的任何地方顯示側邊欄。

如果您要創建自定義登錄頁面或銷售頁面,那麼我們建議您使用諸如SeedProd之類的WordPress登錄頁面插件,因為它使您無需編寫任何代碼即可使用自定義登錄頁面(使用拖放界面)。

話雖如此,讓我們看一下不同的場景以及如何從不同的區域刪除側邊欄。

從WordPress中的靜態頁面刪除側邊欄

正如我們前面提到的,許多WordPress主題都帶有即用型全角頁面模板。 這些模板可與WordPress中的任何靜態頁面一起使用,並且不會在內容的兩側顯示側邊欄。

您只需要編輯要刪除側邊欄的頁面,然後在“頁面屬性”元框下選擇全角模板。

全寬頁面模板

如果您沒有選擇模板的選項,則表明您的主題沒有全角頁面模板。

在這種情況下,您將需要手動創建全角頁面模板。 打開諸如記事本之類的純文本編輯器,並將以下代碼粘貼到空白文件中:


現在,在桌面上將此文件另存為full-width.php。

使用FTP客戶端連接到WordPress網站,然後轉到/ wp-content / themes / your-current-theme /文件夾。 編輯名為page.php的文件,並複制之後出現的所有內容 線。

現在,將此代碼粘貼到您的full-width.php文件中。 之後,您需要找到並刪除如下所示的行:


保存更改,並將full-width.php文件上傳到當前主題文件夾。

現在,您可以在WordPress網站上編輯任何頁面,並且可以選擇全角頁面模板。

有關更多詳細信息,請參見有關如何在WordPress中創建全寬頁面模板的指南。

從WordPress中的單個帖子中刪除邊欄

就像頁面一樣,WordPress還內置了對帖子模板的支持。

如果要從某些單個帖子中刪除側邊欄,則可以創建一個自定義的單個帖子模板。 這類似於創建全角頁面模板。

首先,您需要使用文本編輯器(如記事本)創建新的模板文件。 接下來,您需要將以下代碼複製並粘貼到該文件中:


該代碼定義了一個名為Featured Article的新模板,並使其可用於帖子,頁面和產品帖子類型。

您可以在桌面上將此文件另存為wpb-single-post.php。

接下來,您需要使用FTP客戶端將其上傳到當前的WordPress主題文件夾。

現在,您可以編輯網站上的任何單個帖子,並且您會注意到新的“帖子屬性”元框帶有選擇模板的選項。

單帖模板

您可以按照指南中概述的步驟操作,該步驟介紹如何在WordPress中創建自定義單個帖子模板。

在自定義的單個帖子模板中,您需要做的就是確保刪除代碼的側邊欄部分。

如果您想更好地控製網站的佈局,可以使用一些很棒的頁面構建器。

使用Page Builder插件刪除側邊欄

如果您只想從幾頁中刪除側邊欄,則可以使用WordPress頁面構建器插件,例如Beaver Builder或Divi。

這些拖放頁面構建器附帶了可以使用的模板,您可以使用它們來創建自定義頁面佈局。 您還可以使用空白模板並從頭開始設計一個模板。

在本教程中,我們將使用Beaver Builder,但是大多數頁面構建器幾乎相同。

首先,您需要安裝並激活Beaver Builder插件。 有關分步教程,請參閱有關如何安裝WordPress插件的指南。

激活後,只需編輯要編輯的帖子或頁面,然後啟動Beaver Builder編輯器。

啟動Beaver Builder

Beaver Builder附帶了幾個可以使用的模板。 您還可以通過簡單地在頁面中添加模塊,行和元素來製作自己的佈局。

選擇一個模板

有關更多詳細說明,請參閱有關如何使用Beaver Builder創建自定義WordPress佈局的教程。

我們希望本文能幫助您學習如何輕鬆刪除WordPress主題中的側邊欄。 您可能還希望查看有關如何提高WordPress速度和性能的分步指南,以及我們對最佳電子郵件營銷服務以增加流量和銷售量的比較。

如果您喜歡這篇文章,請訂閱我們的YouTube頻道WordPress視頻教程。 您也可以在找到我們 推特 和Facebook。