WordPress 侧边栏小工具
番茄投手
11-22
275

小工具介绍

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;
} 
收藏 0
打赏
WordPress 调用自定义头像
上一篇
实现自定义 Ajax 请求
下一篇

发表评论

注册不是必须的

番茄投手
番茄投手
161 文章
3 评论
4 喜欢
最新文章

Mirage 主题 v3.12.0 发布

Mirage 主题 v3.12.0 发布 https://github.com/vthemecn/mirage/releases/tag/v3.12.0 https://gitee.com/vthemecn/mirage/releases/tag/v3.12.0 更新内容: feat 可设置用户将无法通过 wp-login.php 进行注册或重置密码 feat 评论层级根据系统设置,最多支持3级, […]

Mirage 主题 v3.11.0 发布

Mirage 主题 v3.11.0 发布 https://github.com/vthemecn/mirage/releases/tag/v3.11.0 https://gitee.com/vthemecn/mirage/releases/tag/v3.11.0 这个版本优化了多个地方,并且屏蔽了 /wp-json/batch/v1,防止了 2026年7月被披露了极其严重的 WordPress 高 […]

VooShop 商城主题

主题简介 Vooshop 是一个简单精美的 WordPress 主题,支持自适应、暗黑模式、多语言等功能,可以用于企业、团体、自由职业者或更广泛的主页。 Vooshop:回归 WooCommerce 的纯粹与极速 零冗余代码,零多余功能。一个完全依赖 WooCommerce 原生能力的轻量级主题。 Vooshop 不做 WooCommerce 做不到的事,我们只负责让它跑得更快。 市面上的主题总试 […]

XZhan 主题

主题简介 XZhan 主题(中文名称:小站主题)是一款 WordPress 企业主题,支持自适应、暗黑模式等功能,可快速构建高质量的企业网站。   主题特色 支持白天与暗黑模式 自适应设计,兼容多种主流浏览器 自定义主色调 LOGO扫光动画 自定义SMTP支持 内置SEO功能 文章支持点赞、分享和海报生成 丰富的小工具 侧边栏粘性滚动 简介的主题设置面板 主题设置可导入和备份 多级子菜单 […]
Generating...
扫描二维码
扫描二维码