怎么添加自定義側邊欄？ - wordpress開發

側欄是主題的任何窗口小部件區域。小部件區域是主題中用戶可以添加自己的小部件的位置。您不需要在主題中包含側邊欄，但是包含側邊欄意味著用戶可以通過“定制程序”或“微件管理面板”將內容添加到微件區域。

小工具可用于多種目的，從列出最近的帖子到進行實時聊天。

• 官方文檔：wordpress

快速開始：

在functions.php中添加以下代碼：

function lifet_widgets_init() {
	register_sidebar( array(
		'name'          => esc_html__( '小工具', 'lifet' ),
		'id'            => 'sidebar-1',
		'description'   => esc_html__( '添加小工具到這里', 'lifet' ),
		'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', 'lifet_widgets_init' );

在需要調用的地方添加以下代碼：

<?php dynamic_sidebar( 'sidebar-1' ); ?>

自定義側邊欄：

添加下列代碼到functions.php 文件中第一個<?php 之后:

function xitou_widgets_init2() {
    register_sidebar( array(
        'name'          => esc_html__( 'Sidebar-single', 'xitou' ),
        'id'            => 'sidebar-2',
        'description'   => esc_html__( ' Sidebar of single', 'xitou' ),
        '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', 'xitou_widgets_init2' );

在主題的根目錄創建文件夾sidebar，在sidebar 文件夾內創建名為：sidebar-single.php 文件，填入下列代碼：

<?php
/**
 * 
 * Single頁的工具欄
 *
 * @link https://developer.wordpress.org/themes/basics/template-files/#template-partials
 * 
 * https://developer.wordpress.org/themes/functionality/sidebars/
 *
 * @package xitou
 */


if ( ! is_active_sidebar( 'sidebar-2' ) ) {
    return;
}
?>


<aside id="secondary" class="widget-area">
    <?php dynamic_sidebar( 'sidebar-2' ); ?>
</aside><!-- #secondary -->

在single.php 中相應位置添加下列代碼調用：

<?php dynamic_sidebar( 'sidebar/single' );?>

官方文檔：

• 添加側邊欄：官方文檔

小部件可用于多種目的，從列出最近的帖子到進行實時聊天。

注冊側邊欄

要使用側邊欄，您必須在中注冊它們functions.php。

首先，register_sidebar()?有幾個應始終定義的參數，無論它們是否被標記為可選參數。這些包括x，y和z。

• 名稱?-側邊欄的名稱。這是用戶將在“窗口小部件”面板中看到的名稱。
• id?–必須為小寫。您將使用dynamic_sidebar函數在主題中調用它。
• description-邊欄的描述。這也將顯示在管理窗口小部件面板中。
• class?–分配給小部件的HTML的CSS類名稱。
• before_widget?–每個小部件之前放置的HTML。
• after_widget?–放置在每個小部件之后的HTML。應該用來關閉中的標簽before_widget。
• before_title?–放在每個小部件標題之前的HTML，例如標頭標記。
• after_title?–每個標題之后的HTML。應該用來關閉中的標簽before_title。

要注冊側邊欄，我們使用register_sidebar和widgets_init函數。

function themename_widgets_init() {
    register_sidebar( array(
        'name'          => __( 'Primary Sidebar', 'theme_name' ),
        'id'            => 'sidebar-1',
        'before_widget' => '<aside id="%1$s" class="widget %2$s">',
        'after_widget'  => '</aside>',
        'before_title'  => '<h3 class="widget-title">',
        'after_title'   => '</h3>',
    ) );
 
    register_sidebar( array(
        'name'          => __( 'Secondary Sidebar', 'theme_name' ),
        'id'            => 'sidebar-2',
        'before_widget' => '<ul><li id="%1$s" class="widget %2$s">',
        'after_widget'  => '</li></ul>',
        'before_title'  => '<h3 class="widget-title">',
        'after_title'   => '</h3>',
    ) );
}

注冊側邊欄告訴WordPress，您正在“?外觀”>“窗口小部件”中創建一個新的窗口小部件區域，用戶可以將其窗口小部件拖動到其中。有兩個注冊邊欄的功能：

• register_sidebar（）
• register_sidebars（）

第一個讓您注冊一個側邊欄，第二個讓您注冊多個側邊欄。

建議您單獨注冊側邊欄，因為它可以為每個側邊欄賦予唯一的描述性名稱。

范例

對于頁眉和頁腳中的窗口小部件區域，將它們命名為“ Header Widget Area”和“ Footer Widget Area”，而不是“ Sidebar 1”和“ Sidebar 2”（默認設置）。這提供了有關側邊欄位置的有用描述。

添加了以下代碼以functions.php注冊邊欄：

add_action( 'widgets_init', 'my_register_sidebars' );
function my_register_sidebars() {
    /* Register the 'primary' sidebar. */
    register_sidebar(
        array(
            'id'            => 'primary',
            'name'          => __( 'Primary Sidebar' ),
            'description'   => __( 'A short description of the sidebar.' ),
            'before_widget' => '<div id="%1$s" class="widget %2$s">',
            'after_widget'  => '</div>',
            'before_title'  => '<h3 class="widget-title">',
            'after_title'   => '</h3>',
        )
    );
    /* Repeat register_sidebar() code for additional sidebars. */
}

該代碼執行以下操作：

• register_sidebar?–告訴WordPress您正在注冊邊欄
• 'name' => __( 'Primary Widget Area', 'mytheme' ),?–是在“外觀”>“小部件”中顯示的小部件區域的名稱
• 'id' => 'sidebar-1'–為邊欄分配一個ID。WordPress使用“ id”將小部件分配給特定的側邊欄。
• before_widget/?after_widget–分配給邊欄的小部件的包裝器元素。應該始終分別保留“％1 $ s”和“％2 $ s”?id，class以便插件可以使用它們。默認情況下，WordPress將這些設置為列表項，但在以上示例中，它們已更改為div。
• before_title/?after_title–小部件標題的包裝元素。默認情況下，WordPress將其設置為h2，但使用h3使其更具語義。

一旦注冊了側邊欄，便可以在主題中顯示它。

在主題中顯示側邊欄

現在您的側邊欄已注冊，您將想要在主題中顯示它們。為此，有兩個步驟：

1. 創建??sidebar.php?模板文件并使用dynamic_sidebar功能顯示側邊欄
2. 使用get_sidebar功能加載主題

創建側邊欄模板文件

側欄模板包含側欄的代碼。WordPress可以識別名稱為的文件 ??sidebar.php? 和任何模板文件sidebar-{name}.php。這意味著您可以使用每個側邊欄將其組織在自己的模板文件中。

示例：

1.建立?sidebar-primary.php

2.添加以下代碼：

<div id="sidebar-primary" class="sidebar">
    <?php dynamic_sidebar( 'primary' ); ?>
</div>

請注意，它dynamic_sidebar采用的單個參數$index，該參數可以是邊欄的名稱或ID。

加載側邊欄

要將側欄加載到主題中，請使用??get_sidebar函數。應該將其插入到要顯示邊欄的模板文件中。要加載默認值，請sidebar.php使用以下命令：

<?php get_sidebar(); ?>

要顯示主要側邊欄，請將$name參數傳遞給函數：

<?php get_sidebar( 'primary' ); ?>

顯示默認邊欄內容

如果用戶尚未向側邊欄添加任何小部件，則可能希望顯示內容。為此，您可以使用該is_sidebar_active()功能檢查邊欄是否有任何小部件。這接受$index參數，該參數應該是您要檢查的側邊欄的ID。

此代碼檢查側邊欄是否處于活動狀態，如果未激活，則顯示一些內容：

<div id="sidebar-primary" class="sidebar">
    <?php if ( is_active_sidebar( 'primary' ) ) : ?>
        <?php dynamic_sidebar( 'primary' ); ?>
    <?php else : ?>
        <!-- Time to add some widgets! -->
    <?php endif; ?>
</div>

顯示默認小部件

您可能希望默認情況下在側邊欄中填充一些小部件。例如，顯示搜索，存檔和元窗口小部件。為此，您可以使用：

</p>
<div id="primary" class="sidebar">
    <?php do_action( 'before_sidebar' ); ?>
    <?php if ( ! dynamic_sidebar( 'sidebar-primary' ) ) : ?>
        <aside id="search" class="widget widget_search">
           <?php get_search_form(); ?>
        </aside>
        <aside id="archives" class"widget">
            <h3 class="widget-title"><?php _e( 'Archives', 'shape' ); ?></h3>
            <ul>
                <?php wp_get_archives( array( 'type' => 'monthly' ) ); ?>
            </ul>
        </aside>
        <aside id="meta" class="widget">
            <h3 class="widget-title"><?php _e( 'Meta', 'shape' ); ?></h3>
            <ul>
                <?php wp_register(); ?>
                <li><?php wp_loginout(); ?></li>
                <?php wp_meta(); ?>
            </ul>
        </aside>
   <?php endif; ?>
</div>