Wordpress 定制器实时预览不起作用

Question

我正在尝试使用 wordpress 定制器创建布局选择器选项。到目前为止，我所做的工作除了实时预览。当我在定制器中更改选项时，例如左侧边栏，css 应该更改为在左侧显示边栏，但是当更改选项时，边栏会消失并替换为与所选选项顺序相对应的数字。有人可以指出我在这里出错的地方吗？

这是 php。

function embee_customize_register( $wp_customize ) {
//All our sections, settings, and controls will be added here

//Add Layout Options section
$wp_customize->add_section('embee_layout_section_options', array(
    'title'    => __('Layout Options', 'mybasictheme'),
    'description' => 'Change various site section layouts.',
    'priority' => 1,
));

$wp_customize->add_setting('embee_layout_section_options[site_layout]', array(
    'default'        => '3',
    'capability'     => 'edit_theme_options',
    'transport'      => 'postMessage',
    'type'           => 'option',
));

$wp_customize->add_control( 'select_box', array(
    'settings' => 'embee_layout_section_options[site_layout]',
    'label'   => 'Site Layout',
    'section' => 'embee_layout_section_options',
    'type'    => 'select',
    'choices'    => array(
        '1' => 'Left Sidebar',
        '2' => 'Right Sidebar',
        '3' => 'Three Column',
        '4' => 'Full Width',
    ),
    'description' => 'Change sidebar layouts.',
));
}
add_action( 'customize_register', 'embee_customize_register' );

function embee_customizer_live_preview()
{
wp_enqueue_script( 
      'embee-customizer',           //Give the script an ID
      get_template_directory_uri().'/mbpanel/js/customizer.js',//Point to file
      array( 'jquery','customize-preview' ),    //Define dependencies
      '',                       //Define a version (optional) 
      true              //Put script in footer?
);
}
add_action( 'customize_preview_init', 'embee_customizer_live_preview' );

function layout_customize_css()
{
$options = get_option( 'embee_layout_section_options' );
?>
     <style type="text/css">
        #content { <?php if( $options['site_layout'] == '1' ) { ?> float: right; <?php } ?> } #sidebar_primary { <?php if( $options['site_layout'] == '1' ) { ?> float: left; <?php } ?> }
        #content { <?php if( $options['site_layout'] == '2' ) { ?> float: left; <?php } ?> } #sidebar_primary { <?php if( $options['site_layout'] == '2' ) { ?> float: right; <?php } ?> }
        #content { <?php if( $options['site_layout'] == '3' ) { ?> float: left; <?php } ?> } #sidebar_primary { <?php if( $options['site_layout'] == '3' ) { ?> float: left; <?php } ?> } #sidebar_secondary { <?php if( $options['site_layout'] == '3' ) { ?> float: left; <?php } ?> }
        #content { <?php if( $options['site_layout'] == '4' ) { ?> float: none; width: 100%; <?php } ?> }
     </style>
<?php
}
add_action( 'wp_head', 'layout_customize_css');

这里是javascript

( function( $ ) {
wp.customize( 'embee_layout_section_options', function( value ) {
    value.bind( function( to ) {
        $( '#sidebar_primary' ).css( 'float', 'left' );
    } );
} );

} )( jQuery );

Answer 1

添加以下行：

<?php wp_footer(); ?>   
/*Just Before </body> tag */

这通常发生在 customize_preview_init 实际上将 JavaScript 排在文件末尾。