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をキューとして通常起こります。