如何在使用单选按钮控件时让定制器刷新

时间:2014-12-09 作者:AlanP

我在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 );

2 个回复
SO网友:AlanP

答案很简单。将传输属性更改为刷新:

$wp_customize->add_setting(\'cb_color_scheme\', array(
  \'default\' => \'blue\',
  \'type\' => \'theme_mod\',
  \'transport\' => \'refresh\', 
  \'capability\' => \'manage_options\',
  \'sanitize_callback\' => \'wpforge_sanitize_cs_selection\',
  \'priority\' => 4,      
));

SO网友:tsquez

实际上默认值是刷新,因此不需要

\'transport\' => \'refresh\',

结束

相关推荐