Руководство по настройщику (кастомайзеру) тем 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

Блог про WordPress
Комментарии: 6
  1. Qlex

    Спасибо! Давно искал такую информацию

  2. Сергей

    здравствуйте помогите пожалуйста с решением вопроса по WP когда я пытаюсь открыть настройки или предпросмотр темы мне открывается пустая страница и вот такая вот радость
    Fatal error: Uncaught exception ‘Exception’ with message ‘Supplied nav_menu_item value missing property: description’ in /var/www/vhosts/2/105267/webspace/httpdocs/wp74.ru/wp-includes/customize/class-wp-customize-nav-menu-item-setting.php:191 Stack trace: #0 /var/www/vhosts/2/105267/webspace/httpdocs/wp74.ru/wp-includes/class-wp-customize-nav-menus.php(551): WP_Customize_Nav_Menu_Item_Setting->__construct(Object(WP_Customize_Manager), ‘nav_menu_item[6…’, Array) #1 [internal function]: WP_Customize_Nav_Menus->customize_register(Object(WP_Customize_Manager)) #2 /var/www/vhosts/2/105267/webspace/httpdocs/wp74.ru/wp-includes/plugin.php(525): call_user_func_array(Array, Array) #3 /var/www/vhosts/2/105267/webspace/httpdocs/wp74.ru/wp-includes/class-wp-customize-manager.php(583): do_action(‘customize_regis…’, Object(WP_Customize_Manager)) #4 [internal function]: WP_Customize_Manager->wp_loaded(») #5 /var/www/vhosts/2/105267/webspace/httpdocs/wp74.ru/wp-includes/plugin.php(525): call_user_func_array(Array, Array) #6 /var/www in /var/www/vhosts/2/105267/webspace/httpdocs/wp74.ru/wp-includes/customize/class-wp-customize-nav-menu-item-setting.php on line 191

    Обновки перезалил в ручную папку инклюд и папку админ плагины выключал темы менял что и как не могу понять, просто по тому как ошибки тянутся вроде как из папки инклюд но я понимаю что там только фонкция даёт сбой я думал может тема какая нибудь наводит погоду скачать стандартную с оф сайта, остальные удалил, эффект не поменялся, думал может вирусняк но пока на антивир-алярм тишина,

    Попробовал плагином накатить кастомайзер эффект нулевой, три дня любви с сайтом и ни какого удовольствия,

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

    1. Дмитрий (автор)

      Это проблема с меню в админке. Зайдите в раздел Внешний вид — Меню. Попробуйте для начала заново сохранить все несохраненные меню (даже если они неактивные). Если это не поможет, то в таком случае удалите все меню, в том числе используемые в данный момент, после чего заново их создайте.

      Это должно решить проблему.

  3. Александр

    Здравствуйте. Вот опять же дефолтный текст из ‘default’ => ‘All Rights Reserved’ не выводится, то есть если строка пустая, то и после названия блога ничего не пишется. Так и должно быть? Башку сломал, как заставить движок выводить дефолтные значения

  4. Саша

    ошибка в коде: в add_control мы пишем tcx_footer_copyright_text а в get_theme_mod пишем tcx_footer_copyright_message. Измените _message на _text и все заработает

  5. Мария

    ООООООгромное спасибо за подробный разбор теперь мне наконец то понятно. НО не понятно ЗАЧЕМ это, а главное, как без него и где редактировать тему Startkit которая бесплатная версия, обновитесь до про. В этих бесплатных версиях не весь код что ли? Я неделю в шары долблюсь, просто в коде 111111111 пишу и нигде на страницах не появляется. Чувствую себя блондинкой просто. А нельзя оставить функционал придуманный автором и где то на html написать свою версию страницы и чтобы всё работало? Вот если честно хрень полная эти кастомайзеры и др. нужны для лохов которые код писать не умеют по сути, у меня наоборот проблема не удобно мне выбирать, мне проще написать, стили забубенить, скрипты подключить и наслаждаться. У меня руки уже опускаются с этим дебильным вордпрессом. Не понимаю я. Если любой движок я изучаю как раз расковыривая чужие шаблоны, то здесь просто ппц. а) они все по разному созданы с использованием доп. фреймворков. б вот этот кастомайзер.. и где код!? как им вообще свои блоки то писать не входящие в кастомайзер?

Добавить комментарий

Получать новые комментарии по электронной почте.