我在customizer中设置了一组单选按钮,用于在我的主题中指定几种不同颜色方案(也称为样式表)中的一种。当我为主题选择新颜色时,主题的预览不会更改。但在customizer的另一部分中,我有一个文本框。选择颜色方案后,如果我转到文本框控件并修改它并删除文本光标,可能会导致更改事件,则主题会更新并显示所选的颜色方案。当我使用单选按钮通过控件更改颜色时,如何使预览更新?
$wp_customize->add_section(\'cb_colors_schemes\', array(
\'title\' => __(\'Color Schemes\', \'wpforge\'),
\'description\' => __(\'Change the color scheme of your theme.\', \'wpforge\'),
\'priority\' => 70,
));
$wp_customize->add_setting(\'cb_color_scheme\', array(
\'default\' => \'blue\',
\'type\' => \'theme_mod\',
\'transport\' => \'postMessage\',
\'capability\' => \'manage_options\',
\'sanitize_callback\' => \'wpforge_sanitize_cs_selection\',
\'priority\' => 4,
));
$wp_customize->add_control(\'cb_color_scheme\', array(
\'type\' => \'radio\',
\'label\' => \'Color Scheme:\',
\'section\' => \'cb_colors_schemes\',
\'choices\' => array(
\'black\' => \'Black\',
\'blue\' => \'Blue\',
\'brown\' => \'Brown\',
\'gray-red\' => \'Gray-Red\',
\'green\' => \'Green\',
\'orange\' => \'Orange\',
\'purple\' => \'Purple\',
\'red\' => \'Red\',
\'taupe\' => \'Taupe\',
\'turqoise\' => \'Turqoise\',
),
)
);
function wpforge_sanitize_cs_selection( $input ) {
$valid = array(
\'black\' => \'Black\',
\'blue\' => \'Blue\',
\'brown\' => \'Brown\',
\'gray-red\' => \'Gray-Red\',
\'green\' => \'Green\',
\'orange\' => \'Orange\',
\'red\' => \'Red\',
\'purple\' => \'Purple\',
\'taupe\' => \'Taupe\',
\'turqoise\' => \'Turqoise\'
);
if ( array_key_exists( $input, $valid ) ) {
return $input;
} else {
return \'\';
}
}
JavaScript:
( function( $ ) {
// Header
wp.customize(\'blogname\', function(value) {
value.bind(function(to) {
$(\'.site-title a\').html(to);
});
});
wp.customize(\'blogdescription\', function(value) {
value.bind(function(to) {
$(\'.site-description\').html(to);
});
});
wp.customize(\'hide_headtxt\', function(value) {
value.bind(function(to) {
if( to == \'\' ) {
$(\'.site-title, .site-description\').css(\'display\', \'none\');
}
else if( to == 1 ) {
$(\'.site-title, .site-description\').css(\'display\', \'block\');
};
});
});
// Footer
wp.customize(\'wpforge_footer_text\', function(value) {
value.bind(function(to) {
$(\'.site-info\').html(to);
});
});
// Background
wp.customize(\'wpforge_background_color\', function(value) {
value.bind(function(to) {
$(\'body\').css(\'background-color\', to);
if( to == \'\' ){
$(\'body\').css(\'background-color\', \'\');
}
});
});
wp.customize(\'wpforge_background_img\', function(value) {
value.bind(function(to) {
$(\'body\').css(\'background-image\', \'url("\'+to+\'")\');
if( to == \'\' ){
$(\'body\').css(\'background-image\', \'\');
}
});
});
wp.customize(\'wpforge_background_repeat\', function(value) {
value.bind(function(to) {
$(\'body\').css(\'background-repeat\', to);
if( to == \'\' ){
$(\'body\').css(\'background-repeat\', \'\');
}
});
});
wp.customize(\'wpforge_background_size\', function(value) {
value.bind(function(to) {
$(\'body\').css(\'background-size\', to);
if( to == \'\' ){
$(\'body\').css(\'background-size\', \'\');
}
});
});
wp.customize(\'wpforge_background_position\', function(value) {
value.bind(function(to) {
$(\'body\').css(\'background-position\', to);
if( to == \'\' ){
$(\'body\').css(\'background-position\', \'\');
}
});
});
wp.customize(\'wpforge_background_attachment\', function(value) {
value.bind(function(to) {
$(\'body\').css(\'background-attachment\', to);
if( to == \'\' ){
$(\'body\').css(\'background-attachment\', \'\');
}
});
});
// Fonts & Colors
wp.customize(\'wpforge_title_color\', function(value) {
value.bind(function(to) {
$(\'h1,h2,h3,h4,h5,h6\').css(\'color\', to);
if( to == \'\' ){
$(\'h1,h2,h3,h4,h5,h6\').css(\'color\', \'\');
}
});
});
wp.customize(\'wpforge_text_color\', function(value) {
value.bind(function(to) {
$(\'body\').css(\'color\', to);
if( to == \'\' ){
$(\'body\').css(\'color\', \'\');
}
});
});
wp.customize(\'wpforge_link_color\', function(value) {
value.bind(function(to) {
$(\'a\').css(\'color\', to);
if( to == \'\' ){
$(\'a\').css(\'color\', \'\');
}
});
});
wp.customize(\'wpforge_hover_color\', function(value) {
value.bind(function(to) {
$(\'a:hover\').css(\'color\', to);
if( to == \'\' ){
$(\'a:hover\').css(\'color\', \'\');
}
});
});
} )( jQuery );