2017-12-27 31 views
0

我剛開始使用WordPress,並試圖添加一些控件到我的後端來自定義我的網站。我添加的第一個控件 - 圖像選擇器 - 工作得很好,但第二個setting-background-size-不保存該值,因此在刷新頁面後,圖像會從style.css文件返回到默認值。所有設置都會正確應用,直到我刷新。wp_customize-自定義設置不保存

這裏是我到目前爲止的代碼同時與背景圖像和背景大小:

的style.css:

section#banner { 
background-image: url(images/banner.jpg); 
background-size: auto; 
background-repeat: no-repeat; 
background-position: left top; 
} 

的functions.php:

/** 
* Customizer Options for #banner 
* Theme Options Customizer Implementation. 
* 
* @param WP_Customize_Manager $wp_customize Object that holds the customizer data. 
*/ 
function pf_banner_customizer($wp_customize){ 

/* 
* Failsafe is safe 
*/ 
if (! isset($wp_customize)) { 
    return; 
} 

/** 
* Add '#banner' Section. 
*/ 
$wp_customize->add_section(
    // $id 
    'pf_section_banner', 
    // $args 
    array(
     'title'   => __('#banner', 'theme-slug'), 
     'active_callback' => 'is_front_page', 
     'priority' => 1, 
    ) 
); 

/** 
* Add 'Backgrounds Background Image' Setting. 
*/ 
$wp_customize->add_setting(
    // $id 
    'pf_banner_background_image', 
    // $args 
    array(
     'default'  => get_stylesheet_directory_uri() . '/images/welcome-background.jpg', 
     'sanitize_callback' => 'esc_url_raw', 
     'transport'  => 'postMessage' 
    ) 
); 

/** 
* Add 'Backgrounds Background Image' image upload Control. 
*/ 
$wp_customize->add_control(
    new WP_Customize_Image_Control(
     // $wp_customize object 
     $wp_customize, 
     // $id 
     'pf_banner_background_image', 
     // $args 
     array(
      'settings'  => 'pf_banner_background_image', 
      'section'  => 'pf_section_banner', 
      'label'   => __('Backgrounds Background Image', 'theme-slug'), 
     ) 
    ) 
); 

$wp_customize->add_setting(
    // $id 
    'pf_banner_scaling', 
    // $args 
    array(
     'default'  => 'Auto', 
     'sanitize_callback' => 'esc_url_raw', 
     'transport'  => 'postMessage' 
    ) 
); 

$wp_customize->add_control(
    new WP_Customize_Control(
      // $wp_customize object 
      $wp_customize, 
      // $id 
      'pf_banner_scaling', 
      // $args 
      array(
       'label'    => __('Banner Scaling Options', 'theme-slug'), 
       'description' => __('Options for Scaling the background image'), 
       'settings'  => 'pf_banner_scaling', 
       'priority'  => 10, 
       'section'   => 'pf_section_banner', 
       'type'    => 'select', 
       'choices'   => array(
        'auto'  => 'Auto', 
        'cover'  => 'Cover', 
        'contain' => 'Contain', 
        'custom' => 'Custom', 
       ) 
      ) 
    ) 
); 

} 
// Settings API options initilization and validation. 
add_action('customize_register', 'pf_banner_customizer'); 

/** 
* Writes the Backgrounds background image out to the 'head' element of the document 
* by reading the value from the theme mod value in the options table. 
*/ 
function pf_change_background_img() { 
?> 
<style type="text/css"> 
    <?php 
     if (get_theme_mod('pf_banner_background_image')) { 
      $banner_background_image_url = get_theme_mod('pf_banner_background_image'); 
     } else { 
      $banner_background_image_url = get_stylesheet_directory_uri() . '/images/welcome-background.jpg'; 
     } 
     section#banner { 
      background-image: url(<?php echo $banner_background_image_url; ?>); 
     } 
    <?php // } // end if ?> 
</style> 
<?php 

} // end pf_customizer_css 
add_action('wp_head', 'pf_change_background_img'); 

function pf_change_background_size() { 
?> 
<style type="text/css"> 
<?php 
    $bg_size = get_theme_mod('pf_banner_scaling'); 
     ?> 
     section#banner { 
      background-size: <?php echo $bg_size; ?>; 
      background-color: '#00ffff' 
     } 
     ?> 
</style>; 
<?php 
} 
add_action('wp_head', 'pf_change_background_size'); 

/** 
* Registers the Theme Customizer Preview with WordPress. 
* 
* @package sk 
* @since  0.3.0 
* @version 0.3.0 
*/ 
function pf_customizer_live_preview() { 
wp_enqueue_script(
    'pf-theme-customizer', 
    get_stylesheet_directory_uri() . '/js/theme-customizer.js', 
    array('customize-preview'), 
    '0.1.0', 
    true 
); 
} // end pf_customizer_live_preview 
add_action('customize_preview_init', 'pf_customizer_live_preview'); 

JS /主題 - customizer.js:

(function($) { 
    "use strict"; 
    // Image Control for section#banner 
    wp.customize('pf_banner_background_image', function(value) { 
     value.bind(function(to) { 
      $('#banner').css('background-image', 'url(' + to + ')'); 
     }); 
    }); 

})(jQuery); 

(function($) { 
    "use strict"; 
    // Image Scaling Option for section#banner 
    wp.customize('pf_banner_scaling', function(value) { 
     value.bind(function(to) { 
      $('#banner').css('background-size', to); 
     }); 
    }); 

})(jQuery); 

對不起,代碼的牆。

下面是一個相關的問題:

我刷新後,下拉控件是空的。我希望它顯示當前值或默認值,都是'自動'。

任何指針非常感謝!

回答

0

好吧,我自己找到了:我從一個示例中複製粘貼了控件,並且還複製了清理程序回調。顯然,esc_url_raw在與selectbox一起使用時沒有意義。當我現在使用sanitize_text_field時,它會正確保存並且重新加載後選擇器中的值也正確。