WordPress Customizer активно развивается с момента его создания. API постоянно развиваются, в том числе JavaScript API. Тем не менее, это один из наименее документированных API в Кодексе WordPress. Следовательно, есть только несколько обширных записей, которые показывают, как использовать API JavaScript практически .
Использование JavaScript API в WordPress Customizer может фактически позволить нам предоставлять более привлекательный опыт в реальном времени, настраивая тему, не переходя от изменения элемента управления к окну предварительного просмотра.
Возможно, вы знакомы с тем, как API-интерфейс Customizer JavaScript используется для изменения окна предварительного просмотра в режиме реального времени. Для этого мы устанавливаем параметр «Режим transport » на postMessage и добавляем соответствующий код JavaScript следующим образом.
|
1
2
3
4
5
|
wp.customize( ‘blogname’, function( value ) {
value.bind( function( to ) {
$( ‘.site-title a’ ).text( to );
} );
} );
|
Однако мы также можем расширить API, чтобы, например, скрыть, показать или переместить раздел, панель, элемент управления, изменить значение параметра на основе другого значения параметра и связать взаимодействия предварительного просмотра и элемента управления. И это то, что мы собираемся рассмотреть в этом уроке.
Быстрый учебник
Мы довольно подробно рассказали о настройщике WordPress с помощью нескольких статей и нескольких серий, рассказывающих о входах и выходах API настройщика.
Я предполагаю, что вы поняли основную концепцию WordPress Customizer, а также такие компоненты, как Panel, Section, Setting и Control. В противном случае я настоятельно рекомендую вам потратить некоторое время на наши учебные пособия и видеокурсы по этой теме, прежде чем идти дальше.
- Руководство по настройщику тем WordPress
- WordPress Theme Customizer
- Напишите готовые к настройке WordPress темы
Настройки и элементы управления
Для начала мы рассмотрим «Настройки» и «Элементы управления» в Настройщике, которые мы добавили для целей данного руководства. Мы также рассмотрим код, который ставит их на место.
В этом уроке мы сосредоточимся на сайте «Заголовок сайта». И, как вы можете видеть выше, у нас есть два элемента управления: собственное поле ввода WordPress «Название сайта» и наш пользовательский флажок для включения или отключения «Название сайта». Эти два элемента управления находятся в разделе «Идентификация сайта». А на правой стороне изображения находится Предварительный просмотр, где вы можете увидеть «Заголовок сайта».
Кроме того, как вы можете видеть ниже, у нас также есть два элемента управления, которые находятся в разделе «Цвета», чтобы изменить цвет «Заголовок сайта» и цвет его состояния при hover .
Базовый кодекс
Наша тема здесь основана на Underscores , в которой весь код, связанный с /inc/customizer.php помещен в файл /inc/customizer.php .
|
01
02
03
04
05
06
07
08
09
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
|
function tuts_customize_register( $wp_customize ) {
$wp_customize->get_setting( ‘blogname’ )->transport = ‘postMessage’;
$wp_customize->get_setting( ‘blogdescription’ )->transport = ‘postMessage’;
$wp_customize->get_control( ‘blogdescription’ )->priority = ’12’;
$wp_customize->get_setting( ‘header_textcolor’ )->default = ‘#f44336’;
$wp_customize->get_setting( ‘header_textcolor’ )->transport = ‘postMessage’;
// Checkbox to Display Blogname
$wp_customize->add_setting( ‘display_blogname’, array(
‘transport’ => ‘postMessage’,
) );
$wp_customize->add_control( ‘display_blogname’, array(
‘label’ => __( ‘Display Site Title’, ‘tuts’ ),
‘section’ => ‘title_tagline’,
‘type’ => ‘checkbox’,
‘priority’ => 11,
) );
// Add main text color setting and control.
$wp_customize->add_setting( ‘header_textcolor_hover’, array(
‘default’ => ‘#C62828’,
‘sanitize_callback’ => ‘sanitize_hex_color’,
‘transport’ => ‘postMessage’,
) );
$wp_customize->add_control( new WP_Customize_Color_Control( $wp_customize, ‘header_textcolor_hover’, array(
‘label’ => __( ‘Header Text Color: Hover’, ‘tuts’ ),
‘section’ => ‘colors’,
‘priority’ => ’11’
) ) );
}
add_action( ‘customize_register’, ‘tuts_customize_register’ );
|
И, как вы можете видеть выше, мы внесли несколько изменений в код, придерживаясь нашей потребности в этом руководстве.
- Мы
blogdescriptionвстроенную настройку WordPress,blogdescription, до12чтобы флажок Setting,display_blogname, отображался под полем ввода «Заголовок сайта». - Мы создаем новый элемент управления с именем
display_blogname. Мы устанавливаемpriority11который в нашем случае находится между полем ввода «Заголовок сайта» и «Слоган». - Установите цвет по умолчанию для
#f44336а типtransportдляpostMessage. - Мы также создаем новую настройку
header_text_color. Аналогично, мы также устанавливаем приоритет11чтобы он отображался чуть ниже параметраheader_textcolor.
Все эти настройки устанавливаются с помощью postMessage вместо refresh . Опция postMessage позволяет асинхронно транспортировать значение и отображать его в окне предварительного просмотра в реальном времени. Однако нам также придется написать собственный JavaScript для обработки изменений.
Загрузка JavaScript
Нам нужно создать два файла JavaScript: один файл, customizer-preview.js , для работы с Preview, а другой файл, customizer-control.js , для обработки элементов управления внутри панели Customizer.
|
1
2
3
4
5
|
js
├── customizer-preview.js // 1. File to handle the Preview
├── customizer-control.js // 2. File to handle the Controls
├── navigation.js
└── skip-link-focus-fix.js
|
В customizer-preview.js есть следующий код.
|
1
2
3
|
( function( $ ) {
// Codes here.
} )( jQuery );
|
В настоящее время это пустая функция JavaScript. Мы обсудим более конкретно, как мы предварительно просматриваем изменения в окне Preview в следующем уроке этой серии
В другой файл, customizer-control.js , мы добавляем следующий код:
|
1
2
3
4
5
6
|
(function( $ ) {
wp.customize.bind( ‘ready’, function() {
var customize = this;
// Codes here
} );
})( jQuery );
|
Как вы можете видеть выше, мы добавим код в этот файл к событию Readyizer. Это обеспечит полную готовность всего в настройщике, включая настройки, панели и элементы управления, прежде чем мы начнем выполнять какие-либо настраиваемые функции.
Наконец, как только мы добавим код, мы загрузим эти два файла JavaScript в двух разных местах.
|
01
02
03
04
05
06
07
08
09
10
11
|
// 1. customizer-preview.js
function tuts_customize_preview_js() {
wp_enqueue_script( ‘tuts_customizer_preview’, get_template_directory_uri() . ‘/js/customizer-preview.js’, array( ‘customize-preview’ ), null, true );
}
add_action( ‘customize_preview_init’, ‘tuts_customize_preview_js’ );
// 2. customizer-control.js
function tuts_customize_control_js() {
wp_enqueue_script( ‘tuts_customizer_control’, get_template_directory_uri() . ‘/js/customizer-control.js’, array( ‘customize-controls’, ‘jquery’ ), null, true );
}
add_action( ‘customize_controls_enqueue_scripts’, ‘tuts_customize_control_js’ );
|
Файл customizer-preview.js будет загружен в окне предварительного просмотра Customizer с помощью ловушки действий customize_preview_init . Файл customizer-control.js будет загружен в серверную часть Customizer, где элементы Setting и Control доступны через хук Action customize_controls_enqueue_scripts .
Что дальше?
WordPress был сильно вложен в PHP с момента его создания. Таким образом, неудивительно, что большинство разработчиков, поддерживающих экосистему, более опытны и знакомы с API-интерфейсами PHP, чем API-интерфейсами JavaScript.
Только недавно он широко интегрировал JavaScript с помощью Customizer и WP-API. Понимание JavaScript API в WordPress Customizer может быть довольно сложной задачей. Как уже упоминалось, это сторона WordPress, которая в настоящее время наименее документирована. Поэтому мы подробно рассмотрим эту тему.
В то же время, если вы ищете другие утилиты, которые помогут вам создать свой растущий набор инструментов для WordPress или кода для изучения и стать более опытным в WordPress, не забудьте посмотреть, что у нас есть в Envato. Рынок
Здесь мы подготовили все необходимые элементы для работы с WordPress JavaScript API. И мы закончим здесь. В следующей части серии мы расскажем больше о том, что скрывается за API-интерфейсами JavaScript в WordPress, и начнем писать функциональные сценарии, которые вы можете немедленно реализовать в своей теме.
Будьте на связи!