Question

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

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

java -cp .;../lib/* runfile

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

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

这个相同的设置适用于背景颜色，但我相信它与＆＃34; url＆＃34;需要在背景图像文件名前面的css中输出，它不是这样做的。

我也试过以下但没有成功：

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

我错过了什么吗？

Answer 1

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

$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

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

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

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

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

3 个答案: