什么是WordPress 側(cè)邊欄

WordPress 側(cè)邊欄（Sidebar）是一個網(wǎng)站布局中的區(qū)域，通常位于頁面的左側(cè)或右側(cè)，但也可以位于頁面的頂部或底部。側(cè)邊欄的主要功能是展示附加內(nèi)容，提供導(dǎo)航，增強用戶體驗。它們通常包含各種小工具（Widgets），如搜索框、最近的帖子、分類目錄、標(biāo)簽云、社交媒體鏈接、廣告、日歷、和自定義HTML代碼等。

網(wǎng)站側(cè)邊欄的事例

1.維基百科

2.Elementor幫助中心

側(cè)邊欄主要功能和用途

1. 導(dǎo)航和搜索：側(cè)邊欄可以包含網(wǎng)站的導(dǎo)航菜單和搜索框，幫助用戶更輕松地找到他們感興趣的內(nèi)容。
2. 最新內(nèi)容展示：通過顯示最新的帖子、評論或熱門文章，側(cè)邊欄可以吸引用戶點擊并增加頁面瀏覽量。
3. 廣告和促銷：側(cè)邊欄是展示廣告或促銷內(nèi)容的理想位置，能夠有效地吸引用戶的注意力。
4. 社交媒體鏈接：通過在側(cè)邊欄添加社交媒體圖標(biāo)和鏈接，網(wǎng)站可以鼓勵用戶在社交平臺上分享內(nèi)容，從而增加網(wǎng)站的曝光率。
5. 自定義內(nèi)容：側(cè)邊欄可以添加自定義HTML代碼、文本或其他內(nèi)容，提供更多的個性化和功能

從 WordPress 定制器管理側(cè)邊欄

管理主題側(cè)邊欄的一個主要途徑是通過 WordPress 定制器。如果你的主題支持側(cè)邊欄和自定義功能，它們通常會在這里顯示。

具體設(shè)置的位置取決于主題，但通常需要查找“布局設(shè)置”、“常規(guī)設(shè)置”或“站點范圍設(shè)置”等選項。

例如，在使用 OceanWP 主題時，可以在常規(guī)設(shè)置中選擇不同的側(cè)邊欄配置，如右側(cè)邊欄、左側(cè)邊欄，或左右兩側(cè)都有側(cè)邊欄，還可以配置側(cè)邊欄的寬度。

如果找不到這些設(shè)置，嘗試探索 WordPress 定制器中的不同區(qū)域?；蛘?，查閱主題開發(fā)人員的支持文檔。

管理各個內(nèi)容的側(cè)邊欄

一些主題還提供頁面級設(shè)置，讓你可以控制單個帖子或頁面的側(cè)邊欄。

如果主題具備此功能，可以在使用 WordPress 編輯器時看到這些選項。它們可能會顯示在編輯器下方的元框中，或者在文檔側(cè)邊欄中。

例如，使用 OceanWP 主題時，可以在單個頁面或帖子上選擇不同的側(cè)邊欄布局。

如何將小部件添加到 WordPress 側(cè)邊欄

側(cè)邊欄是網(wǎng)站上的一個區(qū)域，但要向其中添加內(nèi)容，需要使用 WordPress 小部件。

你可以通過兩種方式將小部件添加到主題的側(cè)邊欄：

1. WordPress 定制器
2. 專用小部件區(qū)域

這兩個方法都會自動同步，所以使用任何一個都可以。使用 WordPress 定制器的優(yōu)點是，可以實時預(yù)覽小部件的效果。

通過 WordPress 定制器管理小部件

要通過 WordPress 定制器管理側(cè)邊欄小部件，請按照以下步驟操作：

1. 轉(zhuǎn)到 外觀 → 自定義。

2. 選擇 小部件 菜單選項。
3. 系統(tǒng)會提示選擇要管理的小部件區(qū)域。根據(jù)你的主題，可能只會看到一個選項，也可能會看到多個選項，包括非側(cè)邊欄區(qū)域（例如頁腳）。

4. 然后，單擊“添加小部件”按鈕開始將小部件添加到側(cè)邊欄。添加小部件后，使用側(cè)欄中的選項對其進(jìn)行配置：

添加新的小部件時，你將立即看到它們出現(xiàn)在網(wǎng)站的實時預(yù)覽中。還可以使用拖放來重新排列現(xiàn)有小部件的順序。

除了使用定制器之外，WordPress還提供了一個專門用于管理小部件的區(qū)域。你可以簡單地通過“外觀”菜單下的“小部件”選項來訪問它。

在這個區(qū)域，你可以看到所有可以添加到網(wǎng)站上的小部件，以及你的主題自帶的側(cè)邊欄區(qū)域（可能還有其他小部件區(qū)域，比如頁腳）。

要添加一個小部件到你的網(wǎng)站，你只需將它從可用小部件列表中拖放到側(cè)邊欄或其他你希望放置它的區(qū)域即可。之后，你可以通過點擊小部件的設(shè)置按鈕來進(jìn)一步自定義它的內(nèi)容，比如調(diào)整文本、選擇圖片等：

使用 Elementor 設(shè)計自定義小部件

擁有 Elementor Pro，那么設(shè)計自定義小部件并將其添加到側(cè)邊欄中會非常簡單。以下是如何使用 Elementor 的直觀界面來創(chuàng)建和添加自定義小部件的步驟：

首先，打開 WordPress 后臺，并導(dǎo)航到 Elementor 的“模板”部分，選擇“添加新項”來創(chuàng)建一個新的部分模板。這個模板可以是任何你想要展示的內(nèi)容，比如一個電子郵件訂閱表單或一個吸引人的號召性用語（CTA）。

在創(chuàng)建模板時，可以使用 Elementor 的拖放界面來輕松添加和布局各種元素，如文本、圖片、按鈕等。確保在完成設(shè)計后，點擊“發(fā)布”按鈕，將您的模板保存到庫中。

接下來，轉(zhuǎn)到想要展示這個自定義小部件的側(cè)邊欄區(qū)域。找到并添加“Elementor Library”小部件。添加后，看到一個選擇模板的下拉列表。從這個列表中，選擇剛剛創(chuàng)建的特定模板。

如何在 WordPress 中添加自定義側(cè)邊欄

在 WordPress 網(wǎng)站中添加自定義側(cè)邊欄，但你的主題沒有內(nèi)置側(cè)邊欄支持或想添加更多側(cè)邊欄，可以按照以下簡單的步驟來操作：

步驟一：注冊自定義側(cè)邊欄

首先，向 WordPress 注冊側(cè)邊欄，這樣它才會出現(xiàn)在“外觀” → “小部件”頁面中。可以通過以下兩種方式來添加代碼：

1. 編輯主題的 functions.php 文件（注意，直接編輯主題文件可能不安全，因此最好使用子主題）：
   • 創(chuàng)建一個子主題（如果還沒有的話）。
   • 在子主題的 functions.php 文件中添加注冊側(cè)邊欄的代碼。
2. 使用代碼片段插件（例如 Code Snippets、Insert Headers and Footers 插件）：
   • 安裝并激活代碼片段插件。
   • 創(chuàng)建一個新的代碼片段，并添加注冊側(cè)邊欄的代碼。

注冊側(cè)邊欄的代碼示例：

function my_custom_sidebars() {  
    register_sidebar(array(  
        'name' => '自定義側(cè)邊欄 1',  
        'id' => 'custom-sidebar-1',  
        'description' => '這是一個自定義側(cè)邊欄',  
        'before_widget' => '<div id="%1$s" class="widget %2$s">',  
        'after_widget' => '</div>',  
        'before_title' => '<h2 class="widgettitle">',  
        'after_title' => '</h2>',  
    ));  
  
    // 如果需要更多側(cè)邊欄，可以復(fù)制上面的代碼并修改 'name'、'id' 和其他參數(shù)  
}  
add_action( 'widgets_init', 'my_custom_sidebars' );

步驟二：在前端顯示側(cè)邊欄

注冊了側(cè)邊欄，需要在前端模板文件中（例如 header.php、sidebar.php、footer.php 或單頁面模板文件）調(diào)用它，以便在網(wǎng)站上顯示側(cè)邊欄。這通常涉及到使用 dynamic_sidebar() 函數(shù)和適當(dāng)?shù)臈l件判斷。

例如，在 sidebar.php 文件中：

<?php if ( is_active_sidebar( 'custom-sidebar-1' ) ) : ?>  
    <aside id="secondary" class="widget-area" role="complementary">  
        <?php dynamic_sidebar( 'custom-sidebar-1' ); ?>  
    </aside>  
<?php endif; ?>

這段代碼會檢查名為 ‘custom-sidebar-1’ 的側(cè)邊欄是否包含活動的小部件，如果包含，則顯示該側(cè)邊欄。

按照以上步驟操作后，就可以在“外觀” → “小部件”頁面中看到新的側(cè)邊欄，并可以向其中添加小部件了。

如何使用 Elementor 創(chuàng)建側(cè)邊欄

要使用 Elementor 顯示自定義側(cè)邊欄，需要創(chuàng)建一個新的帖子或頁面模板，其中包含側(cè)邊欄以及主要內(nèi)容區(qū)域。

首先，轉(zhuǎn)到模板 → 主題生成器。然后，選擇首先添加側(cè)邊欄的位置 – Single Post或Single Page：

你可以選擇預(yù)制模板之一?；蛘咄耆珡念^開始構(gòu)建你的設(shè)計。最簡單的選擇是僅選擇已包含側(cè)邊欄的模板之一：

然后，編輯側(cè)邊欄小部件并使用選擇側(cè)邊欄下拉列表選擇在上一步中注冊的自定義側(cè)邊欄。

完成此操作后，應(yīng)該會看到已添加的所有小部件的實時預(yù)覽：

要完成任務(wù)，確保發(fā)布模板。執(zhí)行此操作時，可以使用顯示條件來控制側(cè)邊欄模板的顯示位置。將其顯示在所有內(nèi)容上（以在整個網(wǎng)站范圍內(nèi)使用側(cè)邊欄）?；蛘呤褂蔑@示規(guī)則僅將側(cè)邊欄添加到特定內(nèi)容。

如果你習(xí)慣使用 HTML、CSS 或 PHP，可以用代碼添加側(cè)邊欄。否則，建議你使用 Elementor 方法。

要在 WordPress 中通過代碼顯示自定義側(cè)邊欄，需要直接編輯主題的模板文件。由于這是在直接修改主題，因此使用子主題非常重要，這樣可以防止更新主題時覆蓋你的更改。

關(guān)于子主題的創(chuàng)建和使用，可以參考WordPress 子主題綜合指南。

創(chuàng)建子主題后，將父主題文件夾中的 single.php 文件復(fù)制到子主題文件夾中。然后，編輯子主題中的 single.php 文件，并在你希望顯示自定義側(cè)邊欄的位置添加以下代碼片段：

<?php get_sidebar(); ?>

如何刪除 WordPress 中的側(cè)邊欄

如何刪除不想使用的側(cè)邊欄。例如，你的主題自帶了一個側(cè)邊欄，但你希望部分或所有內(nèi)容使用全寬模板。

要刪除 WordPress 中的側(cè)邊欄，你有兩種選擇：

1. 使用 Elementor Pro
2. 使用代碼

在使用這些方法之前，先檢查你的主題是否有內(nèi)置功能可以禁用側(cè)邊欄。許多主題在 WordPress 自定義器中提供了選項，可以禁用側(cè)邊欄，無需手動操作?；蛘?，主題可能自帶全寬模板，可以在使用 WordPress 編輯器時選擇。

如果你的主題沒有這些選項，按以下步驟手動刪除側(cè)邊欄。

使用 Elementor 刪除側(cè)邊欄

要使用 Elementor 刪除 WordPress 側(cè)邊欄，你需要創(chuàng)建一個不包含側(cè)邊欄區(qū)域的模板。具體步驟如下：

1. 創(chuàng)建模板：前往“模板” → “主題生成器”，選擇要刪除側(cè)邊欄的位置，例如單篇文章或單頁。
2. 全局應(yīng)用：如果你希望在整個網(wǎng)站上刪除側(cè)邊欄，可以使用這個模板覆蓋所有內(nèi)容。
3. 局部應(yīng)用：如果只想在某些頁面刪除側(cè)邊欄，可以在需要的地方選擇無側(cè)邊欄的模板。

完成后，可以發(fā)布模板并使用顯示條件來控制其顯示的位置。

使用代碼刪除 WordPress 側(cè)邊欄

你可以通過直接編輯主題的模板文件來刪除 WordPress 側(cè)邊欄。具體步驟如下：

1. 使用子主題：由于需要編輯主題文件，請確保使用子主題。這樣可以防止更新主題時覆蓋你的更改。
2. 復(fù)制模板文件：將需要刪除側(cè)邊欄的模板文件（如 single.php、archive.php 等）從父主題復(fù)制到子主題文件夾中。
3. 編輯模板文件：打開這些文件，刪除所有類似 <?php get_sidebar(); ?> 的代碼段（代碼可能有些許不同，但基本上都是調(diào)用側(cè)邊欄的）。
4. 調(diào)整 HTML 和 CSS：根據(jù)需要調(diào)整 HTML 和 CSS 代碼，確保頁面布局正確。

如何在不同的內(nèi)容上顯示不同的側(cè)邊欄

之前我們討論了如何在 WordPress 中添加側(cè)邊欄，即使你的主題不支持它。但如果你想在不同的內(nèi)容上顯示不同的側(cè)邊欄，該怎么辦？這可以讓你為不同類型的內(nèi)容顯示不同的小部件集合。

例如，你可能希望在“評論”類別的博客文章中使用一組小部件，而在“教程”類別的博客文章中使用另一組小部件。

使用 Elementor 顯示不同的側(cè)邊欄

這是最簡單的方法，你可以按以下步驟操作：

1. 創(chuàng)建模板：首先，創(chuàng)建多個 Elementor 模板，每個模板包含自己的側(cè)邊欄。
2. 設(shè)置條件：然后，轉(zhuǎn)到條件設(shè)置，將每個模板分配給相關(guān)的類別、頁面或其他條件。

使用內(nèi)容感知側(cè)邊欄插件

另一種方法是使用免費的“內(nèi)容感知側(cè)邊欄”插件。安裝并激活插件后，按照以下步驟操作：

1. 添加新側(cè)邊欄：轉(zhuǎn)到“Content Aware → Add New”。
2. 設(shè)置條件：選擇你想要替換默認(rèn)側(cè)邊欄的條件。例如，如果你想將此側(cè)邊欄用于“評論”類別中的所有博客文章，創(chuàng)建一個類別條件。

3. 轉(zhuǎn)到“操作”選項卡并選擇要替換的側(cè)邊欄?；蛘?，您也可以“合并”側(cè)邊欄以包含兩者的內(nèi)容：

4. 做出選擇后，單擊“創(chuàng)建”。然后，轉(zhuǎn)到外觀 → 小部件以將內(nèi)容添加到條件側(cè)邊欄：

總結(jié)：

通過使用Elementor或代碼，你可以為不同內(nèi)容類型設(shè)置不同的小部件集合，還可以使用內(nèi)容感知側(cè)邊欄插件來實現(xiàn)更高級的自定義。無論是通過WordPress定制器還是手動編輯模板文件，本指南提供了全面的步驟和方法，適合各種用戶需求。

聯(lián)系我們
教程看不懂？聯(lián)系我們?yōu)槟赓M解答！免費助力個人，小企站點！	客服微信
① 電話：020-2206-9892
② QQ咨詢：1025174874
③ 郵件：info@361sale.com
④ 工作時間：周一至周五，9:30-18:30，節(jié)假日休息