javascript - wp_customize- 自定义设置未保存

Question

我刚开始使用 WordPress，并尝试向我的后端添加一些控件来自定义我的网站。我添加的第一个控件——图像选择器——工作正常，但第二个设置——背景大小——不保存值，所以在刷新页面后，图像恢复为 style.css 文件中的默认值。在我刷新之前，所有设置都已正确应用。

到目前为止，这是我的代码，包括背景图像和背景大小:

样式.css:

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

函数.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 );

抱歉代码墙。

这里有一个相关的问题:

刷新后，下拉控件是空的。我希望它显示当前值或默认值，均为“自动”。

非常感谢任何指点!

Answer 1

好的，我自己找到了:我从示例中复制粘贴了控件，还复制了 sanitizer 回调。显然，esc_url_raw 在与选择框一起使用时没有意义。当我现在改用 sanitize_text_field 时，它会被正确保存，并且选择器中的值在重新加载后也是正确的。