Кастомизация раздела с изображениями в WordPress Customizer

Question

Кастомизация раздела с изображениями в WordPress Customizer

26 янв. 2016 г., 13:52:11

Просмотры: 17.3K

Голосов: 9

У меня есть кастомный раздел в Customizer, который управляет рекомендуемыми товарами на главной странице. Все зарегистрировано и работает, но я застрял на моменте, когда клиент загружает одно из изображений товаров — я не знаю, как заставить его обновляться.

Код из functions.php, с которым я работаю:

    // Настройка кастомизатора
function themeName_customize_register( $wp_customize ) {
    $wp_customize->add_setting('feature_product_one', array(
        'default-image' => get_template_directory_uri() . '/assest/imgs/featureProducts/product1.png',
        'transport'     => 'refresh',
        'height'        => 180,
        'width'        => 160,
    ));

    $wp_customize->add_setting('feature_product_two', array(
        'default-image' => get_template_directory_uri() . '/assest/imgs/featureProducts/product1.png',
        'transport'     => 'refresh',
        'height'        => 180,
        'width'        => 160,
    ));

    $wp_customize->add_setting('feature_product_three', array(
        'default-image' => get_template_directory_uri() . '/assest/imgs/featureProducts/product1.png',
        'transport'     => 'refresh',
        'height'        => 180,
        'width'        => 160,
    ));

    $wp_customize->add_setting('feature_product_four', array(
        'default-image' => get_template_directory_uri() . '/assest/imgs/featureProducts/product1.png',
        'transport'     => 'refresh',
        'height'        => 180,
        'width'        => 160,
    ));

    $wp_customize->add_section('feature_images', array(
        'title'           => __('Рекомендуемые товары', 'themeRemax'),
        'description'     => __('5 рекомендуемых изображений товаров на главной странице.'), 
        'priority'        => 70,
        'active_callback' => 'is_front_page',
    ));

    $wp_customize->add_control( new WP_Customize_Image_Control( $wp_customize, 'feature_product_one_control', array(
        'label' => __('Рекомендуемый товар #1', 'themeRemax'),
        'section' => 'feature_images',
        'settings' => 'feature_product_one',
    )));

    $wp_customize->add_control( new WP_Customize_Image_Control( $wp_customize, 'feature_product_two_control', array(
        'label' => __('Рекомендуемый товар #2', 'themeRemax'),
        'section' => 'feature_images',
        'settings' => 'feature_product_two',
    )));  

    $wp_customize->add_control( new WP_Customize_Image_Control( $wp_customize, 'feature_product_three_control', array(
        'label' => __('Рекомендуемый товар #3', 'themeRemax'),
        'section' => 'feature_images',
        'settings' => 'feature_product_three',
    )));

    $wp_customize->add_control( new WP_Customize_Image_Control( $wp_customize, 'feature_product_four_control', array(
        'label' => __('Рекомендуемый товар #4', 'themeRemax'),
        'section' => 'feature_images',
        'settings' => 'feature_product_four',
    )));     

}
add_action('customize_register', 'themeName_customize_register');

Я установил для 2 товаров одинаковые изображения по умолчанию, но когда я захожу в кастомизатор и обновляю Рекомендуемый товар #2, изображение вообще не обновляется.

Я понимаю, что мне нужно добавить какой-то код в front-page внутри тега <img>, но я не знаю какой :/

У меня есть ощущение, что то, что у меня есть выше — это слишком сложный способ сделать вещи, но это то, что у меня работает. Если есть более простой способ, я был бы признателен, если бы вы направили меня в правильном направлении :)

Буду благодарен за любую помощь

Примечание: Мой front-page.php:

<div class="featureImg">
    <img src="Что сюда вставить?" alt="Товар 1">
    <img src="Что сюда вставить?" alt="Товар 1">
</div>

Stephen

1.3K

разработка тем настройщик тем

Все ответы на вопрос

Stephen 1.3K · Accepted Answer · 2016-01-26T14:00:50Z

Я провёл небольшое исследование по этому вопросу и нашёл решение. В WordPress есть классная функция под названием get_theme_mod, которую можно использовать. В итоге я добавил get_theme_mod внутрь атрибута src тега <img>.

Вот как изменился мой тег <img> после того, как я узнал о get_theme_mod:

<img src="<?php echo esc_url( get_theme_mod( 'customizer-option-name' ) ); ?>" alt="Продукт 1" title="Изображение продукта 1">

По сути, этот код получает настройку $wp_customize->add_setting('customizer-setting-name') и выводит её содержимое. Пока я не нашёл способа добавить изображение по умолчанию в настройщике, но когда найду — обновлю этот пост.

Вот как теперь выглядит мой файл customizer.php:

function themeName_customize_register( $wp_customize ) {

    // Добавляем настройки
    $wp_customize->add_setting('customizer_setting_one', array(
        'transport'         => 'refresh',
        'height'         => 325,
    ));
    $wp_customize->add_setting('customizer_setting_two', array(
        'transport'         => 'refresh',
        'height'         => 325,
    ));

    // Добавляем секцию
    $wp_customize->add_section('slideshow', array(
        'title'             => __('Изображения слайдера', 'name-theme'), 
        'priority'          => 70,
    ));    

    // Добавляем контролы
    $wp_customize->add_control( new WP_Customize_Image_Control( $wp_customize, 'customizer_setting_one_control', array(
        'label'             => __('Изображение слайдера #1', 'name-theme'),
        'section'           => 'slideshow',
        'settings'          => 'customizer_setting_one',    
    )));
    $wp_customize->add_control( new WP_Customize_Image_Control( $wp_customize, 'customizer_setting_two_control', array(
        'label'             => __('Изображение слайдера #2', 'name-theme'),
        'section'           => 'slideshow',
        'settings'          => 'customizer_setting_two',
    )));    
}
add_action('customize_register', 'themeName_customize_register');