开发带单选按钮的WordPress自定义小工具：选中状态保存求助

嘿，我来帮你搞定这个单选按钮的保存问题！WordPress小工具的配置项保存主要靠update()方法配合form()里的表单设置，我给你写个完整的示例代码，你可以直接参考：

class Example_Widget extends WP_Widget {

    // 小工具构造函数
    public function __construct() {
        parent::__construct(
            'example_widget', // 小工具唯一ID
            '示例小工具', // 小工具名称
            array( 'description' => '带有单选按钮配置的小工具' ) // 描述
        );
    }

    // 前端显示小工具内容
    public function widget( $args, $instance ) {
        // 获取保存的选项，默认选中第一个
        $selected_option = isset( $instance['selected_option'] ) ? $instance['selected_option'] : 'option1';
        
        echo $args['before_widget'];
        echo $args['before_title'] . '我的小工具' . $args['after_title'];
        
        // 这里可以根据选中的选项显示不同内容
        echo '<p>当前选中的选项：' . esc_html( $selected_option ) . '</p>';
        
        echo $args['after_widget'];
    }

    // 后台配置表单
    public function form( $instance ) {
        // 获取已保存的选项，默认值设为option1
        $selected_option = isset( $instance['selected_option'] ) ? $instance['selected_option'] : 'option1';
        
        // 定义单选按钮选项组
        $options = array(
            'option1' => '选项一',
            'option2' => '选项二',
            'option3' => '选项三'
        );
        ?>
        <p>
            <label for="<?php echo esc_attr( $this->get_field_id( 'selected_option' ) ); ?>">选择一个选项：</label><br>
            <?php foreach ( $options as $value => $label ) : ?>
                <input type="radio" 
                       id="<?php echo esc_attr( $this->get_field_id( $value ) ); ?>"
                       name="<?php echo esc_attr( $this->get_field_name( 'selected_option' ) ); ?>"
                       value="<?php echo esc_attr( $value ); ?>"
                       <?php checked( $selected_option, $value ); ?>>
                <label for="<?php echo esc_attr( $this->get_field_id( $value ) ); ?>"><?php echo esc_html( $label ); ?></label><br>
            <?php endforeach; ?>
        </p>
        <?php
    }

    // 保存配置项到数据库
    public function update( $new_instance, $old_instance ) {
        $instance = $old_instance;
        
        // 验证并保存单选按钮值：确保提交的值是我们定义的选项之一
        $allowed_options = array( 'option1', 'option2', 'option3' );
        if ( isset( $new_instance['selected_option'] ) && in_array( $new_instance['selected_option'], $allowed_options ) ) {
            $instance['selected_option'] = sanitize_text_field( $new_instance['selected_option'] );
        } else {
            // 如果提交了非法值，恢复默认值
            $instance['selected_option'] = 'option1';
        }
        
        return $instance;
    }
}

// 注册小工具
function register_example_widget() {
    register_widget( 'Example_Widget' );
}
add_action( 'widgets_init', 'register_example_widget' );

关键要点说明： #

• 表单字段命名：单选按钮的name属性必须用$this->get_field_name('selected_option')，这样WordPress会自动为每个小工具实例生成唯一的字段名（比如widget-example_widget[1][selected_option]），避免多个小工具实例之间的冲突。
• 选中状态保持：用checked( $selected_option, $value )函数来自动标记当前保存的选项为选中状态，这个是WordPress的内置函数，非常方便。
• 数据验证与安全：在update()方法里，我们通过in_array()检查提交的值是否在允许的选项列表中，同时用sanitize_text_field()过滤值，确保存入数据库的内容是安全合法的，避免恶意输入。
• 默认值设置：不管是在form()还是update()里，都设置了默认选项option1，这样即使是第一次使用小工具，也不会出现空值的情况。

你可以把这段代码放到你的主题functions.php文件里，或者自定义插件中，然后到后台外观->小工具里添加这个示例小工具，测试一下单选按钮的保存和显示效果，应该就能解决你的问题啦！

内容的提问来源于stack exchange，提问作者Dale-A