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);
對不起，代碼的牆。
下面是一個相關的問題：
我刷新後，下拉控件是空的。我希望它顯示當前值或默認值，都是'自動'。
任何指針非常感謝！