WordPress 侧边栏小工具
像素鱼丸
11-22
85
0

小工具介绍

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

发表评论

像素鱼丸
147 文章
0 评论
4 喜欢
最新文章

详解 WordPress 的评论设置

好的,我们来详细梳理并总结 WordPress 中关于文章评论的两个核心控制层级:全局设置和单篇设置。理解这两者的关系(优先级)是管理网站评论的关键。 1. 全局设置 (Global Settings) —— 网站的“默认规则” 这是整个网站评论系统的总开关和默认行为准则。它决定了新发布的文章默认是什么样子的。 位置:WordPress 后台仪表盘 -> 设置 (Settings) -> […]

wp_handle_comment_submission 函数

wp_handle_comment_submission() 是 WordPress 中用于处理评论提交的核心函数之一。它通常在用户提交评论时被调用,负责验证和处理评论数据,并最终将评论插入到数据库中。 ✅ 函数作用 wp_handle_comment_submission() 的主要功能是: 验证用户提交的评论数据(如评论内容、用户名、邮箱等) 检查是否为垃圾评论(通过 Akismet 或其他过 […]

Mirage 主题 v2.89.0 发布

Mirage 主题 v2.89.0 发布 feat 懒加载图片增加灰色背景颜色 refactor 移除一些无用的js文件 fix 优化卡片列表样式 feat 如果设置里删除logo,就直接显示网站名称 fix 修复pc下拉菜单宽度的一个样式bug fix 修复未登录用户取消喜欢时产生的一个错误 fix 优化 wp_vt_star 表结构 下载地址:https://gitee.com/vthemec […]

WordPress set_transient()使用方法和实现

set_transient() 是 WordPress 中用于设置临时数据的函数,它允许你将数据存储在缓存中,这些数据会在指定的时间后自动过期。它是 WordPress 提供的 transient API 的一部分,常用于缓存数据库查询、API 响应或其他计算密集型操作的结果。 一、基本概念 1. 什么是 Transient? Transient 是 WordPress 中的一种缓存机制,类似于 […]
生成中...
扫描二维码
扫描二维码
用户登录