Руководство по настройщику (кастомайзеру) тем WordPress, часть 6

В последней статье мы определили простую методологию для добавления новой секции, новых параметров и элементов управления в кастомайзер. В этой статье мы продолжим начатое; теперь мы попробуем добавить новые параметры и элементы управления в уже существующую секцию, однако мы рассмотрим больший набор разных опций – к примеру, радиокнопки, раскрывающиеся списки и поля ввода.

Итак, давайте приступим к работе.

Напоминаем методологию.

Давайте быстро обратимся к предыдущей статье и приведем определенную нами методологию:

1. Определяем секцию.
2. Добавляем параметр к секции.
3. Добавляем элемент управления к секции.
4. Пишем необходимый JS.
5. Совершаем необходимый вызов get_theme_mod

Мы будем выполнять эти шаги для каждого нового элемента управления. При необходимости мы также поговорим о валидации и санитизации данных.

В самом конце статьи размещена готовая версия кода, доступная для скачивания с GitHub.

Изменяем цветовую схему

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

1. Добавляем параметр в секцию.

Первое, что нам нужно сделать – это добавить параметр и элемент управления к нашей функции tcx_register_theme_customizer. Добавим чуть ниже следующие два вызова функций:

$wp_customize->add_setting(
    'tcx_color_scheme',
    array(
        'default'   => 'normal',
        'transport' => 'postMessage'
    )
);
 
$wp_customize->add_control(
    'tcx_color_scheme',
    array(
        'section'  => 'tcx_display_options',
        'label'    => 'Color Scheme',
        'type'     => 'radio',
        'choices'  => array(
            'normal'    => 'Normal',
            'inverse'   => 'Inverse'
        )
    )
);

Отметьте, что мы добавили новый параметр, идентифицируемый по tcx_color_scheme ID; при этом мы, естественно, используем транспортный тип postMessage.

Также обратите внимание на то, что мы установили значение по умолчанию «normal». Это значение будет использоваться в вызове add_control.

2. Добавляем элемент управления для параметра.

Заметьте, что мы привязали элемент управления к секции tcx_display_options, которая была определена в прошлой статье. Мы дали ему лейбл Color Scheme, поскольку этот элемент управления отвечает за изменение цветовой схемы. Также мы установили тип элемента управления type как radio, т.е. задали радиокнопку.

Теперь мы должны передать массив с пользовательским выбором, в котором первый ключ – это значение опции, а второй ключ – это лейбл для радиокнопки.

Именно по этой причине стандартное значение для вызова add_setting задано как normal.

Теперь мы должны сохранить свою работу, обновить кастомайзер и увидеть новую опцию.

Однако на данный момент она не будет работать.

3. Пишем необходимый JS.

Теперь мы должны перейти к js/theme-customizer.js и добавить следующий блок кода:

wp.customize( 'tcx_color_scheme', function( value ) {
    value.bind( function( to ) {
 
        if ( 'inverse' === to ) {
 
            $( 'body' ).css({
                background: '#000',
                color:      '#fff'
            });
 
        } else {
 
            $( 'body' ).css({
                background: '#fff',
                color:      '#000'
            });
 
        }
 
    });
});

Это говорит кастомайзеру, что нужно изменить цвет фона body, а также цвет шрифта в зависимости от радиокнопки параметра.

Применив данный код, вы сможете обновить кастомайзер, после чего вы увидите все произошедшие изменения. Единственный минус на данный момент – значение не сохраняется в базу данных.

4. Совершаем необходимый вызов get_theme_mod

Последнее действие, которое мы должны осуществить, чтобы убедиться в том, что информация считана из базы данных для изменения цветовой схемы – это добавить стили к блоку style в функции tcx_customizer_css:

<?php if ( 'normal' === get_theme_mod( 'tcx_color_scheme' ) ) { ?>
 
    background: #000;
    color:      #fff;
 
<?php } else { ?>
 
    background: #fff;
    color:      #000;
 
<?php } // end if/else ?>
}

Ничего сложного для понимания. Код работает так же, как и наш JS, с одним лишь исключением, что он применяется к теме при загрузке страницы, а не только при предварительном просмотре.

Изменяем шрифт

Теперь мы позволим пользователям изменять глобальный шрифт в теме.

Чтобы сделать это, мы будем использовать элемент select с набором опций, среди которых пользователь сможет выбрать желаемый шрифт. Методология будет той же самой.

1. Добавляем параметр в секцию.

Сначала мы определяем параметр для tcx_font.

$wp_customize->add_setting(
    'tcx_font',
    array(
        'default'   => 'times',
        'transport' => 'postMessage'
    )
);

Как и в прошлом примере, мы обеспечиваем стандартное значение default, которое будет отображаться сразу же при введении нового элемента управления.

2. Добавляем элемент управления для параметра.

Как было отмечено ранее, мы предложим пользователям возможность выбора шрифта, используя элемент select. Это во многом похоже на то, как работают радиокнопки. Мы создадим массив с ключами и значениями, которые будут определять шрифт. Однако фактический тип элемента type будет несколько иным.

Добавляем следующий код в функцию tcx_register_theme_customizer:

$wp_customize->add_control(
    'tcx_font',
    array(
        'section'  => 'tcx_display_options',
        'label'    => 'Theme Font',
        'type'     => 'select',
        'choices'  => array(
            'times'     => 'Times New Roman',
            'arial'     => 'Arial',
            'courier'   => 'Courier New'
        )
    )
);

Мы вводим элемент select в кастомайзер со следующими опциями для шрифтов:

• Times New Roman
• Arial
• Courier New

Теперь нам нужно написать код, который будет отвечать за динамическое изменение шрифта в теме.

3. Пишем необходимый JS.

Открываем js/theme-customizer.js и добавляем в него следующий код. Отметьте, что код будет более сложным, нежели тот, что мы писали ранее.

Сначала убедитесь в том, что var sFont определен в самом начале файла JS, над первым вызовом wp.customize.

Затем добавьте следующий блок кода.

wp.customize( 'tcx_font', function( value ) {
    value.bind( function( to ) {
 
        switch( to.toString().toLowerCase() ) {
 
            case 'times':
                sFont = 'Times New Roman';
                break;
 
            case 'arial':
                sFont = 'Arial';
                break;
 
            case 'courier':
                sFont = 'Courier New, Courier';
                break;
 
            case 'helvetica':
                sFont = 'Helvetica';
                break;
 
            default:
                sFont = 'Times New Roman';
                break;
 
        }
 
        $( 'body' ).css({
            fontFamily: sFont
        });
 
    });
 
});

Хотя функция и выглядит длинной, в действительности же она достаточно проста; мы принимаем входящее значение и затем используем switch/case для определения того, какой шрифт выбран. Основываясь на выбранном значении, мы привязываем его к переменной sFont.

В целях защиты кода, если ни один шрифт не будет выбран или что-то пойдет не так в процессе транспорта, мы устанавливаем в качестве шрифта стандартный Times New Roman.

Наконец, мы применяем значение sFont к атрибуту font-family элемента body, используя jQuery функцию css.

4. Совершаем необходимый вызов get_theme_mod

Теперь, чтобы поддержать нашу методологию, мы обновим нашу функцию tcx_customizer_css, т.е. сделаем так, чтобы шрифт должным образом применялся к body.

В действительности для этого нужен всего лишь простой вызов:

font-family: <?php echo get_theme_mod( 'tcx_font' ); ?>

Готово.

Изменяем копирайт в футере.

Теперь давайте позволим пользователям менять копирайт, стоящий в футере.

Обычно шаблон для вывода копирайта имеет следующий вид:

<div id="footer">
    &copy; <?php echo date( 'Y' ); ?> <?php bloginfo( 'title' ); ?> All Rights Reserved
</div><!-- /#footer -->

Однако мы немного изменим его:

<div id="footer">
    &copy; <?php echo date( 'Y' ); ?> <?php bloginfo( 'title' ); ?> <span id="copyright-message"><?php echo get_theme_mod( 'tcx_footer_copyright_message' ); ?></span>
</div><!-- /#footer -->

Несмотря на то что такой подход несколько выбивается из нашей методологии, мы должны сделать так, чтобы кастомайзер мог использовать все преимущества элемента span, а следовательно, мы могли бы выводить копирайт, определенный пользователем.

1. Добавляем параметр в секцию.

Сначала вводим наш параметр:

$wp_customize->add_setting(
    'tcx_footer_copyright_text',
    array(
        'default'            => 'All Rights Reserved',
        'sanitize_callback'  => 'tcx_sanitize_copyright',
        'transport'          => 'postMessage'
    )
);

Отметьте, что в данном случае есть одно отличие с предыдущим кодом. Здесь мы используем ключ sanitize_callback. Что он делает? Он определяет функцию, которая выполняется перед сериализацией введенной информации – ведь мы не хотим, чтобы в базу данных попал неверный контент.

Мы определяем функцию tcx_sanitize_copyright, которая удаляет любые теги, слэши и другие запрещенные теги из контента:

function tcx_sanitize_copyright( $input ) {
    return strip_tags( stripslashes( $input ) );
}

Затем мы просто возвращаем значение санитизированного ввода.

2. Добавляем элемент управления для параметра.

Пришло время добавить фактический элемент управления для параметра.

$wp_customize->add_control(
    'tcx_footer_copyright_text',
    array(
        'section'  => 'tcx_display_options',
        'label'    => 'Copyright Message',
        'type'     => 'text'
    )
);

Опять же, мы привязываем его к секции tcx_display_options и даем ему метку “Copyright Message”. В качестве типа ввода указываем text.

3. Пишем необходимый JS.

JS-код для данной возможности достаточно простой, особенно если вы дали элементу span уникальный ID, что мы и сделали выше.

wp.customize( 'tcx_footer_copyright_text', function( value ) {
    value.bind( function( to ) {
        $( '#copyright-message' ).text( to );
    });
});

Код получает значение аргумента to и затем устанавливает его как значение текста span.

4. Совершаем необходимый вызов get_theme_mod

Мы уже прописали его в шаблоне еще в самом начале, но все равно приведем код еще раз для лучшего понимания:

<div id="footer">
    &copy; <?php echo date( 'Y' ); ?> <?php bloginfo( 'title' ); ?> <span id="copyright-message"><?php echo get_theme_mod( 'tcx_footer_copyright_text' ); ?></span>
</div><!-- /#footer -->

Здесь мы считываем значение tcx_footer_copyright_text и затем выводим значение на экран.

В следующей статье…

На данный момент это все! Мы изучили некоторые базовые элементы управления, предложили пользователю набор различных опций для изменения представления темы, а также раскрыли случай санитизации ввода наряду с процессом сериализации.

Единственное, что нам осталось сделать – это изучить некоторые продвинутые средства управления, которые предлагает WP. В следующей статье мы взглянем на некоторые такие возможности, а также посмотрим, как применить их.

Не забудьте загрузить последнюю версию нашей темы и поэкспериментировать с ней!

Источник: wp.tutsplus.com