常见博客网页布局，其左侧区域，如下图。被称为侧边栏【Sidebars】。侧边栏不限于在左侧，也可在右边，或网站的任意位置。下图侧边栏内容分为三部分，分别是【站内搜索、分类、近期文章】，这三个部分称为小部件【Widgets】。

在wordpress中，要使用侧边边栏功能，相关步骤为：1：注册侧边栏。2：注册小部件。3：在侧边栏中添加小部件。4：相关函数调用实现。

◆ 注册侧边栏

function xshen_widgets_init2() {
    register_sidebar(
        array(
            'name'          => esc_html__( 'primary', 'xshen' ),
            'id'            => 'primary',
            'description'   => esc_html__( 'Add widgets2 here.', 'xshen' ),
            'before_widget' => '<section id="%1$s" class="widget-block %2$s"><div class="widget-card">',
            'after_widget'  => '</div></section>',
            'before_title'  => '<h2 class="widget-title">',
            'after_title'   => '</h2>',
        )
    );
}
add_action( 'widgets_init', 'xshen_widgets_init2' );

其中，<section id=”%1$s” class=”widget-block %2$s”>，%1$s 表示第一个要被替换的参数，%2$s 表示第二个要被替换的参数。方便在不同的场景下生成具有不同 ID 和类名的小部件 HTML 结构。机制大致如下：

$before_widget = '<section id="%1$s" class="widget %2$s">';
$widget_id = 'custom_recent_posts_widget-2';
$widget_class = 'widget-custom-recent-posts';

$html = sprintf($before_widget, $widget_id, $widget_class);
echo $html;

最终生成的 $html 内容为

<section id="custom_recent_posts_widget-2" class="widget widget - custom - recent - posts">

◆ 注册小部件

<?php
// \wp-content\themes\xshen\inc\widgetcustom-search-widget.php
// 创建搜索小部件类
class Custom_Search_Widget extends WP_Widget {
    public function __construct() {
        parent::__construct(
            'custom_search_widget',
            __('自定义-文章搜索', 'xshen'),
            array('description' => __('A custom search widget', 'xshen'))
        );
    }

    public function widget($args, $instance) {
        echo $args['before_widget'];
        if (!empty($instance['title'])) {
            echo $args['before_title'] . apply_filters('widget_title', $instance['title']) . $args['after_title'];
        }
        ?>
        <form role="search" method="get" id="searchform" action="<?php echo home_url('/'); ?>">
            <div class="widget-card">
                <div class="widget-title">
                    <label class="screen-reader-text" for="s">站内搜索</label>
                </div>
                <div class="line-flex">
                    <input class="search" type="search" value="<?php the_search_query(); ?>" name="s" id="s"/>
                    <input type="submit" id="searchsubmit" value="Search"/>
                </div>
            </div>
        </form>
        <?php
        echo $args['after_widget'];
    }

    public function form($instance) {
        $title = !empty($instance['title']) ? $instance['title'] : __('站内搜索', 'xshen');
        ?>
        <p>
            <label for="<?php echo $this->get_field_id('title'); ?>">
                <?php _e('Title:'); ?>
            </label>
            <input class="widefat"
                   id="<?php echo $this->get_field_id('title'); ?>"
                   name="<?php echo $this->get_field_name('title'); ?>"
                   type="text"
                   value="<?php echo esc_attr($title); ?>">
        </p>
        <?php
    }
    public function update($new_instance, $old_instance) {
        $instance = array();
        $instance['title'] = (!empty($new_instance['title'])) ? strip_tags($new_instance['title']) : '';
        return $instance;
    }
}

<?php
require get_template_directory().'/inc/widget/custom-search-widget.php';
require get_template_directory().'/inc/widget/custom-category-widget.php';
require get_template_directory().'/inc/widget/custom-recent-posts-widget.php';
function register_custom_widgets() {
    register_widget('Custom_Search_Widget');
    register_widget('Custom_Category_Widget');
    register_widget('Custom_Recent_Posts_Widget');
}
add_action('widgets_init', 'register_custom_widgets');

其中，register_widget 函数接收一个小部件类的名称，WordPress 核心代码会在合适的时机创建类（如： Custom_Search_Widget ）的实例，并且管理这些实例的生命周期。

◆ 在侧边栏中添加小部件

后台进入【仪表板->菜单->小工具】，进行选择侧边栏添加小部件。

◆ 相关函数调用实现

创建sidebar-primary.php模板文件，代码如下：

<?php

if (!is_active_sidebar('primary')) {
    return;
}
?>
<aside id="secondary" class="widget-area">
    <? php dynamic_sidebar('primary'); ?>
</aside>

调用模板文件，代码如下：

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

其中get_sidebar(‘primary’)中【primary】要和【sidebar-primary.php】模板文件名的【primary】一致，才会被自动识别。

get_sidebar 函数调用侧边栏模板文件时，会按照一定规则来查找文件。用 get_sidebar( ‘primary’ ); 时，WordPress 会先尝试查找 sidebar-primary.php 文件，如果该文件存在就引入它；若不存在，就会引入默认的 sidebar.php 文件。

其中， sidebar-primary.php里，可以直接用dynamic_sidebar( ‘primary’ )调用小部件，也可以直接在该文件里代码编写，分别实现（如：站内搜索、显示文章分类以及展示近期文章）的功能，在页面上呈现出类似小部件的效果。但和标准小部件相比，无法在后台管理界面配置。