如何在Customizer.js中使用Customizer.php中的变量

时间：2017-02-01 作者：Alexander

我正在为我的定制器使用postMessage，并试图避免在定制器中重复。php和customizer。js如何使用customizer中的变量$css。php并将其包含在customizer中。js以避免重复h1、h2、h3等。因此，现在它的工作原理如下：

customizer.php code

function my_styles_method() {

  wp_enqueue_style(
    \'custom-style\',
    get_template_directory_uri() . \'/custom-css.css\'
  );

  $colors = array(
    \'headings_color\'     => get_theme_mod( \'wpt_heading_color\' ),
  );

  $css_output = "{color: {$colors[\'headings_color\']}; }";
  $custom_css = "h1,h2,h3,h4,h5,h6";
  $css = $custom_css . $css_output;


  wp_add_inline_style( \'custom-style\', $css );
}
add_action( \'wp_enqueue_scripts\', \'my_styles_method\', 21 );

customizer.js code

wp.customize( \'wpt_heading_color\', function( value ) {
    value.bind( function( newval ) {
        $( \'h1,h2,h3,h4,h5,h6\').css( \'color\', newval );
    });
});

2 个回复

最合适的回答,由SO网友:Alexander 整理而成

嗯，我终于成功了。我只是忘了添加\\u inline\\u样式。非常感谢韦斯顿·鲁特的帮助。因此，最终代码是：

function my_styles_method() {
  wp_enqueue_style(
    \'custom-style\',
    get_template_directory_uri() . \'/custom-css.css\'
  );

  $colors = array(
    \'headings_color\'     => get_theme_mod( \'wpt_heading_color\' ),
  );

  $css_output = "{color: {$colors[\'headings_color\']}; }";
  $selector = "h1,h2,h3,h4,h5,h6";
  $css = $selector . $css_output;

  wp_add_inline_style( \'custom-style\', $css );
  wp_localize_script( \'wpt_customizer\', \'MyStylesSelector\', $selector );       
}
add_action( \'wp_enqueue_scripts\', \'my_styles_method\', 21 );


/**
 * Binds JS handlers to make Theme Customizer preview reload changes asynchronously.
 */
function wpt_customize_preview_js() {
  wp_enqueue_script( \'wpt_customizer\', get_template_directory_uri() . \'/js/theme-customizer.js\', array( \'customize-preview\' ), \'\', true );
}
add_action( \'customize_preview_init\', \'wpt_customize_preview_js\' );

Gist链接-https://gist.github.com/DeoThemes/ae61a166d09dba4817fb6e6d0ce78c8f

SO网友:Weston Ruter

使用wp_add_inline_script() 将变量从PHP导出到JS。例如，在my_styles_method 假设您的customizr.js 脚本具有句柄my-styles-customize-preview:

wp_add_inline_script(
    \'my-styles-customize-preview\',
    sprintf( \'var MyStylesSelector = %s;\', wp_json_encode( $custom_css ) ), 
    \'before\' 
);

然后您可以将JS修改为：

wp.customize( \'wpt_heading_color\', function( value ) {
    value.bind( function( newval ) {
        $( MyStylesSelector ).css( \'color\', newval );
    });
});

尽管如此，我还是建议使用一种更好的方法，即更新内联样式元素，而不是设置style 对于每个元素。例如：

wp.customize( \'wpt_heading_color\', function( setting ) {
    setting.bind( function( value ) {
        $( \'#custom-style-inline-css\' ).text( MyStylesSelector + \'{ color: \' + value + \'}\' );
    });
});

这也是使用自定义选择性刷新的一个很好的候选者Partial 将部分刷新请求短路到服务器，并通过重写refresh 方法

标签： theme-customizer 小码农

小码农CODE

如何在Customizer.js中使用Customizer.php中的变量

相关推荐