WordPress 侧边栏小工具

小工具介绍

WordPress 侧边栏小工具通常用在控制侧边栏显示的区块。

自 WordPress 5.8 开始，旧版小工具被古腾堡的块小工具所取代。想要从古腾堡小工具恢复到经典小工具，需要如下代码：

add_filter('gutenberg_use_widgets_block_editor', '__return_false');
add_filter('use_widgets_block_editor', '__return_false');

注册一个侧边栏 register_sidebars

function rt_widgets_init() {
    $args = array(
        'name' => __( '小工具标题', 'rt' ),
        'id' => 'sidebar-1',
        'before_widget' => '',
        'after_widget' => '',
        'before_title' => '<h4>',
        'after_title' => '</h4>',
    );
    register_sidebar($args);
}
add_action('init', 'rt_widgets_init');

注册一个小工具 register_widget

register_widget注册的部件类中最终也是调用wp_register_sidebar_widget，注册的小部件。

class TestWidget extends WP_Widget{
    function __construct(){
        $this->WP_Widget( 'my_test', '小工具标题', array( 'description' => '小工具描述' ) );
    }
 
    function widget( $args, $instance ){
        extract( $args, EXTR_SKIP );
        echo $before_widget;
        echo "<div style='width:100%;height:200px;outline:1px solid #333;'><div>小工具内容</div></div>";
        echo $after_widget;
    }
}

function rt_add_widget(){
    register_widget( 'TestWidget' );
}

add_action( 'widgets_init', 'rt_add_widget' );

输出侧边栏 dynamic_sidebar

输出注册好的侧边栏，通过索引指定输出某一个侧边栏

<?php if ( is_active_sidebar( 'sidebar-1' ) ) : ?>
    <?php dynamic_sidebar( 'sidebar-1' ); ?>
<?php endif; ?>

输出小工具 the_widget

the_widget( string $widget,  array $instance = array(),  array $args = array() )

$widget 小工具的PHP名字

WP_Widget_Archives — Archives
WP_Widget_Calendar — Calendar
WP_Widget_Categories — Categories
WP_Widget_Links — Links
WP_Widget_Meta — Meta
WP_Widget_Pages — Pages
WP_Widget_Recent_Comments — Recent Comments
WP_Widget_Recent_Posts — Recent Posts
WP_Widget_RSS — RSS
WP_Widget_Search — Search (a search from)
WP_Widget_Tag_Cloud — Tag Cloud
WP_Widget_Text — Text
WP_Nav_Menu_Widget

$instance

表示每个widget的设置，例如Archives是用dropdown菜单显示还是列表显示

$args

widget的sidebar参数，包括before_widget、after_widget、before_title和after_title

给小工具添加设置选项

class Widget_Name extends WP_Widget {
    function __construct() {
        $widget_options = array(
            'classname' => 'widget_name',
            'description' => 'Widget short description.'
        );
        parent::__construct(
            'widget_name', // 小工具ID
            'Widget Name', // 小工具名称
            $widget_options // 小工具选项
        );
    }
    // 小工具前端显示函数
    function widget($args, $instance) {}

    // 小工具设置项显示函数
    function form($instance) {}

    // 小工具设置项保存函数
    function update($new_instance, $old_instance) {}
}

小工具设置项显示函数

function form($instance) {
    $title = !empty($instance['title']) ? $instance['title'] : '';
    $text = !empty($instance['text']) ? $instance['text'] : '';
    ?>
    <p>
        <label for="<?php echo $this->get_field_id('title'); ?>">标题:</label>
        <input type="text" class="widefat" id="<?php echo $this->get_field_id('title'); ?>" name="<?php echo $this->get_field_name('title'); ?>" value="<?php echo esc_attr($title); ?>">
    </p>
    <p>
        <label for="<?php echo $this->get_field_id('text'); ?>">描述:</label>
        <textarea class="widefat" rows="2" id="<?php echo $this->get_field_id('text'); ?>" name="<?php echo $this->get_field_name('text'); ?>"><?php echo esc_html($text); ?></textarea>
    </p>
    <?php
}

小工具设置项保存函数

function update($new_instance, $old_instance) {
    $instance = array();
    $instance['title'] = (!empty($new_instance['title'])) ? strip_tags($new_instance['title']) : '';
    $instance['text'] = (!empty($new_instance['text'])) ? strip_tags($new_instance['text']) : '';
    return $instance;
}