侧边栏

最后更新：2026-10-05 15:56:51

什么是侧边栏

侧边栏是主题中任何可放置小部件（widget）的区域。小部件区域是指用户可以在其中添加自己自定义内容的地方。您无需在主题中包含侧边栏，但包含一个侧边栏意味着用户可以通过“外观 > 自定义器”或“外观 > 小部件管理面板”向这些小部件区域添加内容。

小部件可用于各种目的，从列出最近的文章到进行实时聊天等。

"侧边栏"这个名字源于过去小部件区域通常创建在博客左侧或右侧的长条区域。如今，侧边栏已经超越了其原始名称的含义。它们可以包含在网站上的任何位置。您可以将“侧边栏”理解为任何包含小部件的区域。

注册一个侧边栏

要使用侧边栏，您必须在 functions.php 文件中对其进行注册。

首先，register_sidebar() 有几个参数应该始终定义，无论它们是否被标记为可选。这些包括 x、y 和 z（注：此处原文列举了示例中的具体参数）。

name – 您为该侧边栏起的名称。这是用户在“小部件管理面板”中看到的名称。
id – 必须使用小写字母。您的主题将使用该 ID 并通过 dynamic_sidebar 函数来调用此侧边栏。
description – 对侧边栏的描述。这也会在管理界面的“小部件面板”中显示。
class – 要分配给小部件 HTML 的 CSS 类名。
before_widget – 放置在小部件之前的 HTML 代码。
after_widget – 放置在每个小部件之后的 HTML 代码。应使用它来关闭 before_widget 中的标签。
before_title – 放置在每个小部件标题之前的 HTML，例如 header 标签。
after_title – 放置在每个标题之后的 HTML。应使用它来关闭 before_title 中的标签。

要注册侧边栏，我们使用 register_sidebar 和 widgets_init 函数。

<?php
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，您正在“外观 > 小部件”中创建一个新的可拖拽小部件的区域。有两个函数可用于注册侧边栏：

第一个允许您注册一个侧边栏，而第二个允许您注册多个侧边栏。

建议您单独注册每个侧边栏，这样您就可以为每个侧边栏提供独特且描述性的名称。

示例

对于头部和脚部的小部件区域，将其命名为“Header Widget Area”（头部小部件区域）和"Footer Widget Area"（底部小部件区域），而不是默认的"Sidebar 1"和 "Sidebar 2"。这提供了关于侧边栏位置的有用描述。

以下代码添加到 functions.php 中用于注册一个侧边栏：

<?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 将这些设置为列表项（list items），但在上面的示例中已更改为 div。
before_title/after_title – 是小部件标题的包装元素。默认情况下，WordPress 将其设置为 h2，但使用 h3 使其更具语义性。

一旦您的侧边栏注册完成，您就可以在主题中显示它了。

在您的主题中显示侧边栏

现在您已经注册了侧边栏，您希望在自己的主题中显示它们。为此有两个步骤：

创建 sidebar.php 模板文件并使用 dynamic_sidebar 函数来显示侧边栏。
使用 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(); ?>

要显示“主”（Primary）侧边栏，请将 $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>

显示默认小部件

您可能希望您的侧边栏默认包含一些小部件。例如，显示搜索、归档和元数据（Meta）小部件。为此您会使用：

<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><!-- #search -->

		<aside id="archives" class"widget">
			<h3 class="widget-title"><?php _e( 'Archives', 'shape' ); ?></h3>
			<ul>
				<?php wp_get_archives( array( 'type' => 'monthly' ) ); ?>
			</ul>
		</aside><!-- #archives -->

		<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><!-- #meta -->

	<?php endif; ?>

</div><!-- #primary -->