WordPress中保存设置页面时触发函数的正确实现方式

问题背景 #

我正在开发一个简单的WordPress插件，可基于后台设置页面的配置生成CSS样式。需求是每次保存设置页面时，无论配置是否变更，都要执行CSS生成函数。但之前的尝试存在问题：

• update_option_{option}钩子：仅在指定设置项被修改时触发，配置未变更时不执行函数
• pre_update_option_{option}钩子：能触发函数，但会导致设置项无法正常保存
• admin_init钩子：函数可运行，但每次后台页面加载都会执行，不符合需求

现有代码 #

注册设置项代码 #

function geo_accessibility_admin_settings_function(){
    add_settings_section('geo-accessibility-settings', '', 'geo_accessibility_admin_settings_intro_text', 'geo_accessibility_settings');
    
    register_setting('geo-accessibility-settings', 'geo_accessibility_mode_active');
    add_settings_field('geo-accessibility-mode-active', 'Active', 'geo_accessibility_mode_active', 'geo_accessibility_settings', 'geo-accessibility-settings');
    
    register_setting('geo-accessibility-settings', 'geo_accessibility_tab_position');
    add_settings_field('geo-accessibility-tab-position', 'Tab Position', 'geo_accessibility_tab_position', 'geo_accessibility_settings', 'geo-accessibility-settings');
    
    register_setting('geo-accessibility-settings', 'geo_accessibility_tab_size');
    add_settings_field('geo-accessibility-tab-size', 'Tab Size', 'geo_accessibility_tab_size', 'geo_accessibility_settings', 'geo-accessibility-settings');
    
    register_setting('geo-accessibility-settings', 'geo_accessibility_tab_hide');
    add_settings_field('geo-accessibility-tab-hide', 'Tab Hidden', 'geo_accessibility_tab_hide', 'geo_accessibility_settings', 'geo-accessibility-settings');
    
    register_setting('geo-accessibility-settings', 'geo_accessibility_tab_colour');
    add_settings_field('geo-accessibility-tab-colour', 'Tab Colour', 'geo_accessibility_tab_colour', 'geo_accessibility_settings', 'geo-accessibility-settings');
    
    register_setting('geo-accessibility-settings', 'geo_accessibility_icon_colour');
    add_settings_field('geo-accessibility-icon-colour', 'Icon Colour', 'geo_accessibility_icon_colour', 'geo_accessibility_settings', 'geo-accessibility-settings');
}
add_action('admin_init', 'geo_accessibility_admin_settings_function');

原调用函数代码 #

function generate_options_css(){
    
    // do stuff
}
add_action('update_option_geo_accessibility_mode_active', 'generate_options_css', 10, 2);

正确实现方案 #

方法1：使用settings_errors钩子 #

settings_errors钩子会在设置页面保存完成后触发，无论配置是否有变更，都能确保执行CSS生成函数，是最贴合需求的方案。

修改后的调用代码：

function generate_options_css(){
    // 获取所有设置项
    $mode_active = get_option('geo_accessibility_mode_active');
    $tab_position = get_option('geo_accessibility_tab_position');
    $tab_size = get_option('geo_accessibility_tab_size');
    $tab_hide = get_option('geo_accessibility_tab_hide');
    $tab_colour = get_option('geo_accessibility_tab_colour');
    $icon_colour = get_option('geo_accessibility_icon_colour');
    
    // 编写CSS生成逻辑（示例）
    $css = "
        .geo-accessibility-tab {
            position: {$tab_position};
            font-size: {$tab_size}px;
            background-color: {$tab_colour};
            color: {$icon_colour};
            " . ($tab_hide ? 'display: none;' : '') . "
        }
    ";
    
    // 将CSS保存到文件或按需输出
    // file_put_contents(plugin_dir_path(__FILE__) . 'generated-accessibility.css', $css);
}
// 绑定到settings_errors钩子，确保保存设置后执行
add_action('settings_errors', 'generate_options_css');

方法2：监听设置页面提交动作 #

通过检查当前请求是否是目标设置页面的提交，精准触发函数，同时添加权限和安全验证：

function generate_options_css_on_save() {
    // 验证请求合法性
    if (isset($_POST['option_page']) && $_POST['option_page'] === 'geo-accessibility-settings' 
        && current_user_can('manage_options') 
        && check_admin_referer('geo-accessibility-settings-options')) {
        
        // 执行CSS生成逻辑
        generate_options_css();
    }
}
add_action('admin_init', 'generate_options_css_on_save');

function generate_options_css(){
    // 你的CSS生成代码（同方法1）
}

说明 #

• 方法1更简洁，无需额外验证，适合大多数场景
• 方法2更灵活，可自定义触发条件，适合需要精细控制的场景
• 两种方案都能确保只要点击保存按钮，无论配置是否变更，都会执行CSS生成函数

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