wp_customize-自定义设置未保存

Question

I am just starting out with WordPress and am trying to add some controls to my backend to customize my site. The first control I added- an image selector- works just fine, but the second setting- background-size- does not save the value, so after refreshing the page, the image is back to the default value from the style.css file. All settings are applied correctly until I refresh.

Here's my code so far with both the background-image and background-size:

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 );

Sorry for the wall of code.

Here's a related question:

After I refresh, the Drop Down Control is empty. I would expect it to show either the current value or the default value, both 'auto'.

Any pointers are greatly appreciated!

Answer 1

OK, found it myself: I copy-pasted the control from an example and also copied the sanitizer callback. Obviously, esc_url_raw does not make sense when used with a selectbox. When I now use sanitize_text_field instead it gets saved correctly and the value in the selector is also correct after reloading.