Я пытаюсь установить фоновое изображение в WordPress Customizer. Я могу загрузить изображение и просмотреть его в 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 перед именем файла background-image, чего он не делает.
Я также пробовал следующее без успеха:
wp.customize( 'section_1_background_image', function( value ) { value.bind( function( newval ) { $('#wrapper-1').css('background-image', 'url("' + newval + '")' ); } ); } );
Я что-то упускаю?
Если вы ссылаетесь на возможность добавления фоновых изображений при навигации по Appearance -> Customize в администраторе WordPress, я обычно предоставляю возможность настраивать фон через 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 );
Вы неправильно добавляете контроль.
$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 + '); }'
EDIT 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 переменную $custom_css и $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() . Этот код должен идти после основного символа таблицы стилей.
Как оказалось, правильный код для его отображения в Настройщике был:
wp.customize( 'section_1_background_image', function( value ) { value.bind( function( newval ) { $('#wrapper-1').css('background-image', 'url("' + newval + '")' ); } ); } );
Однако это не проблема для правильного сохранения его на передней панели. Это было решено здесь .