Главная > Блог > Web-разработка > CMS WoprdPress >

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

05.04.2019

Теги: AJAX • API • CMS • Web-разработка • WordPress • Настройка

Создаем секцию, настройку и элемент управления

Давайте создадим директорию customize внутри темы. И в этой директории создадим два файла: для php-кода — customize.php и для js-кода — customize.js. Файл customize.php подключим в начале файла functions.php. Теперь все готово к работе. Создадим секцию, настройку и элемент управления — для этого добавляем в customize.php следующий код:

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

        // Добавляем секцию «Настройки подвала»
        $customizer->add_section(
            'section_footer', // идентификатор секции
            [
                'title'    => 'Настройки подвала', // название секции
                'priority' => 10, // порядок сортировки
            ]
        );

        // Добавляем настройку «Текст copyright»
        $customizer->add_setting(
            'setting_footer_copyright_text', // идентифкатор настройки
            [
                'default'   => '© Copyright. All rights reserved', // значение по умолчанию
                'type'      => 'theme_mod', // настройка только для темы
                'transport' => 'refresh', // как обновлять окно просмотра
            ]
        );

        // Добавляем элемент управления «Текст copyright»
        $customizer->add_control(
            'control_footer_copyright_text', // идентификатор элемента управления
            [
                'label'       => 'Текст copyright', // label элемента формы
                'description' => 'Добавьте текст copyright, поле поддерживает HTML теги',
                'section'     => 'section_footer', // идентификатор секции
                'settings'    => 'setting_footer_copyright_text', // идентификатор настройки
                'priority'    => 10, // порядок сортировки
                'type'        => 'textarea', // тип элемента формы
            ]
        );
    }
);

Теперь в настройках темы доступна секция «Настройки подвала». Осталось только вывести текст copyright-а в подвале сайта:

<footer>
    <div class="container">
        <div id="copyright">
            <?php
            $copyright = get_theme_mod(
                'setting_footer_copyright_text',
                ''
            );
            ?>
            <?= $copyright; ?>
        </div>
    </div>
</footer>

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

Предварительный просмотр без перезагрузки окна

Хорошо, с этим разобрались, двигаемся дальше. Сейчас окно предварительного просмотра просто перезагружается. Давайте изменим способ обновления на AJAX, для этого в файл customize.php добавляем код, который подключит файл customize.js:

/*
 * Подключаем JS-файл скрипта, который обеспечивает предварительный
 * просмотр изменений настроек темы без перезагрузки окна просмотра
 */
add_action(
    'customize_preview_init',
    function() {
        wp_enqueue_script(
            'theme-settings-preview', // будет зарегистрирован под этим именем
            get_template_directory_uri() . '/customize/customize.js',
            array('jquery', 'customize-preview'), // должен быть подключен после этих скриптов
            null, // версии нет, поэтому null
            true // подключаем перед закрывающим тегом body
        );
    }
);

Изменяем способ обновления окна просмотра с refresh на postMessage:

        // Добавляем настройку (setting)
        $customizer->add_setting(
            'setting_footer_copyright_text', // идентификатор настройки
            [
                'default'   => '© Copyright. All rights reserved', // значение по умолчанию
                'type'      => 'theme_mod', // настройка только для темы
                'transport' => 'postMessage', // как обновлять окно просмотра
            ]
        );

И осталось только добавить в customize.js js-код обновления copyright-a:

(function($) {
    // изменяем текст copyright-а в подвале
    wp.customize('setting_footer_copyright_text', function(value) {
        value.bind(function(to) {
            $('#copyright').html(to);
        });
    });
})(jQuery);

Функция customize() принимает два параметра — идентификатор настройки, которую нужно прослушивать и анонимную функцию, которая будет выполнять действия.

Предпросмотр без перезагрузки для настроек из коробки

Возможность изменять заголовок и описание блога идет по умолчанию. Давайте настроим изменения на лету и для них. Воспользуемся методом get_setting(), чтобы получить и изменить опции для настроек.

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

        // Добавляем секцию «Настройки подвала»
        $customizer->add_section(/*...*/);

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

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

        /*
         * Изменяем способ обновления настроек из коробки «Название сайта»
         * и «Краткое описание»
         */
        $customizer->get_setting('blogname')->transport = 'postMessage';
        $customizer->get_setting('blogdescription')->transport = 'postMessage';
    }
);

(function($) {
    // изменяем текст copyright-а в подвале
    wp.customize('setting_footer_copyright_text', function(value) {
        value.bind(function(to) {
            $('#copyright').html(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);

<header>
    <div>
        <div class="container">
            <span id="blogname">
                <?php bloginfo('name'); ?>
            </span>
            <span id="blogdescription">
                <?php bloginfo('description'); ?>
            </span>
        </div>
    </div>
    <nav class="navbar navbar-expand-lg navbar-dark bg-primary">
        <!-- ..... -->
    </nav>
</header>

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

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