如何解决Customizer实时预览的问题?

时间:2016-10-11 作者:ERDFX

我正在尝试为我的客户创建可定制的主题。目标是使他们能够在主题定制器中修改某些样式。

我不想在html代码中插入customizer的变量,而是创建了一个css-php 文件除了更改的实时预览不能实时反映这些更改外,其他一切都很正常。相反,每次更改后,我都必须刷新页面。我个人并不感到烦恼,但我的客户却感到烦恼。

你对此有何想法?

这就是我的functions.php:

function im_customize_register( $wp_customize ) {

$colors = array();
$colors[] = array(
  \'slug\'=>\'im_header_bcolor\', 
  \'default\' => \'#556d80\',
  \'label\' => __(\'Header Background Color\', \'impressive\')
);
$colors[] = array(
  \'slug\'=>\'im_nav_bar_bcolor\', 
  \'default\' => \'#434044\',
  \'label\' => __(\'Navigation Bar Background Color\', \'impressive\')
);
foreach( $colors as $color ) {
  // SETTINGS
  $wp_customize->add_setting(
    $color[\'slug\'], array(
      \'default\' => $color[\'default\'],
      \'type\' => \'theme_mod\', 
      \'capability\' => 
      \'edit_theme_options\'
    )
  );
  // CONTROLS
  $wp_customize->add_control(
    new WP_Customize_Color_Control(
      $wp_customize,
      $color[\'slug\'], 
      array(\'label\' => $color[\'label\'], 
      \'section\' => \'colors\',
      \'settings\' => $color[\'slug\'])
    )
  );
}

}
add_action( \'customize_register\', \'im_customize_register\' );


function im_theme_styles() {

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

}
add_action( \'wp_enqueue_scripts\', \'im_theme_styles\' );

$custom_css= \'
  .im_header { background-color: \' . get_theme_mod(\'im_header_bcolor\') . \'; }
  .im_nav_bar { background-color: \' . get_theme_mod(\'im_nav_bar_bcolor\') . \'; }
  \';

wp_add_inline_style (\'main-style\', $custom_css);
还有我的css.php:

<?php header("Content-type: text/css; charset: UTF-8"); ?>

<?php

  $parse_uri = explode( \'wp-content\', $_SERVER[\'SCRIPT_FILENAME\'] );
  require_once( $parse_uri[0] . \'wp-load.php\' );

  $im_header_bcolor = get_theme_mod(\'im_header_bcolor\');
  $im_nav_bar_bcolor = get_theme_mod(\'im_nav_bar_bcolor\');

?>



  .im_header { background-color:  <?php echo $im_header_bcolor; ?>; }
  .im_nav_bar { background-color:  <?php echo $im_nav_bar_bcolor; ?>; }

2 个回复
最合适的回答,由SO网友:cjbj 整理而成

设置css.php 出于这个目的,这是过分的(或者在任何情况下都是不可取的,正如@MarkKaplen在另一个答案中所说的那样)。

预览css最平滑的方法是使用jquery(请参见part 3 of the customizer API).

因为你没有使用transport 参数时,页面仍会重新加载,因此您只需在functions.php 使用wp_add_inline_style, 在将您的style.css. 像这样:

add_action (\'wp_enqueue_scripts\',\'wpse242256_add_styles\');

function wpse242256_add_styles () {
  wp_enqueue_style(\'main-style\', get_template_directory_uri() . \'/style.css\');
  $custom_css= \'
    .im_header { background-color: \' . get_theme_mod(\'im_header_bcolor\') . \'; }
    .im_nav_bar { background-color: \' . get_theme_mod(\'im_nav_bar_bcolor\') . \'; }
    \';
  wp_add_inline_style (\'main-style\', $custom_css);
}

SO网友:Mark Kaplun

不使用css.php 样式文件。它们很难正确写入,并带来另一个安全问题。在某些设置中,直接从主题目录运行php只会在服务器级别被禁止。

始终遵循核心主题所做的事情,发明自己的东西是好的和有创意的,但这会让任何需要为客户维护主题的人感到恼火。