Создавайте настройки Customizer быстрее, используя Kirki Framework в своем проекте

Опубликовано: 2019-08-10

Kirki — это бесплатная платформа с открытым исходным кодом (под лицензией MIT), созданная для разработчиков, которые хотят добавить элементы управления Customizer в свои темы или плагины.

Аристейдес Статопулос, ведущий разработчик Kirki, работает над фреймворком с 2014 года. Благодаря постоянным обновлениям и улучшениям, Кирки создал сообщество на Github, которое включает более 1000 звезд и 300 форков.

До Кирки я никогда не трогал кастомайзер. Кирки помог мне разобраться в кастомайзере и сделать многое за меньшее время!
LebCit — разработчик темы WordPress

Элементы управления основным настройщиком WordPress

WordPress Core по умолчанию включает в себя несколько основных элементов управления Customizer. Например: текст, текстовое поле, флажок, радио, выбор, раскрывающиеся страницы, электронная почта, URL-адрес, число, скрытые и элементы управления датой.

Kirki также поддерживает Core Controls и еще около двадцати. Вообще говоря, элементы управления Kirki охватывают более сложные варианты использования. Например:

Типография
Цветовые палитры
Редактор TinyMCE
Сортируемые поля

Kirki также предлагает функции, недоступные в Core WordPress, такие как автоматическое создание вашего вывода CSS и сценариев postMessage. Эти функции, которые мы рассмотрим далее в этой статье, могут легко вдвое сократить время разработки.

Кирки медленный

Кирки часто критикуют за то, что он медленный. На самом деле эта критика используется против большинства фреймворков (включая WordPress). Это имеет смысл, верно? Вы загружаете много кода, который никогда не будете использовать.

В данном случае реальность такова, что все наоборот. В большинстве случаев панели управления, созданные с помощью Kirki, на самом деле будут работать быстрее, чем те же панели, созданные с помощью Core Controls.

Это связано с тем, что Kirki добавляет слой оптимизации, не встроенный в WordPress.

Когда Customizer инициализируется, WordPress мгновенно пытается загрузить все элементы управления, даже если они находятся в разделе или панели, и пользователь еще не может с ними взаимодействовать. Для сравнения, Kirki откладывает загрузку до тех пор, пока пользователь не начнет взаимодействовать с элементом управления.

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

Основной метод:

 для ($i = 0; $i < 50; $i++){
	$wp_customize->add_setting( 'color_setting_hex_' . $i , массив(
		'по умолчанию' => '#0088CC'
	));

	// добавляем элемент выбора цвета
	$wp_customize->add_control( новый WP_Customize_Color_Control( $wp_customize, 'color_setting_hex_' . $i, массив(
		'label' => 'Управление цветом',
		'раздел' => 'title_tagline',
		'настройки' => 'color_setting_hex_' . $ я,
	) ) );
}

С Кирки:

 для ($i = 0; $i < 50; $i++) {
     Kirki::add_field( 'config_id', массив(
         'тип' => 'цвет',
         'настройки' => 'color_setting_hex_' . $ я,
         'label' => __( 'Управление цветом', 'кирки'),
         'раздел' => 'title_tagline',
         'по умолчанию' => '#0088CC',
     ));
 }

Результаты:

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

Интеграция Kirki в ваш проект

Существует несколько способов интеграции Kirki Framework в ваш проект, официальная документация хорошо объясняет различные методы.

Я рекомендую разработчикам направлять пользователя к установке подключаемой версии Kirki, а не включать фреймворк непосредственно в код вашего проекта. Это можно сделать с помощью TGMPA или предоставленного скрипта.

Причина использования плагина заключается в том, что Kirki часто обновляется и улучшается. Установив версию плагина, ваши пользователи получат мгновенный доступ к исправлениям ошибок и обновлениям безопасности.

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

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

 // Ранний выход, если Кирки не существует.
если ( ! class_exists('Кирки') ) {
    возвращение;
}

Поля

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

Поля поддерживают все ожидаемые управляющие аргументы (метка, описание, раздел, значение по умолчанию), а также некоторые специфичные для Kirki аргументы.

Аргумент type позволяет вам выбрать один из 30 типов управления Kirki: https://kirki.org/docs/controls/

Разделы

Разделы Customizer позволяют группировать элементы управления вместе. В WordPress есть шесть встроенных разделов, в которые вы также можете добавить свои элементы управления:

title_tagline — Идентификация сайта
цвета – Цвета
header_image — изображение заголовка
background_image – Фоновое изображение
static_front_page — Настройки домашней страницы
custom_css — дополнительный CSS

Разделы в Kirki работают точно так же, как и в Core, метод Kirki::add_section() является просто оберткой для $wp_customize->add_section() и принимает те же параметры и аргументы.

 Kirki::add_section( 'section_id', массив(
     'title' => esc_html__('Мой раздел', 'кирки'),
     'description' => esc_html__('Описание моего раздела.', 'kirki'),
 ));

Панели

Панели позволяют создать другой уровень иерархии, группируя разделы вместе. В WordPress Core есть одна встроенная панель — «Меню».

Опять же, реализация Kirki — это просто оболочка для функциональности Core.

 Kirki::add_panel( 'panel_id', массив(
     'приоритет' => 10,
     'title' => esc_html__('Моя панель', 'кирки'),
     'description' => esc_html__( 'Описание моей панели', 'kirki' ),
 ));

'транспорт' => 'автомобиль'

Традиционно при создании элементов управления Customizer у вас есть два варианта аргумента транспорта:

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

postMessage, несомненно, является лучшим методом обновления средства предварительного просмотра, и его следует использовать там, где это возможно. Однако есть один недостаток: использование postMessage означает, что вам нужно создать собственный JS-код для каждого из ваших элементов управления. Простая реализация выглядит примерно так:

 // Обновляем заголовок сайта в режиме реального времени...
wp.customize («имя блога», функция (значение) {
    value.bind(функция(newval) {
        $('#site-title a').html(newval);
    });
});

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

Вот где Кирки сияет, он добавляет третью опцию: 'транспорт' => 'авто'.

'transport' => 'auto' работает вместе с другим аргументом, который Кирки добавляет под названием 'output'. Когда оба значения определены, Kirki автоматически сгенерирует для вас сценарии postMessage. Это означает, что вы получаете все преимущества использования postMessage без необходимости писать какой-либо код Javascript.

Поле с использованием transport => 'auto' выглядит так:

 Kirki::add_field( 'config_id', массив(
     'тип' => 'цвет',
     'настройки' => 'color_setting_hex',
     'label' => __( 'Управление цветом', 'кирки'),
     'раздел' => 'цвета',
     'по умолчанию' => '#0088CC',
     'транспорт' => 'авто',
     'выход' => массив (
         множество(
             'элемент' => 'тело',
             'свойство' => 'фоновый цвет',
         ),
     ),
 ));

Эта экономящая время функция Kirki означает, что большую часть времени вам больше не нужно писать или ставить в очередь свои собственные сценарии postMessage.

Вывод CSS внешнего интерфейса

Еще одна часть создания настроек Customizer — создание вывода CSS во внешнем интерфейсе. Простой пример может выглядеть так:

 /**
 * Вывод CSS настройщика в wp_head
 */
функция wptavern_customizer_css() {
	$bg_color = get_theme_mod('color_setting_hex');
	?>
	<стиль>
		тело {
			background-color: <?php echo sanitize_hex_color($bg_color); ?>;
		}
	</стиль>
	<?php
}
add_action('wp_head', wptavern_customizer_css);

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

К счастью, 'transport' => 'auto' также позаботится о внешнем интерфейсе. Даже в нашем упрощенном примере 'transport' => 'auto' сократило код, который нам нужно написать, примерно на 50%.

Вывод

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

Когда вы погрузитесь в Kirki, вы быстро обнаружите множество функциональных возможностей, которые он добавляет поверх Customize API. Неудивительно, что он используется на более чем 300 000 веб-сайтов и является основной частью некоторых из самых популярных тем WordPress на рынке.