WordPress自定义器单选框选项实时显示对应设置方案问询

原代码问题分析 #

• 依赖get_theme_mod()获取单选值，只能拿到已发布保存的设置，无法获取自定义器中当前选中的未提交值
• 控件的添加逻辑在customize_register钩子中，该钩子仅在自定义器初始化时执行一次，切换单选选项不会重新触发，必须发布并刷新才会加载对应控件
• transport设为refresh会强制刷新自定义器页面，但依然依赖已保存的值，无法实现实时预览

修复后的完整实现代码 #

1. 修改functions.php中的PHP代码 #

function customize_pro($wp_customize){
    // 添加设置面板
    $wp_customize->add_section('Select_txt_radio', array(
        'title' => esc_html__('Show or hide settings', 'section'),
        'priority' => 5,
    ));  

    // 主单选框设置
    $wp_customize->add_setting( 'setting_radio_main', 
        array( 
            'type'       => 'theme_mod', 
            'transport'  => 'postMessage', // 改为postMessage，避免页面刷新
            'default'    => 'ptionNon' // 设置默认值
        ) 
    );

    $wp_customize->add_control('setting_radio_main', 
        array(
            'type' => 'radio',
            'label' => esc_html__('Available options'),
            'description' => esc_html__('By selecting each option, the corresponding settings will appear'),
            'section' => 'Select_txt_radio',
            'priority' => 1,
            'choices' => array(
                'ption1' => 'ption A',
                'ption2' => 'ption B',
                'ption3' => 'ption C',
                'ptionNon' => 'Default' // 新增默认选项，对应默认控件
            ),
        )
    );

    // 一次性添加所有选项对应的控件，不再动态判断
    // 选项A对应的文本控件
    $wp_customize->add_setting( 'setting_radio_ption1', 
        array( 
            'type'       => 'theme_mod', 
            'transport'  => 'postMessage',
        ) 
    );
    $wp_customize->add_control( 'setting_radio_ption1',
        array(
            'section' => 'Select_txt_radio',
            'type' => 'text',
            'input_attrs' => array(
                'placeholder' => __( 'ption1' ),
            ),
            'label' => esc_html__('Option A Settings'),
        )
    );

    // 选项B对应的文本控件
    $wp_customize->add_setting( 'setting_radio_ption2', 
        array( 
            'type'       => 'theme_mod', 
            'transport'  => 'postMessage',
        ) 
    );
    $wp_customize->add_control( 'setting_radio_ption2',
        array(
            'section' => 'Select_txt_radio',
            'type' => 'text',
            'input_attrs' => array(
                'placeholder' => __( 'ption2' ),
            ),
            'label' => esc_html__('Option B Settings'),
        )
    );

    // 选项C对应的文本控件
    $wp_customize->add_setting( 'setting_radio_ption3', 
        array( 
            'type'       => 'theme_mod', 
            'transport'  => 'postMessage',
        ) 
    );
    $wp_customize->add_control( 'setting_radio_ption3',
        array(
            'section' => 'Select_txt_radio',
            'type' => 'text',
            'input_attrs' => array(
                'placeholder' => __( 'ption3' ),
            ),
            'label' => esc_html__('Option C Settings'),
        )
    );

    // 默认选项对应的文本控件
    $wp_customize->add_setting( 'setting_radio_ptionNon', 
        array( 
            'type'       => 'theme_mod', 
            'transport'  => 'postMessage',
        ) 
    );
    $wp_customize->add_control( 'setting_radio_ptionNon',
        array(
            'section' => 'Select_txt_radio',
            'type' => 'text',
            'input_attrs' => array(
                'placeholder' => __( 'default' ),
            ),
            'label' => esc_html__('Default Settings'),
        )
    );
}
add_action( 'customize_register', 'customize_pro' );

// 注册自定义器JS脚本
function customize_load_custom_scripts() {
    wp_enqueue_script(
        'customize-radio-controls',
        get_template_directory_uri() . '/js/customize-radio-controls.js', // 脚本路径，根据主题结构调整
        array( 'customize-controls', 'jquery' ),
        wp_get_theme()->get('Version'),
        true
    );
}
add_action( 'customize_controls_enqueue_scripts', 'customize_load_custom_scripts' );

2. 创建自定义JS文件 #

在主题目录下创建js/customize-radio-controls.js文件，添加以下代码：

jQuery(document).ready(function($) {
    // 获取自定义器对象
    var api = wp.customize;

    // 初始隐藏所有选项控件
    function hideAllOptionControls() {
        api.control('setting_radio_ption1').container.hide();
        api.control('setting_radio_ption2').container.hide();
        api.control('setting_radio_ption3').container.hide();
        api.control('setting_radio_ptionNon').container.hide();
    }

    // 根据选中值显示对应控件
    function showActiveControl(selectedValue) {
        hideAllOptionControls();
        if (api.control('setting_radio_' + selectedValue)) {
            api.control('setting_radio_' + selectedValue).container.show();
        }
    }

    // 初始化时显示默认控件
    showActiveControl(api('setting_radio_main').get());

    // 监听主单选框的变化
    api('setting_radio_main', function(value) {
        value.bind(function(newVal) {
            showActiveControl(newVal);
        });
    });
});

关键说明 #

• 所有控件提前添加，通过JS控制显示/隐藏，避免依赖customize_register的初始化逻辑
• 主单选框和子控件的transport都设为postMessage，确保操作不会触发页面刷新
• JS监听自定义器的设置变化事件，实时响应单选框的切换，无需发布或刷新即可看到对应控件

内容的提问来源于stack exchange，提问作者Wp-PHP