WordPressカスタマイザで背景画像が保存されない

Question

WordPressカスタマイザで背景画像を設定しようとしています。私はイメージをアップロードして、カスタマイザでプレビューを見ることができますが、保存した後はライブサイトには表示されません。

私はcustomizer.phpファイルに次のコードがあります。私の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, 
))); 

と対応するコードは、これと同じ設定は、背景色のため正常に動作しますが、私

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

結局のところ、カスタマイザーでそれをして表示するための正しいコード：

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

はしかし、これはフロントエンドにそれを適切に保存するための問題ではありませんでした。それは解決されたhereです。

Answer 2

あなたはWordPressのadminに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 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です。あなたの画像が表示されるようにするに

EDIT

、あなたはすべてのあなたのライブの変更を切り替える

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

（私はここ20 15テーマを以下のよ）あなたのJavaScriptで追加する必要があります。私はbodyに画像を追加していますが、EDIT 2

また、これは私の作品#wrapper-1

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

にそれを変更することができます

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

だけ#wrapper-1でbodyを交換してください。

イメージを保存すると、ラッパーはイメージを保存していないと言っています。すべてのカスタムCSSを配置するdynamic-css.phpを作成しましたか？

通常、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で同じ変数を定義し、インラインスタイルとして追加：

main_cssあなたはget_stylesheet_uri()を呼び出すフック名です

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

。このコードはメインのスタイルシートをエンキューする必要があります。