如何向 WordPress 添加側邊欄 » 終極分步指南

創建 WordPress 網站時，您應該添加一個側邊欄作為 WordPress 網站的佈局部分之一。 在基本的 HTML 站點中創建側邊欄很簡單，因為您只需要使用側邊欄標籤 <aside> </aside> 但要向 WordPress 添加側邊欄，您需要一種不同的方法。

側邊欄模板標籤：側邊欄如何在 WordPress 中顯示

請務必記住，WordPress 使用模板標籤工作，並且使用 get_header() 函數調用頁眉，而使用 get_footer() 函數調用頁腳。 對於側邊欄，它與 get_sidebar() 模板標籤一起顯示。

可以將此模板標籤添加到您希望添加 WordPress 側邊欄的任何位置。 但在您開始顯示 WordPress 側邊欄之前，我們需要了解它是如何創建的，以便它存在於您的主題代碼中，然後您才能在模板中調用它。

在 WordPress 中添加側邊欄應該遵循兩個主要步驟； 這些步驟包括：註冊側邊欄、調用側邊欄

如何逐步向 WordPress 添加側邊欄

為了讓您成功地將新側邊欄添加到 WordPress 或在 WordPress 中創建自定義側邊欄，您需要執行以下步驟：

1. 首先，創建 WordPress 主題的備份副本
2. 從您的父 WordPress 主題創建一個子主題，子主題應該有 functions.php 文件
3. 在您的子主題的 functions.php 文件中，您將使用 register_sidebar()函數來創建側邊欄。
4. 創建 sidebar.php文件並將 dynamic_sidebar() 函數添加到該文件，邊欄的名稱如下所示 - dynamic_sidebar( 'sidebar-1' ) 其中 sidebar-1 是您在註冊邊欄時添加的邊欄的 ID。
5. 在您的主題模板文件中，您現在可以使用 get_sidebar()模板標籤調用側邊欄。
6. 如果您創建了自定義側邊欄，則可以使用dynamic_sidebar()函數來顯示自定義側邊欄。

WordPress 側邊欄剖析

要深入了解 WordPress 中側邊欄的工作原理，您需要了解側邊欄代碼如何分佈在不同的 WordPress 主題文件中。

WordPress 側邊欄功能

重要的是要知道與添加 WordPress 側邊欄相關的三個 WordPress 功能是：

• 註冊側邊欄 – register_sidebar()
• 動態側邊欄 – dynamic_sidebar()
• 獲取側邊欄 – get_sidebar()

註冊側邊欄 - 第一步

此函數 register_sidebar() 是創建側邊欄的第一個函數，它位於主題的 functions.php 文件中。

當您打開主題 functions.php 文件時，您應該會看到這個 register_sidebar() 函數註冊了主題上顯示的各種側邊欄。

就像默認的 27 個 WordPress 主題一樣，您可以在下圖中看到在該主題上註冊側邊欄的代碼：

基本上，這個功能是讓一切開始的功能

註冊側邊欄參數

寄存器側邊欄函數表示為一個函數，它接受各種參數，可以是數組或字符串的數據形式。 一般可以表示如下：

register_sidebar( array|string $args = array() )

以下是 WordPress 主題中使用的register_sidebar 函數的圖像，其中不同的參數被添加到函數調用內部傳遞的數組中：

這個 WordPress 函數有各種可以接受的參數，可以是 PHP 字符串或 PHP 數組。 論據包括：

• 名稱- 這是側邊欄的名稱或標題，它應該是一個字符串。
• ID – 這是側邊欄的唯一標識符，您將使用 dynamic_sidebar () 函數調用側邊欄。
• 描述- 這是在小部件界面中顯示的側邊欄的描述，它是一個字符串。
• Class這是一個為側邊欄添加額外的 CSS 類的參數，這將幫助您進行樣式設置。
• Before_widget – 這是在每個側邊欄輸出之前添加的 HTML 內容
• After_widget – 這是在每個側邊欄輸出後添加的 HTML 內容
• before_title這是在顯示時添加到側邊欄標題的 HTML 內容，默認通常是打開的 <h2> HTML 標記。
• After_title這是在顯示時添加到側邊欄標題的 HTML 內容，默認通常是打開的 <h2> HTML 標記。

這個函數被添加到 functions.php 文件中，它使用下面共享的動作鉤子註冊 WordPress 側邊欄：

add_action( 'widgets_init', ' njengah_tutorial_sidebars' ' );

要註冊側邊欄，我們需要掛鉤到 widgets_init 事件，並且我們有一個帶有我們選擇的名稱的回調函數，在這種情況下，我們將回調函數命名為'njengah_tutorial_sidebars'

您應該添加到您的functions.php文件以註冊側邊欄的完整代碼如下：

 <?php

//回調函數 

功能 njengah_register_sidebar_tutorial() {
	
	//註冊側邊欄功能 - https://developer.wordpress.org/reference/functions/register_sidebar/
	註冊邊欄（
		大批（
			'name' => __('Sidebar Example', 'textdomain'),
			'id' => 'sidebar-1',
			'description' => __('在此處添加小部件以顯示在博客文章和存檔頁面的側邊欄中。', 'textdomain' ),
			'before_widget' => '<section id="%1$s" class="widget %2$s">',
			'after_widget' => '</section>',
			'before_title' => '<h2 class="widget-title">',
			'after_title' => '</h2>',
		)
	);
	
} 

// 動作鉤子 

add_action('widgets_init', 'njengah_register_sidebar_tutorial');

動態側邊欄——第二步

這個函數 dynamic_sidebar() 現在調用我們在上面第一步中註冊的側邊欄，代碼放在 sidebar.php 文件或我們想要顯示我們在第一步中創建的側邊欄的任何其他文件中。

dynamic_sidebar() 函數的一般表達式如下：

dynamic_sidebar( int|string $index = 1 )

此函數採用整數或字符串參數，可以是第一步註冊側邊欄時使用的名稱或 ID 參數。

在 WordPress 的 27 個默認主題中，打開 sidebar.php 文件，會看到如下圖所示的函數 dynamic_sidebar()：

在這種情況下，您可以看到我們將register_sidebar函數的 id 參數傳遞給dynamic_sidebar函數，以便我們可以將該側邊欄顯示為默認側邊欄。 如下圖所示：

如果我們將此側邊欄註冊為自定義側邊欄，我們將使用上面的代碼顯示在任何可能包含的主題模板文件中； 頁眉、頁腳、正文等。 所以顯示側邊欄的代碼應該如下：

 <?php if ( is_active_sidebar( 'custom' ) ) : ?>
  <div id="側邊欄">
    <?php dynamic_sidebar('custom'); ?>
   </div>
<?php endif; ?>

正如您在中所見，我們使用 if 語句來驗證側邊欄是否處於活動狀態，我們在這裡使用的函數是is_active_sidebar() 。 這個函數簡單地查明在dynamic_sidebar()中傳遞的側邊欄是否正在使用中。 這是 WordPress 條件標籤之一。

獲取側邊欄 - 第三步

在需要註冊的主題中創建默認的 WordPress 側邊欄時，創建 sidebar.php 文件，最後使用get_sidebar() t模板標籤在模板中加載側邊欄。

get_sidebar 可用於在不同頁面中顯示不同的側邊欄，因為默認情況下，該函數採用一個字符串參數，該參數等效於側邊欄的名稱。 您用於註冊側邊欄或 ID 參數的名稱，如上述步驟中所述。

get_sidebar( string $name = null )

因此，如果您有一個名為“ cool-sidebar ”的側邊欄，您可以在自定義頁面模板中調用側邊欄，如下所示：

get_sidebar('cool-sidebar');

您還可以為每個頁面設置多個側邊欄，並且可以使用 if/else 語句有條件地顯示不同頁面中的每個側邊欄，就像在這段代碼中我們有三個側邊欄一樣； 一個用於主頁，另一個用於 404 和默認側邊欄：

 如果 ( is_home() ) :

      get_sidebar('home');

   elseif ( is_404() ) :

      get_sidebar('404');

   別的 ：

     get_sidebar();

萬一;

WordPress 側邊欄文件

同樣重要的是要知道添加側邊欄代碼的七個常見 WordPress 主題文件是：

• functions.php File
• sidebar.php File
• Pages Files
• Posts Files
• Custom Posts Type Files
• footer.php File
• header.php File

該代碼也可以添加到您正在註冊和顯示側邊欄小部件的插件中，例如一些最常見的 WordPress 小部件插件。

如果您是 WordPress 開發人員或WordPress 初學者，正在學習WordPress 的工作原理，了解這些文件與添加和顯示 WordPress 側邊欄相關的方式將是成為專業人士的重要一步。

側邊欄代碼如何在每個主題 WordPress 文件中工作

快速總結一下，在 WordPress 中添加側邊欄的三個功能分別放在下表所示的每個文件中：

要在 WordPress 中添加側邊欄，您應該遵循我們在本 WordPress 開發教程中概述的三個步驟，其中包括：

• 註冊 -使用 register_sidebar() 在 functions.php 中註冊側邊欄
• 調用默認側邊欄/自定義側邊欄 –在 sidebar.php 文件中調用默認側邊欄的側邊欄，或者自定義側邊欄，您可以使用 dynamic_sidebar() 在任何模板文件中調用它
• 在 WP 帖子模板中顯示側邊欄 –在頁面、帖子和自定義頁面模板和自定義帖子模板中，您可以使用 get_sidebar() 模板標籤調用側邊欄。

如何向 WordPress 代碼示例添加側邊欄

以下是如何在 WordPress 主題中添加默認側邊欄的代碼示例，我們將其命名為Njengah 教程側邊欄

註冊邊欄

第一步，我們將其註冊如下：

 /**
*註冊小部件區域。
*
* @link https://gist.github.com/Njengah/010453c11d170df9b9c8de2f31954a5d
*/

功能 njengah_register_sidebar_tutorial() {

  //註冊側邊欄功能 - https://developer.wordpress.org/reference/functions/register_sidebar/

  註冊邊欄（

        大批（
                  'name' => __('Njengah 教程側邊欄', 'textdomain' ),
                   'id' => 'njengah-sidebar-default',
                   'description' => __('在此處添加小部件以顯示在博客文章和存檔頁面的側邊欄中。', 'textdomain' ),
                   'before_widget' => '<section id="%1$s" class="widget %2$s">',
                   'after_widget' => '</section>',
                   'before_title' => '<h2 class="widget-title">',
                   'after_title' => '</h2>',
                  )
             );
    
        }

add_action('widgets_init', 'njengah_register_sidebar_tutorial');

結果將在我們的 WordPress 儀表板上的外觀 > 小部件下看到，如下圖所示：

在 Sidebar.php 文件中調用默認側邊欄

在sidebar.php 或 index文件中，我們不應按如下方式調用側邊欄：

 如果（！is_active_sidebar（'njengah-sidebar-default'））{
   返回;
}

  dynamic_sidebar('njengah-sidebar-default');

顯示側邊欄

最後，在我們的頁面模板中，我們只需使用以下代碼調用側邊欄

get_sidebar();

包起來

在這篇文章中，我們全面概述瞭如何在 WordPress 主題中添加側邊欄的分步方法。 簡要總結一下，您需要記住只有兩到三個步驟； 要在 WordPress 中添加默認側邊欄，您需要在functions.php中註冊側邊欄，創建一個 sidebar.php 文件，在其中調用您在第一步中註冊的側邊欄，並在頁面或發布模板中使用get_sidebar 函數調用默認值側邊欄。

如果要添加自定義側邊欄，則不需要最後一部分，因為您可以直接將 dynamic_sidebar() 代碼放在模板或要顯示側邊欄的文件中。 例如，在頁腳中，您通常會看到使用此函數 dynamic_sidebar() 顯示的頁腳小部件。

我希望您從本教程中學到了一些新東西，或者您已經更好地了解瞭如何在 WordPress 主題中添加側邊欄，而不必在您的 functions.php 文件中復制粘貼代碼。 如果您在這方面需要更多幫助或需要專業 WordPress 開發人員的建議，請隨時與我聯繫。