0
私はWordPressで始まり、バックエンドにいくつかのコントロールを追加して自分のサイトをカスタマイズしようとしています。私が追加した最初のコントロール - イメージセレクタ - はうまくいきますが、2番目の設定 - 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/THEME-ここに私のコードは、背景画像と背景サイズの両方で、これまでだ
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);
コードの壁には申し訳ありません。ここで
は、関連する質問です：私はリフレッシュした後
、ドロップダウンコントロールは空です。私はそれが現在の値かデフォルト値の両方を表示すると期待しています。両方とも 'auto'です。
どのポインタも大変ありがとうございます！