如何使用WordPress Settings API的update_option实现带文本域的下拉选项？

我会一步步帮你实现这个需求，核心是借助WordPress Settings API注册设置项、渲染关联的下拉框与文本域，再通过内置机制（无需手动重复调用update_option）完成数据保存，同时用JS控制文本域的显示隐藏逻辑。

1. 注册设置与添加后台菜单 #

首先在主题的functions.php中添加代码，完成设置项的注册和后台菜单的创建：

// 注册设置与添加后台菜单
add_action('admin_menu', 'custom_option_menu');
add_action('admin_init', 'custom_option_settings');

function custom_option_menu() {
    add_options_page(
        '自定义选项设置', // 页面标题
        '自定义选项', // 侧边栏菜单名称
        'manage_options', // 操作权限（仅管理员可访问）
        'custom-options', // 菜单唯一标识slug
        'custom_option_page_callback' // 渲染页面的回调函数
    );
}

function custom_option_settings() {
    // 注册保存选中下拉值的主选项
    register_setting(
        'custom_option_group', // 设置组名（需和表单中的settings_fields对应）
        'selected_custom_option', // 存储选中值的选项名
        array(
            'sanitize_callback' => 'sanitize_text_field', // 数据清洗，确保纯文本
            'default' => 'option-one' // 默认选中第一个选项
        )
    );

    // 注册三个文本域对应的选项（分别存储不同选项的内容）
    register_setting(
        'custom_option_group',
        'option_one_text',
        array(
            'sanitize_callback' => 'wp_kses_post', // 允许安全HTML（纯文本用sanitize_text_field）
            'default' => ''
        )
    );
    register_setting(
        'custom_option_group',
        'option_two_text',
        array(
            'sanitize_callback' => 'wp_kses_post',
            'default' => ''
        )
    );
    register_setting(
        'custom_option_group',
        'option_three_text',
        array(
            'sanitize_callback' => 'wp_kses_post',
            'default' => ''
        )
    );
}

2. 渲染设置页面（下拉框+关联文本域） #

接下来编写页面渲染的回调函数，同时嵌入JS实现文本域的显示切换：

function custom_option_page_callback() {
    // 获取已保存的设置值，没有则用默认值
    $selected_option = get_option('selected_custom_option', 'option-one');
    $option_one_text = get_option('option_one_text', '');
    $option_two_text = get_option('option_two_text', '');
    $option_three_text = get_option('option_three_text', '');
    ?>
    <div class="wrap">
        <h1>自定义选项设置</h1>
        <form method="post" action="options.php">
            <?php
            // 输出WordPress自带的安全验证字段
            settings_fields('custom_option_group');
            do_settings_sections('custom-options');
            ?>
            <table class="form-table">
                <!-- 下拉选择框 -->
                <tr valign="top">
                    <th scope="row">选择对应选项</th>
                    <td>
                        <select id="custom-select" name="selected_custom_option">
                            <option value="option-one" <?php selected($selected_option, 'option-one'); ?>>选项一</option>
                            <option value="option-two" <?php selected($selected_option, 'option-two'); ?>>选项二</option>
                            <option value="option-three" <?php selected($selected_option, 'option-three'); ?>>选项三</option>
                        </select>
                    </td>
                </tr>
                <!-- 选项一对应的文本域 -->
                <tr valign="top" class="custom-textarea-row" id="row-option-one" <?php echo $selected_option !== 'option-one' ? 'style="display:none;"' : ''; ?>>
                    <th scope="row">选项一内容</th>
                    <td>
                        <textarea name="option_one_text" rows="5" cols="50"><?php echo esc_textarea($option_one_text); ?></textarea>
                    </td>
                </tr>
                <!-- 选项二对应的文本域 -->
                <tr valign="top" class="custom-textarea-row" id="row-option-two" <?php echo $selected_option !== 'option-two' ? 'style="display:none;"' : ''; ?>>
                    <th scope="row">选项二内容</th>
                    <td>
                        <textarea name="option_two_text" rows="5" cols="50"><?php echo esc_textarea($option_two_text); ?></textarea>
                    </td>
                </tr>
                <!-- 选项三对应的文本域 -->
                <tr valign="top" class="custom-textarea-row" id="row-option-three" <?php echo $selected_option !== 'option-three' ? 'style="display:none;"' : ''; ?>>
                    <th scope="row">选项三内容</th>
                    <td>
                        <textarea name="option_three_text" rows="5" cols="50"><?php echo esc_textarea($option_three_text); ?></textarea>
                    </td>
                </tr>
            </table>
            <?php submit_button(); ?>
        </form>
        <script>
            // 监听下拉框变化，切换文本域显示状态
            document.getElementById('custom-select').addEventListener('change', function() {
                const selectedVal = this.value;
                // 先隐藏所有文本域行
                document.querySelectorAll('.custom-textarea-row').forEach(row => {
                    row.style.display = 'none';
                });
                // 显示选中选项对应的文本域行
                document.getElementById(`row-${selectedVal}`).style.display = 'table-row';
            });
        </script>
    </div>
    <?php
}

3. 关键细节说明 #

• 数据安全：所有选项都设置了sanitize_callback，确保用户输入的内容经过清洗，避免XSS等安全问题。
• 自动保存：提交表单时，WordPress Settings API会自动调用update_option保存数据，无需手动编写保存逻辑。
• 显示逻辑：页面加载时会根据已选中的选项自动显示对应文本域，切换下拉选项时通过JS实时更新显示状态。

4. 在主题/插件中调用数据 #

如果需要在前端或主题中使用这些设置值，可以这样获取：

// 获取当前选中的选项
$selected_opt = get_option('selected_custom_option');
// 根据选中值获取对应文本内容
switch($selected_opt) {
    case 'option-one':
        $content = get_option('option_one_text');
        break;
    case 'option-two':
        $content = get_option('option_two_text');
        break;
    case 'option-three':
        $content = get_option('option_three_text');
        break;
    default:
        $content = '';
}
// 输出内容（注意用wp_kses_post转义，保证安全）
echo wp_kses_post($content);

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