WordPress. Theme Customize API. Часть 5

10.04.2019

Теги: API • CMS • WordPress • Изображение • Настройка

До версии 4.3 WordPress предоставлял класс WP_Customize_Upload_Control для управления загрузкой медиа-файлов в Theme Customizer. Этот класс сохраняет в БД URL файла. Поскольку идентификатор является более предпочтительным способом получения информации о медиа-файле, было принято решение добавить новый класс WP_Customize_Media_Control.

Класс WP_Customize_Upload_Control по-прежнему доступен, теперь он расширяет WP_Customize_Media_Control, что обеспечивает совместимость.

Так что при загрузке файлов следует помнить, когда в БД сохраняется URL файла, а когда — идентификатор:

  • Класс WP_Customize_Upload_Control сохраняет URL файла
  • Класс WP_Customize_Image_Control сохраняет URL файла
  • Класс WP_Customize_Media_Control сохраняет ID файла
  • Класс WP_Customize_Cropped_Image_Control сохраняет ID файла

Класс WP_Customize_Cropped_Image_Control

Этот класс позволяет не только загрузить изображение, но и обрезать его с сохранением пропорций. Давайте посмотрим, как его можно использовать. Для этого удалим часть кода, отвечающего за загрузку изображения фона подвала: 

/*
 * Добавляем секцию, настройку и элемент управления
 */
add_action(
    'customize_register',
    function($customizer) { // $customizer — объект класса WP_Customize_Manager

        /*..........*/

        // Добавляем настройку «Фоновое изображение»
        $customizer->add_setting(/*...*/);

        // Добавляем элемент управления «Фоновое изображение»
        $customizer->add_control(/*...*/);

        /*..........*/

    }
);

И вставим вместо этого новый фрагмент кода: 

/*
 * Добавляем секцию, настройку и элемент управления
 */
add_action(
    'customize_register',
    function($customizer) { // $customizer — объект класса WP_Customize_Manager

        /*..........*/

        // Добавляем настройку «Фоновое изображение с обрезкой»
        $customizer->add_setting(
            'setting_footer_background_image',
            array(
                // значение по умолчанию
                'default'   => 0,
                // настройка только для темы
                'type'      => 'theme_mod',
                // как обновлять окно просмотра
                'transport' => 'refresh',
            )
        );

        // Добавляем элемент управления «Фоновое изображение с обрезкой»
        $customizer->add_control(
            new WP_Customize_Cropped_Image_Control(
                $customizer,
                'control_footer_background_image', // идентификатор элемента управления
                [
                    // label элемента формы
                    'label' => 'Фоновое изображение с обрезкой',
                    // описание элемента формы
                    'description' => 'Загрузите фоновое изображение для подвала',
                    // идентификатор секции
                    'section'     => 'section_footer',
                    // идентификатор настройки
                    'settings'    => 'setting_footer_background_image',
                    // сохраняем заданные пропорции изображения (1200:300)
                    'flex_width'  => false,
                    'flex_height' => false,
                    // значение ширины по умолчанию
                    'width'       => 1200,
                    // значение высоты по умолчанию
                    'height'      => 300,
                    // порядок сортировки
                    'priority'    => 40,
                ]
            )
        );

        /*..........*/

    }
);

Поскольку обновление окна просмотра теперь refresh, удаляем из customize.js код, отвечающий за обновление свойства background-image: 

(function($) {
    // изменяем текст copyright-а в подвале
    wp.customize('setting_footer_copyright_text', function(value) {
        value.bind(function(to) {
            $('#copyright > div').html(to);
        });
    });
    // изменяем цвет copyright-а в подвале
    wp.customize('setting_footer_copyright_color', function(value) {
        value.bind(function(to) {
            $('#copyright').css('color', to);
        });
    });
    /*
    // изменяем фоновое изображение для подвала
    wp.customize('setting_footer_background_image', function(value) {
        value.bind(function(to) {
            $('footer').css('background-image', 'url(' + to + ')');
        });
    });
    */
    // изменяем для фона background-position-x
    wp.customize('setting_footer_background_position_x', function(value) {
        value.bind(function(to) {
            $('footer').css('background-position-x', to);
        });
    });
    // изменяем для фона background-position-y
    wp.customize('setting_footer_background_position_y', function(value) {
        value.bind(function(to) {
            $('footer').css('background-position-y', to);
        });
    });
    // изменяем для фона background-size
    wp.customize('setting_footer_background_size', function(value) {
        value.bind(function(to) {
            $('footer').css('background-size', to);
        });
    });
    // изменяем для фона background-repeat
    wp.customize('setting_footer_background_repeat', function(value) {
        value.bind(function(to) {
            $('footer').css('background-repeat', to);
        });
    });
    // изменяем текст «Название сайта»
    wp.customize('blogname', function(value) {
        value.bind(function(to) {
            $('#blogname').html(to);
        });
    });
    // изменяем текст «Краткое описание»
    wp.customize('blogdescription', function(value) {
        value.bind(function(to) {
            $('#blogdescription').html(to);
        });
    });
})(jQuery);

И осталось изменить код в шаблоне footer.php. Функция get_theme_mod() теперь возвращает идентификатор изображения, а не его URL: 

<?php
// получаем идентификатор
$id = get_theme_mod(
    'setting_footer_background_image',
    0
);
// получаем URL изображения
$background = '';
if (!empty($id)) {
    $background = wp_get_attachment_url($id);
}
?>
<footer<?= !empty($background) ? ' style="background-image: url('.$background.')"' : ''; ?>>
    <div class="container">
        <?php
        $color = get_theme_mod(
            'setting_footer_copyright_color',
            '#FFFFFF'
        );
        ?>
        <div id="copyright" style="color: <?= $color; ?>">
            <?php
            $display = get_theme_mod(
                'setting_footer_copyright_display',
                'show'
            );
            if ('show' == $display) {
                $copyright = get_theme_mod(
                    'setting_footer_copyright_text',
                    ''
                );
                echo $copyright;
            }
            ?>
        </div>
    </div>
</footer>

<?php wp_footer(); ?>
</body>
</html>

Класс WP_Customize_Upload_Control

Как уже упоминалось выше, класс WP_Customize_Upload_Control по-прежнему доступен для загрузки файлов. Давайте посмотрим, как его можно использовать. Загружать по-прежнему будем фон подвала. Удаляем код, отвечающий за загрузку изображения: 

/*
 * Добавляем секцию, настройку и элемент управления
 */
add_action(
    'customize_register',
    function($customizer) { // $customizer — объект класса WP_Customize_Manager

        /*..........*/

        // Добавляем настройку «Фоновое изображение с обрезкой»
        $customizer->add_setting(/*...*/);

        // Добавляем элемент управления «Фоновое изображение с обрезкой»
        $customizer->add_control(/*...*/);

        /*..........*/

    }
);

И вставим вместо этого новый фрагмент кода: 

/*
 * Добавляем секцию, настройку и элемент управления
 */
add_action(
    'customize_register',
    function($customizer) { // $customizer — объект класса WP_Customize_Manager

        /*..........*/

        // Добавляем настройку «Фоновое изображение»
        $customizer->add_setting(
            'setting_footer_background_image',
            array(
                // значение по умолчанию
                'default'   => get_template_directory_uri() . '/assets/img/bg-footer.jpg',
                // настройка только для темы
                'type'      => 'theme_mod',
                // как обновлять окно просмотра
                'transport' => 'refresh',
            )
        );

        // Добавляем элемент управления «Фоновое изображение»
        $customizer->add_control(
            new WP_Customize_Upload_Control(
                $customizer,
                'control_footer_background_image', // идентификатор элемента управления
                [
                    // label элемента формы
                    'label'       => 'Фоновое изображение',
                    // описание элемента формы
                    'description' => 'Загрузите фоновое изображение для подвала',
                    // идентифиткатор секции
                    'section'     => 'section_footer',
                    // идентифкатор настройки
                    'settings'    => 'setting_footer_background_image',
                    // порядок сортировки
                    'priority'    => 40,
                ]
            )
        );

        /*..........*/

    }
);

Поскольку класс WP_Customize_Upload_Control сохраняет URL изображения, а не идентификатор, вернем старый код для footer.php: 

<?php
// получаем URL фонового изображения
$background = get_theme_mod(
    'setting_footer_background_image',
    ''
);
?>
<footer<?= !empty($background) ? ' style="background-image: url('.$background.')"' : ''; ?>>
    <div class="container">
        <?php
        $color = get_theme_mod(
            'setting_footer_copyright_color',
            '#FFFFFF'
        );
        ?>
        <div id="copyright" style="color: <?= $color; ?>">
            <?php
            $display = get_theme_mod(
                'setting_footer_copyright_display',
                'show'
            );
            if ('show' == $display) {
                $copyright = get_theme_mod(
                    'setting_footer_copyright_text',
                    ''
                );
                echo $copyright;
            }
            ?>
        </div>
    </div>
</footer>

<?php wp_footer(); ?>
</body>
</html>

Класс WP_Customize_Media_Control

Ипользование класса WP_Customize_Media_Control мало чем отличается от уже рассмотренных примеров. Удаляем часть кода, отвечающего за загрузку изображения фона подвала: 

/*
 * Добавляем секцию, настройку и элемент управления
 */
add_action(
    'customize_register',
    function($customizer) { // $customizer — объект класса WP_Customize_Manager

        /*..........*/

        // Добавляем настройку «Фоновое изображение»
        $customizer->add_setting(/*...*/);

        // Добавляем элемент управления «Фоновое изображение»
        $customizer->add_control(/*...*/);

        /*..........*/

    }
);

И вставляем вместо этого новый фрагмент кода: 

/*
 * Добавляем секцию, настройку и элемент управления
 */
add_action(
    'customize_register',
    function($customizer) { // $customizer — объект класса WP_Customize_Manager

        /*..........*/

        // Добавляем настройку «Фоновое изображение»
        $customizer->add_setting(
            'setting_footer_background_image',
            array(
                // значение по умолчанию
                'default'   => 0,
                // настройка только для темы
                'type'      => 'theme_mod',
                // как обновлять окно просмотра
                'transport' => 'refresh',
            )
        );

        // Добавляем элемент управления «Фоновое изображение»
        $customizer->add_control(
            new WP_Customize_Media_Control(
                $customizer,
                'control_footer_background_image', // идентификатор элемента управления
                [
                    // label элемента формы
                    'label'       => 'Фоновое изображение',
                    // описание элемента формы
                    'description' => 'Загрузите фоновое изображение для подвала',
                    // идентифиткатор секции
                    'section'     => 'section_footer',
                    // идентифкатор настройки
                    'settings'    => 'setting_footer_background_image',
                    // порядок сортировки
                    'priority'    => 40,
                ]
            )
        );

        /*..........*/

    }
);

Терерь изменяем код в шаблоне footer.php. Функция get_theme_mod() возвращает идентификатор изображения: 

<?php
// получаем идентификатор
$id = get_theme_mod(
    'setting_footer_background_image',
    0
);
// получаем URL изображения
$background = '';
if (!empty($id)) {
    $background = wp_get_attachment_url($id);
}
?>
<footer<?= !empty($background) ? ' style="background-image: url('.$background.')"' : ''; ?>>
    <div class="container">
        <?php
        $color = get_theme_mod(
            'setting_footer_copyright_color',
            '#FFFFFF'
        );
        ?>
        <div id="copyright" style="color: <?= $color; ?>">
            <?php
            $display = get_theme_mod(
                'setting_footer_copyright_display',
                'show'
            );
            if ('show' == $display) {
                $copyright = get_theme_mod(
                    'setting_footer_copyright_text',
                    ''
                );
                echo $copyright;
            }
            ?>
        </div>
    </div>
</footer>

<?php wp_footer(); ?>
</body>
</html>

Дополнительно

Поиск: API • CMS • Web-разработка • WordPress • Настройка • Элемент управления • Секция • Control • Section • Setting • Изображение • Theme Customize

Каталог оборудования
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
Производители
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
Функциональные группы
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.