Wordpress定製器實時預覽不起作用

我試圖使用wordpress定製器創建佈局選擇器選項。迄今爲止我所做的工作除了現場預覽。當我改變定製器中的一個選項，例如左側欄時，css應該改變爲在左側顯示側欄，但是當改變一個選項時，側欄消失並且被與所選擇的選項的順序相對應的數字替換。有人可以指出我哪裏錯了。Wordpress定製器實時預覽不起作用

這裏是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);

來源

2016-06-21 Mark

添加以下行：

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

這通常發生，因爲customize_preview_init實際排隊的的JavaScript在文件的結尾。

來源

2017-05-16 18:28:34

Wordpress定製器實時預覽不起作用

回答

相關問題