WordPress移除側邊欄圖文教學

WordPress移除側邊欄圖文教學

無論免費主題還是付費的專業主題,大部分預設佈局都會有一個側邊欄。但側邊欄並非適合每一個站點,有時候我們可能需要移除它,該怎麼做?

可以使用多種方法從整個網站或僅從特定內容中刪除WordPress側邊欄,本文我們將會詳細探索這幾種方法:

為什麼刪除WordPress網站側邊欄

側邊欄在WordPress設計中極為常見。通常位於主頁面內容的右側或左側,少數主題還可能顯示在頁面底部。

WordPress側邊欄通常包含“小工具”,它們是出現在網站每個頁面上的小內容區域。站長常常在側邊欄掛放CTA功能,例如電子郵件訂閱和搜尋欄:

側欄小工具示例

側欄小工具示例

有些網站甚至使用側邊欄展示導航選單。這種做法對於使用者體驗來說是非常友好的,因為使用者可以快速查詢網站的所有內容:

側邊欄設定導航選單示例

側邊欄設定導航選單示例

另外,側邊欄也是站長設定廣告的熱門位置。側邊欄廣告能夠保證廣告本身高度可見,同時又不影響網站內容的可讀性:

側邊欄廣告示例

側邊欄廣告示例

既然側邊欄為站長帶來如此多的便利,似乎沒有理由要將邊欄移除。儘管可以將多種轉換內容合併到側邊欄小工具中,但這樣做也有其缺點。

其一,主要內容區域之外的所有內容都會分散網站使用者的注意力。例如,如果部落格上有一個側邊欄,側邊欄上一些引人注目的小工具,會分散訪客對部落格文章的注意力。

其二,在某些情況下,側邊欄可能影響到網站的整體視覺效果。將側邊欄新增到內容豐富的網站(例如新聞聚合和線上雜誌)會讓使用者覺得雜亂無章,不知所措。另一方面,將其刪除可讓網站設計保持整潔且易於理解。

最後,邊欄在移動網站上並不是特別有用。對於大多數響應主題,在移動裝置上會將側邊欄移到頁面底部。隨著移動網際網路的日益龐大,依賴於側邊欄的設計可能不再是理想的選擇。

如何移除WordPress側邊欄

大多數主題預設佈局中使用側邊欄功能,如果您更喜歡沒有側邊欄的WordPress網站,您可以根據自己情況和偏好使用以下四種方法。

1. 完全移除WordPress網站側邊欄

如果您想完全刪除網站的側邊欄,則需要編輯主題。在開始刪除側邊欄之前,強烈建議您備份站點,以防萬一出問題。還有更好的一種辦法即考慮使用子主題,因為對子主題進行操作不會對主題本身作任何改變。

確保完全之後,即可開始對主題檔案進行修改。可以使用FTP客戶端(例如FileZilla )來執行,或者,從WordPress儀表板中編輯檔案。

直接在WordPress儀表盤操作,可以通過“外觀>主題編輯器”,在開始編輯主題檔案前一般會提醒您:

主題編輯器警告

主題編輯器警告

單擊“我瞭解”按鈕,並記住進行更改時要非常小心。然後,您需要找到每個主題的模板檔案。這些是您的主題儲存有關如何顯示某些型別的內容(例如文章,頁面和產品)的資訊的位置。

每個主題中可能有幾個模板,檔名稱可能包括 index.php,single.php,archive.php等,您需要逐個編輯。開啟檔案後,查詢類似於以下程式碼的一行程式碼:

Plain text
Copy to clipboard
Open code in new window
EnlighterJS 3 Syntax Highlighter
<?php get_sidebar ('sidebar-name'); ?>
<?php get_sidebar ('sidebar-name'); ?>
<?php get_sidebar ('sidebar-name'); ?>

只需刪除括號中的程式碼(在本例中為“sidebar-name”),即可從該模板中刪除側邊欄。然後,重複此過程,直到您刪除了整個主題中的程式碼。

完成此步驟後,主題可能會在側邊欄的原處保出很大的空白,整個網站的外觀變得非常彆扭,如下所示:

移除側邊欄後WordPress網站示例

移除側邊欄後WordPress網站示例

這是因為即使側邊欄消失了,但為側邊欄預留的樣式依然是在的。需要使用自定義CSS來更改內容區域的定義寬度,並且因主題而異。修改主題樣式檔案可能需要專業的前端技術人員,建議您找懂這塊技術的朋友或者付點錢請個技術幫忙。

2. 刪除WordPress靜態頁面側邊欄

在某些情況下,您可能希望在網站的某些地方使用邊欄,而在某些地方又不使用。要從單個靜態頁面(如“主頁”,“關於”或“部落格”頁面)中刪除側邊欄,首先需要檢查主題是否包含Full Width模板。

為此,編輯需要刪除側欄的頁面。在“頁面屬性” 部分中,在“模板” 下拉選單中查詢Full Width選項:

檢查可用模板

檢查可用模板

如果有可用的Full Width模板,只需選擇它並更新頁面即可刪除側邊欄。如果您的主題不包含此功能,則可以建立自己的模板。

首先在文字編輯器中建立一個新檔案,並將其命名為fullwidth.php 或類似名稱。

然後訪問主題的page.php 檔案。複製此檔案中的所有程式碼,並將其貼上到新的fullwidth.php 檔案中。在PHP開始標籤之後,新增如下檔名:

Plain text
Copy to clipboard
Open code in new window
EnlighterJS 3 Syntax Highlighter
<?php
/*
* Template Name: Fullwidth Template
*/
get_header(); ?>
<?php /* * Template Name: Fullwidth Template */ get_header(); ?>
<?php
 /* 
* Template Name: Fullwidth Template 
*/ 
get_header(); ?>

之後,找到並刪除以下程式碼:

Plain text
Copy to clipboard
Open code in new window
EnlighterJS 3 Syntax Highlighter
<? php get_sidebar ('side-name') ?>
<? php get_sidebar ('side-name') ?>
<? php get_sidebar ('side-name') ?>

儲存更改,然後通過FTP將新模板上載到主題或子主題的資料夾中。現在,您的網站頁面應具有Fullwidth模板選項。

3. 移除某一文章頁面側邊欄

如果您要建立不帶側邊欄的單個部落格文章,則首先要檢查您的主題是否像頁面一樣提供full-width模板選項。一些頁面編輯器如Elementor還提供此功能:

full-width文章模板示例

full-width文章模板示例

如果您的主題沒有類似模板,且沒有使用頁面編輯器,則仍然可以通過建立自己的單個帖子模板來獲得無側邊欄的文章。

此過程與建立頁面模板非常相似。首先建立一個新的文字檔案並新增以下程式碼:

Plain text
Copy to clipboard
Open code in new window
EnlighterJS 3 Syntax Highlighter
<?php
/*
* Template Name: Featured Article
* Template Post Type: post, page, product
*/
get_header(); ?>
<?php /* * Template Name: Featured Article * Template Post Type: post, page, product */ get_header(); ?>
<?php

/*

* Template Name: Featured Article

* Template Post Type: post, page, product

*/

get_header();  ?>

然後, 通過FTP或WordPress主題編輯器訪問主題的single.php檔案。將複製get header行下方所有內容,並將其貼上到新模板的文字檔案中。

有了工作基礎之後,您就可以自定義文章模板了。

首先刪除側邊欄程式碼,就像我們在本文中列出的其他方法中所做的一樣。然後,您可以根據需要使用自定義CSS進行其他更改,也可以直接儲存檔案。確保將檔案命名為具有紀念意義和描述性的名稱,以便將來輕鬆查詢。

最後,使用SFTP將新模板上傳到主題或子主題的資料夾。您所命名的模板選項(因此在上面的示例中,“精選文章”)將出現在每個文章的“文章屬性部分的“模板”下拉選單中。

4. 使用外掛移除WordPress側邊欄

如果自定義編碼你並不在行,或者擔心編輯主題檔案會導致出現差錯,則還可以使用外掛來刪除WordPress側邊欄。

第一個選擇是 Content Aware Sidebars

Content Aware Sidebar外掛

Content Aware Sidebar外掛

該外掛可以完全控制側邊欄小工具。例如,您可以為網站的不同區域建立特定的側邊欄。此外,允許在任何文章或頁面上隱藏或顯示側邊欄。

Simple Page Sidebars外掛則提供更直接的方法:

Simple Page Sidebar 外掛

Simple Page Sidebar 外掛

對於那些想要從某些頁面刪除WordPress側邊欄並在其他頁面上合併自定義側邊欄的人,Content Aware Sidebar外掛可能就沒那麼好用了。Simple Page Sidebars外掛提供了類似的控制,而沒有了那些不必要功能。

如果您僅僅希望刪除WordPress網站的側邊欄,則 Widget Disable外掛可能更適合您:

Widget Disable外掛

Widget Disable外掛

使用此外掛,只需單擊幾下即可刪除邊欄和儀表板小工具。它既簡單又精簡,並且除了移除側邊欄之外,無需對側邊欄進行任何更改,它可以是一個很好的便捷方法。

小結

儘管側邊欄具有許多有用的特性,但在某些情況下,WordPress側邊欄會分散網站內容,使頁面混亂,並在移動端影響網站的質量。當然,在許多WordPress主題中仍然很重要,因此,我們應該根據實際情況,考慮是否需要移除側邊欄。

您可以使用以下四種方法來移除WordPress側邊欄:

  1. 通過編輯主題檔案,完全移除WordPress側邊欄。
  2. 通過建立頁面模板,移除靜態頁面邊欄。
  3. 使用自定義文章模板建立沒有邊欄的單個文章。
  4. 使用外掛刪除WordPress側邊欄。

評論留言