Статьи

WordPress Theme Customizer: методология для разделов, настроек и элементов управления — часть 2

Февраль 5, 2019

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

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

Итак, с этим сказал, давайте продолжим.

Напоминание о нашей методологии

Напомним из прошлой статьи, что наша методология такова:

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

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

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

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

Давайте добавим новую опцию в Theme Customizer, которая позволяет пользователю выбирать между цветовыми схемами — одна из них по умолчанию является черно-белой, а другая — обратной.

1. Добавить параметр в раздел

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

01
02
03
04
05
06
07
08
09
10
11
12
13
14
15
16
17
18
19
20
$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 и, очевидно, мы используем транспортный тип postMessage .

Во-вторых, обратите внимание, что мы также предоставили значение по default которое установлено как normal . Именно это значение приводит нас к вызову add_control .

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

Обратите внимание, что мы связываем его с tcx_display_options которые мы определили в предыдущей статье. Мы дали ему метку Color Scheme, так как это, очевидно, то, что мы меняем, и мы устанавливаем type элемента управления в качестве переключателя.

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

Вот почему значение по умолчанию для вызова add_setting установлено на normal .

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

Но на данный момент, это все равно мало что даст.

3. Напишите необходимый JavaScript

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

  wp.customize ('tcx_color_scheme', function (value) {
	 value.bind (function (to) {

		 if ('inverse' === to) {

			 $ ('body') .css ({
				 фон: '# 000',
				 цвет: "#fff"
			 });

		 } еще {

			 $ ('body') .css ({
				 фон: '#fff',
				 цвет: «# 000»
			 });

		 }

	 });
 });

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

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

4. Сделайте необходимые звонки на get_theme_mod

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

01
02
03
04
05
06
07
08
09
10
11
12
<?php if ( ‘normal’ === get_theme_mod( ‘tcx_color_scheme’ ) ) { ?>
 
    background: #000;
    color: #fff;
 
<?php } else { ?>
 
    background: #fff;
    color: #000;
 
<?php } // end if/else ?>
}

Достаточно легко понять, верно? Он работает точно так же, как и наш код JavaScript, за исключением того, что он действительно применяется к теме при загрузке страницы, а не только при ее предварительном просмотре.

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

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

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

На этом этапе методология должна стать очень знакомой.

1. Добавить параметр в раздел

Сначала мы определим параметр для tcx_font который мы будем использовать для ссылки во всем коде чуть позже:

1
2
3
4
5
6
7
$wp_customize->add_setting(
    ‘tcx_font’,
    array(
        ‘default’ => ‘times’,
        ‘transport’ => ‘postMessage’
    )
);

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

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

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

С учетом сказанного добавьте следующий код в функцию tcx_register_theme_customizer :

01
02
03
04
05
06
07
08
09
10
11
12
13
$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 в настройщик тем со следующими тремя опциями для шрифтов:

  1. Times New Roman
  2. Arial
  3. Новый Курьер

И теперь нам нужно записать параметры шрифта, чтобы они динамически меняли шрифт темы.

3. Напишите необходимый JavaScript

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

Во-первых, убедитесь, что у вас есть var sFont определенная в верхней части файла JavaScript чуть выше первого вызова wp.customize .

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

  wp.customize ('tcx_font', function (value) {
	 value.bind (function (to) {

		 switch (to.toString (). toLowerCase ()) {

			 case 'times':
				 sFont = 'Times New Roman';
				 перемена;

			 дело «ариал»:
				 sFont = 'Arial';
				 перемена;

			 дело 'курьер':
				 sFont = 'Курьер Новый, Курьер';
				 перемена;

			 case 'helvetica':
				 sFont = 'Helvetica';
				 перемена;

			 дефолт:
				 sFont = 'Times New Roman';
				 перемена;

		 }

		 $ ('body') .css ({
			 fontFamily: sFont
		 });

	 });

 });

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

И, в целях защитного кодирования, если кто-то не определен или что-то идет не так во время транспортировки, то мы собираемся по умолчанию использовать Times New Roman .

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

4. Сделайте необходимые звонки, чтобы get_theme_mod

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

На самом деле это простой вызов:

1
font-family: <?php echo get_theme_mod( ‘tcx_font’ );

Выполнено.

Настройте сообщение об авторском праве

Наконец, позвольте пользователю настроить сообщение об авторских правах, которое появляется в нижней части шаблона нижнего колонтитула.

Давайте настроим шаблон сейчас. В настоящее время это должно выглядеть так:

1
2
3
<div id=»footer»>
    &copy;
</div><!— /#footer —>

Но давайте обновим его, чтобы он выглядел так:

1
2
3
<div id=»footer»>
    &copy;
</div><!— /#footer —>

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

1. Добавить параметр в раздел

Сначала мы представим нашу окончательную настройку:

1
2
3
4
5
6
7
8
$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 которая tcx_sanitize_copyright любые теги, косые черты и другие недопустимые теги, которые должны быть сериализованы в базу данных:

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

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

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

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

1
2
3
4
5
6
7
8
$wp_customize->add_control(
    ‘tcx_footer_copyright_text’,
    array(
        ‘section’ => ‘tcx_display_options’,
        ‘label’ => ‘Copyright Message’,
        ‘type’ => ‘text’
    )
);

Здесь, опять же, мы привязываем его к разделу tcx_display_options и даем метку «Сообщение об авторском праве», чтобы пользователи могли tcx_display_options таблицы. Наконец, мы определили это как ввод text .

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

3. Напишите необходимый JavaScript

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

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

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

4. Сделайте необходимые звонки, чтобы get_theme_mod

И наконец, хотя мы уже сделали это в шаблоне, мы продолжим и рассмотрим код здесь:

1
2
3
<div id=»footer»>
    &copy;
</div><!— /#footer —>

Обратите внимание, что мы читаем значение tcx_footer_copyright_text а затем tcx_footer_copyright_text это значение на экран.

Следующий…

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

Единственное, что осталось рассмотреть — это некоторые из более продвинутых, встроенных элементов управления, которые предлагает WordPress. Поэтому в следующей статье мы рассмотрим некоторые из этих функций и способы их реализации.

А пока скачайте последнюю версию нашей темы, изучите ее, настройте ее и приготовьтесь к следующей статье!

35
Share: