Advertisement
  1. Code
  2. WordPress

Customizer JavaScript API: Предварительный просмотр

Scroll to top
Read Time: 4 min
This post is part of a series called The WordPress Customizer JavaScript APIs.
Customizer JavaScript APIs: Panel, Section, and Control

Russian (Pусский) translation by blacktreelab (you can also view the original English article)

Предположим, что мы создали тему с определенным числом параметров и элементов управления в Customizer, которые позволяют пользователям настроить во фронт-енд такие параметры как заголовок, подзаголовок и цвет.

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

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

Two Edit buttons in WordPresscom CustomizerTwo Edit buttons in WordPresscom CustomizerTwo Edit buttons in WordPresscom Customizer
Новая кнопка «Редактировать» в окне просмотра настройщика на WordPress.com,

Мы так же можем использовать данное усовершенствование UX в Customizer JavaScript API в нашей теме. И вы увидите, что это не так сложно, как вы могли бы себе представить. Итак давайте взглянем на то, как это работает.

Необходимые условия

В предыдущем уроке мы написали файл customizer-control.js, который работает только с внутренним интерфейсом настройщика (Customizer). В данном уроке мы создадим еще один файл, customizer-preview.js, который загружается в окне предварительного просмотра. У вас должны быть созданы и загружены эти два файла. В противном случае я предлагаю вам просмотреть первый урок данной серии, чтобы вы могли следовать данному уроку.

Создаем кнопку Edit

Во-первых, добавляем пару кнопок Edit рядом с название сайта.

1
<h1 class="site-title">
2
  <a href="<?php echo esc_url( home_url( '/' ) ); ?>" rel="home"><?php bloginfo( 'name' ); ?></a>
3
	<?php if ( is_customize_preview() ) : ?>
4
	<button class="customizer-edit" data-control='{ "name":"blogname" } ''><?php esc_html_e( 'Edit Text', 'cjs' ); ?></button>
5
	<button class="customizer-edit" data-control='{ "name":"header_textcolor", "color": true } ''><?php esc_html_e( 'Edit Color', 'cjs' ); ?></button>
6
	<?php endif; ?>
7
</h1>

Воспользуемся is_customize_preview(), эта кнопка будет показан только в окне просмотра настройщик. Каждой из этих кнопок присвоен класса с именем .customizer-edit, который позволит нам связать данные кнопки с событием click.

Кроме того, мы также добавили data-control атрибуты к данным кнопкам, содержащие либо имя либо идентификатор зарегистрированного в настройщике параметра. Имя в этом атрибуте поможет нам определить правильные настройки и элементы управления.

An example of using the data-control attributeAn example of using the data-control attributeAn example of using the data-control attribute
Два кнопки Edit для настройки заголовка и цвета заголовка.

Так как презентация не является нашей главной задачей в настоящее время, внешний вид наших двух кнопок «Edit» в окне предварительного просмотра оставляет желать лучшего, по сравнению с такими же кнопками в WordPress.com. Вы можете добавить стили, соответсвующие дизайну вашей темы в целом.

Определяем пользовательские события

Далее мы определим пользовательское событие; Событие, которое реагирует на нажатие одной из кнопок. Добавьте следующий код в файл customizer-preview.js.

1
var customize = wp.customize;
2
3
$( document.body ).on( 'click', '.customizer-edit', function(){
4
	customize.preview.send( 'preview-edit', $( this ).data( 'control' ) );
5
});

С помощью метода .preview.send(), код привязывает каждую из кнопок к событию click, что приводит в действие событие. Метод .preview.send() принимает два параметра, а именно: имя настраиваемого события и аргумент. В нашем случае мы определили новое событие предварительного просмотра preview-edit,  и передаем аргумент с данными, полученными из атрибута кнопки data-control.

Слушаем пользовательские события

Мы можем слушать пользовательские события из метода .preview.send() через другой метод настройщика, называемый .previewer.bind() — Обратите внимание previewer написан с er. Этот метод похож на метод jQuery .on(), в котором мы определяем имя события и функция, которая будет выполняться при запуске события. Добавьте .previewer.bind() в файл customizer-control.js следующим образом.

1
var customize = wp.customize;
2
3
customize.previewer.bind( 'preview-edit', function( data ) {
4
5
} );

Далее мы преобразуем данные в формат, соответствующий JSON, выбирем элемент управления, основываясь на name,  и сфокусируемся на элементе управления, с помощью метода настройщика .focus().

1
var customize = wp.customize;
2
3
customize.previewer.bind( 'preview-edit', function( data ) {
4
	var data = JSON.parse( data );
5
	var control = customize.control( data.name );
6
7
	control.focus();
8
} );

Теперь, как вы можете видеть ниже, когда мы нажимаем, например, на кнопку «Редактирование текста», он покажет параметр «Заголовок Сайта» и зафиксирует курсор на вводе.

Updating the site titleUpdating the site titleUpdating the site title
Кнопка Edit в действии.

Кроме того, если взглянуть на исходный код, метод .focus() принимает параметр с именем completeCallback. Этот параметр сработает после того, как выполнится функция .focus(). Мы можем использовать этот параметр, например, чтобы добавить эффект анимации.

1
customize.previewer.bind( 'preview-edit', function( data ) {
2
3
	var data = JSON.parse( data );
4
	var control = customize.control( data.name );
5
6
	control.focus( {
7
		completeCallback : function() {
8
			setTimeout( function() {
9
				control.container.addClass( 'shake animated' );
10
			}, 300 );
11
		}
12
	} );
13
} );

Опыт пользователя теперь выглядит более интересным.

The final version of the experienceThe final version of the experienceThe final version of the experience
Элемент input усовершентстванный с CSS анимацией

Подводя итоги

Мы уже упоминали несколько методов Customizer JavaScript API:

  • метод .preview.send() для приведения пользовательского события.
  • метод .previewer.bind()  для привязки настройщика к пользовательскому событию.
  • метод .focus(), чтобы сфокусироваться на input элементе управления, а так же параметр completeCallback.

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

У нас осталась еще одна кнопка, чтобы настроить управление цветом. Но я оставлю эту задачу для вас, используйте те же три метода для функции «Изменить цвет». Если вы сомневаетесь, не стесняйтесь заглядывайте в исходный код.

Advertisement
Did you find this post useful?
Want a weekly email summary?
Subscribe below and we’ll send you a weekly email summary of all new Code tutorials. Never miss out on learning about the next big thing.
Advertisement
Looking for something to help kick start your next project?
Envato Market has a range of items for sale to help get you started.