0
저는 WordPress에서 시작하여 내 사이트를 사용자 정의하기 위해 백엔드에 일부 컨트롤을 추가하려고합니다. 내가 추가 한 첫 번째 컨트롤 인 이미지 선택기는 정상적으로 작동하지만 두 번째 설정 인 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/테마 - 여기 내 코드는 배경 이미지와 배경 사이즈 모두 지금까지의
맞춤 설정 도구 .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'를 보여줄 것으로 기대한다.
모든 포인터가 크게 감사드립니다!