WordPress小工具复选框选中值无法保存：如何编写正确的update()函数？

你这个问题我之前也碰到过！核心是三个地方没处理好：表单字段的命名规则、选中状态的回显，还有update函数里的保存逻辑。我给你一步步修正：

1. 修正复选框的name属性 #

WordPress小工具的表单字段必须用$this->get_field_name('字段标识')来生成name，而且因为是多选，要加[]让它变成数组，这样提交时才能传递多个选中值。比如把原来的name='the_pages'改成name="<?php echo $this->get_field_name('selected_pages'); ?>[]"

2. 回显已选中的状态 #

在form函数里，要从$instance里取出之前保存的选中页面数组，然后判断当前循环的页面是否在这个数组里，给input加上checked属性。

3. 完善update函数的保存逻辑 #

需要对提交的selected_pages数组做 sanitize，确保数据安全，同时保留标题的处理逻辑。

修改后的完整代码 #

class Foo_Widget extends WP_Widget {
    /** Register widget with WordPress.*/
    function __construct() {
        parent::__construct(
            'foo_widget', // Base ID
            esc_html__( 'Widget Title', 'text_domain' ), // Name
            array( 'description' => esc_html__( 'A Foo Widget', 'text_domain' ), ) // Args
        );
    }

    /*** Front-end display of widget.*/
    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'];
        }
        // 示例：展示选中的页面列表
        if ( !empty( $instance['selected_pages'] ) ) {
            echo '<ul>';
            foreach( $instance['selected_pages'] as $page_title ) {
                echo '<li>' . esc_html( $page_title ) . '</li>';
            }
            echo '</ul>';
        }
        echo $args['after_widget'];
    }

    /*** Back-end widget form.*/
    public function form( $instance ) {
        // 获取已保存的选中页面，默认空数组
        $selected_pages = ! empty( $instance['selected_pages'] ) ? $instance['selected_pages'] : array();
        $mypages = get_pages( array( 'sort_column' => 'post_date', 'sort_order' => 'desc' ) );
        
        foreach( $mypages as $page ) {
            $title = $page->post_title;
            $slug = $page->post_name;
            // 判断当前页面是否被选中
            $is_checked = in_array( $title, $selected_pages ) ? 'checked' : '';
            ?>
            <p>
                <label for="<?php echo $slug; ?>">
                    <input type='checkbox' 
                           name='<?php echo $this->get_field_name('selected_pages'); ?>[]' 
                           id='<?php echo $slug; ?>' 
                           value='<?php echo esc_attr( $title ); ?>'
                           <?php echo $is_checked; ?>>
                    <?php echo esc_attr( $title ); ?>
                </label>
            </p>
            <?php
        }
        // 补充标题输入框（之前代码缺失）
        $title = ! empty( $instance['title'] ) ? $instance['title'] : esc_html__( 'New title', 'text_domain' );
        ?>
        <p>
            <label for="<?php echo $this->get_field_id( 'title' ); ?>"><?php esc_attr_e( 'Title:', 'text_domain' ); ?></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
    }

    /*** Sanitize widget form values as they are saved.*/
    public function update( $new_instance, $old_instance ) {
        $instance = array();
        // 处理标题字段
        $instance['title'] = ( !empty( $new_instance['title'] ) ) ? sanitize_text_field( $new_instance['title'] ) : '';
        // 处理选中的页面数组，做安全过滤
        if ( isset( $new_instance['selected_pages'] ) ) {
            $instance['selected_pages'] = array_map( 'sanitize_text_field', $new_instance['selected_pages'] );
        } else {
            $instance['selected_pages'] = array();
        }
        return $instance;
    }
}

// register Foo_Widget widget
function register_foo_widget() {
    register_widget( 'Foo_Widget' );
}
add_action( 'widgets_init', 'register_foo_widget' );

额外说明 #

• 我在widget函数里加了展示选中页面的示例，你可以根据需求调整展示样式
• 补上了之前缺失的标题输入框，确保title字段能正常保存和显示
• 所有用户输入都做了安全过滤，符合WordPress的开发规范

内容的提问来源于stack exchange，提问作者aivakha