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

17.04.2019

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

Давайте рассмотрим несколько примеров «дезинфекции» входных данных. 

add_action(
    'customize_register',
    function($customizer) { // $customizer — объект класса WP_Customize_Manager

        $customizer->add_section(
            'section_example',
            [
                'title'          => 'Очистка входных данных',
                'priority'       => 10,
            ]
        );

        /*
         * Очистка данных для checkbox
         */
        $customizer->add_setting(
            'setting_example_checkbox',
            [
                'default' => '',
                'sanitize_callback' => function($value) {
                    // тут все просто, checkbox передается на сервер
                    // только в том случае, если он был отмечен
                    return isset($value) ? true : false;
                }
            ]
        );
        $customizer->add_control(
            'control_example_checkbox',
            [
                'label'    => 'Элемент управления checkbox',
                'section'  => 'section_example',
                'settings' => 'setting_example_checkbox',
                'type'     => 'checkbox',
                'priority' => 10,
            ]
        );

        /*
         * Очистка данных для radio
         */
        $customizer->add_setting(
            'setting_example_radio',
            [
                'default' => 'one',
                'sanitize_callback' => function($value, $setting) {
                    // удаляем все, кроме [-a-z0-9_] и переводим в нижний регистр
                    $value = sanitize_key($value);

                    // получаем список допустимых значений
                    $choices = $setting->manager->get_control($setting->id)->choices;

                    // проверяем, что очищенное значение есть в списке допустимых
                    // значений; если это не так, возвращаем дефолтное значение
                    return array_key_exists($value, $choices) ? $value : $setting->default;
                }
            ]
        );
        $customizer->add_control(
            'control_example_radio',
            [
                'label'    => 'Элемент управления radio',
                'section'  => 'section_example',
                'settings' => 'setting_example_radio',
                'type'     => 'radio',
                'choices'  => [
                    'one'   => 'Первый',
                    'two'   => 'Второй',
                    'three' => 'Третий',
                ],
                'priority'  => 20,
            ]
        );

        /*
         * Очистка данных для select
         */
        $customizer->add_setting(
            'setting_example_select',
            [
                'default' => 'one',
                'sanitize_callback' => function($value, $setting) {
                    // удаляем все, кроме [-a-z0-9_] и переводим в нижний регистр
                    $value = sanitize_key($value);

                    // получаем список допустимых значений
                    $choices = $setting->manager->get_control($setting->id)->choices;

                    // проверяем, что очищенное значение есть в списке допустимых
                    // значений; если это не так, возвращаем дефолтное значение
                    return array_key_exists($value, $choices) ? $value : $setting->default;
                }
            ]
        );
        $customizer->add_control(
            'control_example_select',
            [
                'label'    => 'Элемент управления select',
                'section'  => 'section_example',
                'settings' => 'setting_example_select',
                'type'     => 'select',
                'choices'  => [
                    'one'   => 'Первый',
                    'two'   => 'Второй',
                    'three' => 'Третий',
                ],
                'priority'  => 30,
            ]
        );

        /*
         * Очистка данных для text
         */
        $customizer->add_setting(
            'setting_example_text',
            [
                'default' => '',
                // удаляем html-теги, оставляем только текст
                'sanitize_callback' => 'wp_filter_nohtml_kses',
            ]
        );
        $customizer->add_control(
            'control_example_text',
            [
                'label'    => 'Элемент управления text',
                'section'  => 'section_example',
                'settings' => 'setting_example_text',
                'type'     => 'text',
                'priority' => 40,
            ]
        );

        /*
         * Очистка данных для e-mail
         */
        $customizer->add_setting(
            'setting_example_email',
            [
                'default' => '',
                // оставляем только символы, допустимые в e-mail
                'sanitize_callback' => 'sanitize_email',
            ]
        );
        $customizer->add_control(
            'control_example_email',
            [
                'label'    => 'Элемент управления e-mail',
                'section'  => 'section_example',
                'settings' => 'setting_example_email',
                'type'     => 'email',
                'priority' => 50,
            ]
        );

        /*
         * Очистка данных для URL
         */
        $customizer->add_setting(
            'setting_example_url',
            [
                'default' => '',
                // оставляем только символы, допустимые в URL
                'sanitize_callback' => 'esc_url_raw',
            ]
        );
        $customizer->add_control(
            'control_example_url',
            [
                'label'    => 'Элемент управления URL',
                'section'  => 'section_example',
                'settings' => 'setting_example_url',
                'type'     => 'url',
                'priority' => 60,
            ]
        );
    }
);

Как скрыть панель, секцию или элемент управления

При добавлении панели, секции или элемента управления, можно задать параметр active_callback. Значение этого параметра — функция обратного вызова, которая возвращает true или false. Если функция возвращает false — панель, секция или элемент управления будут скрыты.

Простой пример — панель будет показана, если в окне предварительного просмотра — главная страница сайта: 

$wp_customize->add_panel(
    'front_page_panel',
    [
       'title' => 'Главная страница',
       'description' => 'Эта панель доступна, когда в окне просмотра — главная страница',
       'priority' => 10,
       'active_callback' => 'is_front_page',
    ]
);

Можно написать свою функцию обратного вызова, при вызове она получает параметр — объект класса:

  • WP_Customize_Panel
  • WP_Customize_Section
  • WP_Customize_Control

Давайте создадим секцию «Настройка copyright» и разместим в ней три настройки. Первая настройка позволяет выбрать, что будем изменять — текст copyright-а или цвет copyright-а. Две другие настройки, как нетрудно догадаться, позволяют изменить текст или цвет copyright-а. При выборе первой настройки, будем скрывать вторую или третью настройку.

Итак, добавляем секцию «Настройка copyright», настройку «Текст или цвет» и элемент управления для нее: 

add_action(
    'customize_register',
    function($customizer) { // $customizer — объект класса WP_Customize_Manager

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

        // Добавляем настройку «Текст или цвет»
        $customizer->add_setting(
            'setting_copyright_choice', // идентифкатор настройки
            [
                'default' => 'text', // значение по умолчанию
                'type'    => 'theme_mod', // настройка только для темы
            ]
        );
        $customizer->add_control(
            'control_copyright_choice', // идентификатор элемента управления
            [
                'label'    => 'Текст или цвет', // label элемента формы
                'section'  => 'section_copyright', // идентификатор секции
                'settings' => 'setting_copyright_choice', // идентификатор настройки
                'type'     => 'radio', // тип элемента формы
                'choices'  => [
                    'text'  => 'Текст copyright',
                    'color' => 'Цвет copyright',
                ],
                'priority' => 10, // порядок сортировки
            ]
        );
    }
);

Добавляем настройку «Текст copyright» и элемент управления для нее: 

add_action(
    'customize_register',
    function($customizer) { // $customizer — объект класса WP_Customize_Manager

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

        // Добавляем настройку «Текст copyright»
        $customizer->add_setting(
            'setting_copyright_text', // идентифкатор настройки
            [
                'default' => '© Copyright. All rights reserved', // значение по умолчанию
                'type'    => 'theme_mod', // настройка только для темы
            ]
        );
        $customizer->add_control(
            'control_copyright_text', // идентификатор элемента управления
            [
                // label элемента формы
                'label'           => 'Текст copyright',
                // описание элемента формы
                'description'     => 'Добавьте сюда текст copyright',
                // идентификатор секции
                'section'         => 'section_copyright',
                // идентификатор настройки
                'settings'        => 'setting_copyright_text',
                // когда показывать этот элемент управления
                'active_callback' => function ($control) {
                    $value = $control->manager->get_setting('setting_copyright_choice')->value();
                    if ($value == 'text') {
                        return true;
                    }
                    return false;
                },
                // порядок сортировки
                'priority'        => 20,
            ]
        );
    }
);

Добавляем настройку «Цвет copyright» и элемент управления для нее: 

add_action(
    'customize_register',
    function($customizer) { // $customizer — объект класса WP_Customize_Manager

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

        // Добавляем настройку «Цвет copyright»
        $customizer->add_setting(
            'setting_copyright_color',
            array(
                'default' => '#000000', // значение по умолчанию
                'type'    => 'theme_mod', // настройка только для темы
            )
        );
        $customizer->add_control(
            new WP_Customize_Color_Control(
                $customizer,
                'control_copyright_color', // идентификатор элемента управления
                [
                    // label элемента формы
                    'label'           => 'Цвет copyright',
                    // описание элемента формы
                    'description'     => 'Подберите цвет для copyright',
                    // идентифиткатор секции
                    'section'         => 'section_copyright',
                    // идентифкатор настройки
                    'settings'        => 'setting_copyright_color',
                    // когда показывать этот элемент управления
                    'active_callback' => function ($control) {
                        $value = $control->manager->get_setting('setting_copyright_choice')->value();
                        if ($value == 'color') {
                            return true;
                        }
                        return false;
                    },
                    // порядок сортировки
                    'priority'        => 30,
                ]
            )
        );
    }
);

И вот что получилось в итоге:

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

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

Каталог оборудования
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.