背景图像未保存在 WordPress 定制器中

Question

我正在尝试在 WordPress 定制器中设置背景图像。我可以上传图片并在定制器中查看预览，但保存后，它不会出现在实时网站上。

我的customizer.php 文件中有以下代码：

$wp_customize->add_setting( 'section_1_background_image', array(
    'default'           => get_template_directory_uri() . '/images/default.jpg',
       'transport'      => 'postMessage',
) );    
$wp_customize->add_control( new WP_Customize_Image_Control( $wp_customize, 'section_1_background_image_control', array(
    'label'             => __('Background Image','minisite'),
    'settings'          => 'section_1_background_image',
    'section'           => 'section_1',
    'priority' => 10,
) ) );

以及我的customizer.js 文件中的相应代码

wp.customize( 'section_1_background_image', function( value ) {
    value.bind( function( newval ) {
        $('#wrapper-1').css('background-image', newval );
    } );
} );

同样的设置适用于背景颜色，但我认为它与需要在背景图像文件名前面的 css 中输出“url”有关，但它没有这样做。

我也尝试了以下方法，但没有成功：

wp.customize( 'section_1_background_image', function( value ) {
    value.bind( function( newval ) {
        $('#wrapper-1').css('background-image', 'url("' + newval + '")' );
    } );
} );

我错过了什么吗？

Answer 1

如果您指的是在 WordPress 管理员中导航到 Appearance -> Customize 时添加背景图像的选项，我通常会在我的 functions.php 中提供通过 custom-background 自定义背景的选项：

$custom_background = array(
    'default-color'             => '00ff00',
    'default-image'             => get_template_directory() . '/img/default_background.png',
    'background-repeat'         => 'tile',
    'default-position-x'        => 'center',
    'background-attachment'     => 'fixed',
    'wp-head-callback'          => '_custom_background_cb'
);
add_theme_support( 'custom-background', $custom_background );

Answer 2

您添加的控件错误。

$wp_customize->add_setting( 'section_1_background_image', array(
    'default'        => get_template_directory_uri() . '/images/default.jpg',
    'transport'      => 'postMessage',
) );    
$wp_customize->add_control( new WP_Customize_Image_Control( $wp_customize, 'section_1_background_image', array(
    'label'             => __('Background Image','minisite'),
    'settings'          => 'section_1_background_image',
    'section'           => 'section_1',
    'priority' => 10,
) ) );

WP_Customize_Image_Control 中的名称应与设置名称相同。

您引用的是section_1_background_image_control，设置名称为section_1_background_image。

编辑

要让你的图片出现，你需要添加你的javascript（我这里关注二十十五主题）

( function( $ ) {
    var style = $( '#twentysixteen-color-scheme-css' ),
        api = wp.customize;

    if ( ! style.length ) {
        style = $( 'head' ).append( '<style type="text/css" id="twentysixteen-color-scheme-css" />' )
                            .find( '#twentysixteen-color-scheme-css' );
    }

    api( 'section_1_background_image', function( value ) {
        value.bind( function( newval ) {
            var background_image = 'body{ background-image: url( ' + newval + '); }'
            style.text( background_image );
        } );
    } );


} )( jQuery );

您可以在其中切换所有实时更改。我将图像添加到body，但您可以将其更改为#wrapper-1

var background_image = '#wrapper-1{ background-image: url( ' + newval + '); }'

编辑 2

这也适用于我：

wp.customize( 'section_1_background_image', function( value ) {
    value.bind( function( newval ) {
        $('body').css('background-image', 'url("' + newval + '")' );
    } );
} );

只需将body 替换为#wrapper-1。

刚刚意识到，您说过当您保存图像时，包装器没有保存图像。您是否创建了一个 dynamic-css.php 来放置所有自定义 css？

通常我会创建一个dynamic-css.php，在其中放置$custom_css 变量并将定制器的结果放入其中。

$section_1_background_image= get_theme_mod( 'section_1_background_image', '' );
if ( '' !== $section_1_background_image) {
    $custom_css .= '#wrapper-1{background-image: url("' . esc_attr( $body_background ) . '");}';
}

然后我在functions.php 中定义相同的变量并将其添加为内联样式：

$custom_css = '';
wp_add_inline_style( 'main_css', $custom_css );

其中main_css 是您调用get_stylesheet_uri() 的挂钩名称。此代码必须在主样式表队列之后。

Answer 3

事实证明，在定制器中显示它的正确代码是：

wp.customize( 'section_1_background_image', function( value ) {
    value.bind( function( newval ) {
        $('#wrapper-1').css('background-image', 'url("' + newval + '")' );
    } );
} ); 

但是，这不是在前端正确保存它的问题。这已解决here。