显示特定于单选选项的设置

Question

我想创建一个条件，以便通过从收音机中选择一个选项，将显示特定于该选项的设置。

我搜索了很多这个主题，但找不到任何有用的东西，所以我写了下面的简单代码。

这段代码几乎可以工作，即通过选择一个单选选项并刷新整个屏幕，将显示所需选项的设置的实时预览。

有没有办法在选择单选选项后立即显示其设置，这样我就不必每次选择单选选项时都刷新完整的实时预览屏幕？

我放入

functions.php

文件中的代码：

function customize_pro($wp_customize){

$wp_customize->add_section('Select_txt_radio', array(
    'title' => esc_html__('Show or hide settings', 'section'),
    'priority' => 5,
 ));  
    

// Create a radio controller
    
$wp_customize->add_setting( 'setting_radio_main', 
 array( 
     
    'type'       => 'theme_mod', 
    'transport'  => 'refresh',
 ) 
);

    
$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',
        ),
    )
);
    
    

// By selecting any option, the following terms apply
    
$select_control = get_theme_mod( 'setting_radio_main' );  // Radio configuration ID
    
  if( $select_control === 'ption1' ) { 

// Display the following settings if you select the first option
      
$wp_customize->add_setting( 'setting_radio_ption1', 
 array( 
     
    'type'       => 'theme_mod', 
    'transport'  => 'refresh',
 ) 
);
    

$wp_customize->add_control( 'setting_radio_ption1',
   array(
     
      'section' => 'Select_txt_radio',
      'type' => 'text',
      'input_attrs' => array(
         'placeholder' => __( 'ption1' ),
      ),
       
   )
);
      
return;
      
  } elseif( $select_control === 'ption2' ) {
      
// Display the following settings if you choose the second option
      
$wp_customize->add_setting( 'setting_radio_ption2', 
 array( 
     
    'type'       => 'theme_mod', 
    'transport'  => 'refresh',
 ) 
);
    

$wp_customize->add_control( 'setting_radio_ption2',
   array(
     
      'section' => 'Select_txt_radio',
      'type' => 'text',
      'input_attrs' => array(
         'placeholder' => __( 'ption2' ),
      ),
       
   )
);
      
return;
      
  } elseif( $select_control === 'ption3' ) {
      
      
// Display the following settings if you choose the third option
      
$wp_customize->add_setting( 'setting_radio_ption3', 
 array( 
     
    'type'       => 'theme_mod', 
    'transport'  => 'refresh',
 ) 
);
    

$wp_customize->add_control( 'setting_radio_ption3',
   array(
      
      'section' => 'Select_txt_radio',
      'type' => 'text',
      'input_attrs' => array(
         'placeholder' => __( 'ption3' ),
      ),
       
   )
);
      
return;
      
  } else{
      
// Display the following settings if no option is active 
      
$wp_customize->add_setting( 'setting_radio_ptionNon', 
 array( 
     
    'type'       => 'theme_mod', 
    'transport'  => 'refresh',
 ) 
);

      
$wp_customize->add_control( 'setting_radio_ptionNon',
   array(

      'section' => 'Select_txt_radio',
      'type' => 'text',
      'input_attrs' => array(
         'placeholder' => __( 'default' ),
      ),
   )
);
                                                           
return;
      
  }

}
add_action( 'customize_register', 'customize_pro' );

Answer 1

添加每个条件设置时需要使用

active_callback

参数。另外，不确定代码示例中的

ption

是否是

option

的拼写错误。

$wp_customize->add_setting( 'setting_radio_ption1', 
 array( 
    'type'       => 'theme_mod', 
    'transport'  => 'refresh',
    'active_callback' => 'my_conditional_check'
 ) 
);

function my_conditional_check() {
  return get_theme_mod( 'setting_radio_main' ) === 'ption1';
}