未在WordPress定製器中保存背景圖像

Question

我試圖在WordPress定製器中設置背景圖像。我可以上傳圖片並在Customizer中預覽，但在保存之後，它不會出現在實況網站上。

我在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); 
    }); 
}); 

此相同的設置工作正常，背景顏色，但我相信它必須處理「url」需要在背景圖像文件名前面的css中輸出，而不是這樣做。

我也嘗試沒有成功如下：

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

我缺少的東西？

Answer 1

事實證明，在定製顯示它正確的代碼是：

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

然而，這不是正確的保存它在前端的問題。這已經解決了here。

Answer 2

如果你指的是選項，當你在WordPress的管理員導航到Appearance -> Customize添加背景圖片我通常提供通過custom-background在我的functions.php自定義背景的選項：

$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 3

你'錯誤地添加了控件。

$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添加（我這裏之後二十15主題）

(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 + '); }' 

EDIT 2

這也爲我的作品：

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

只是#wrapper-1取代body。

剛纔意識到，你曾經說過，當你保存圖像時，包裝器沒有保存圖像。你有沒有創建一個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()鉤名。此代碼必須在主樣式表入隊之後進行。