Kirki – это бесплатная среда с открытым исходным кодом (под лицензией MIT), созданная для разработчиков, которые хотят добавить элементы управления Customizer в свои темы или плагины.
Аристидес Статопулос, ведущий разработчик Kirki, работает над фреймворком с 2014 года . Благодаря постоянным обновлениям и улучшениям Кирки создал сообщество на Github, которое включает более 1000 звезд и 300 форков.
До Кирки кастомайзер не трогал. Кирки помог мне разобраться в настройщике и сделать многое за меньшее время!
LebCit – разработчик тем WordPress
Элементы управления настройщика ядра WordPress
WordPress Core по умолчанию включает в себя несколько основных элементов управления настройщиками. Например: текст, текстовое поле, флажок, радио, выбор, раскрывающиеся страницы, электронная почта, URL, номер, скрытые элементы и элементы управления датой.
Кирки также поддерживает Core Controls, плюс еще около двадцати. Вообще говоря, элементы управления Kirki охватывают более сложные варианты использования. Например:
- Типография
- Цветовые палитры
- Редактор TinyMCE
- Сортируемые поля
Kirki также предлагает функции, недоступные в Core WordPress, такие как автоматическая генерация вашего вывода CSS и сценариев postMessage. Эти функции, которые мы рассмотрим позже в этой статье, могут легко сократить время разработки вдвое.
Кирки медленный
Кирки часто критикуют за то, что он медленный. Фактически, эта критика используется против большинства фреймворков (включая WordPress). В этом есть смысл, правда? Вы загружаете много кода, которым никогда не воспользуетесь.
В данном случае на самом деле все наоборот. В большинстве случаев панели управления, построенные с использованием Kirki, на самом деле будут быстрее, чем те же панели, созданные с использованием Core Controls.
Это потому, что Кирки добавляет уровень оптимизации, который не встроен в WordPress.
Когда настройщик инициализируется, WordPress мгновенно пытается загрузить все элементы управления, даже если они находятся в разделе или панели, и пользователь еще не может с ними взаимодействовать. Для сравнения, Кирки откладывает загрузку до тех пор, пока пользователь не начнет взаимодействовать с элементом управления.
Чтобы увидеть эффект от этого на практике, давайте попробуем добавить 50 элементов управления цветом, используя каждый метод.
Основной метод:
1 |
for ($i = 0; $i < 50; $i++){ |
2 |
$wp_customize->add_setting( 'color_setting_hex_' . $i , array( |
7 |
$wp_customize->add_control( new WP_Customize_Color_Control( $wp_customize, 'color_setting_hex_' . $i, array( |
8 |
'label' => 'Color Control', |
9 |
'section' => 'title_tagline', |
10 |
'settings' => 'color_setting_hex_' . $i, |
С Кирки:
1 |
for ($i = 0; $i < 50; $i++) { |
2 |
Kirki::add_field( 'config_id', array( |
4 |
'settings' => 'color_setting_hex_' . $i, |
5 |
'label' => __( 'Color Control', 'kirki' ), |
6 |
'section' => 'title_tagline', |
7 |
'default' => '#0088CC', |
Результаты:
Как видите, начальная скорость загрузки значительно выше при использовании Kirki. Код, необходимый для создания элементов управления, также более лаконичен.
Интеграция Kirki в ваш проект
Есть несколько способов интегрировать Kirki Framework в ваш проект, официальная документация хорошо объясняет различные методы.
Я рекомендую разработчикам посоветовать пользователю установить версию плагина Kirki, а не включать фреймворк непосредственно в код вашего проекта. Это можно сделать с помощью TGMPA или предоставленного скрипта.
Причина выбора маршрута плагинов заключается в том, что Kirki часто обновляется и улучшается. Установив версию плагина, ваши пользователи получат мгновенный доступ к исправлениям ошибок и обновлениям безопасности.
Напротив, когда вы включаете фреймворк как часть своего проекта, пользователи будут получать обновления только тогда, когда вы обновите свою тему или плагин, что может происходить реже, чем требуется.
Какой бы метод вы ни использовали, убедитесь, что Кирки инициализирован, прежде чем добавлять свои настройки:
2 |
if ( ! class_exists( 'Kirki' ) ) { |
Поля
В примере Core Method мы сначала создали настройку, а затем создали для нее элемент управления. В большинстве случаев они напрямую связаны. Кирки упрощает процесс и позволяет нам вместо этого создавать «Поле». Когда поле создается, оно создает для нас настройку и управление в фоновом режиме.
Поля поддерживают все ожидаемые управляющие аргументы (метка, описание, раздел, значение по умолчанию), а также некоторые специфические для Kirki аргументы.
Аргумент ‘type’ позволяет вам выбрать один из 30 типов управления Кирки: https://kirki.org/docs/controls/
Разделы
Разделы настройщика позволяют группировать элементы управления вместе. WordPress имеет шесть встроенных разделов, в которые вы также можете добавлять свои элементы управления:
- title_tagline – Идентичность сайта
- цвета – Цвета
- header_image – Изображение заголовка
- background_image – Фоновое изображение
- static_front_page – Настройки домашней страницы
- custom_css – Дополнительный CSS
Разделы в Kirki работают точно так же, как в Core, метод Kirki :: add_section () является просто оболочкой для $ wp_customize-> add_section () и принимает те же параметры и аргументы.
1 |
Kirki::add_section( 'section_id', array( |
2 |
'title' => esc_html__( 'My Section', 'kirki' ), |
3 |
'description' => esc_html__( 'My section description.', 'kirki' ), |
Панели
Панели позволяют создавать другой уровень иерархии, группируя разделы вместе. WordPress Core имеет одну встроенную панель, которая называется «Меню».
Опять же, реализация Kirki – это просто оболочка для функциональности ядра.
1 |
Kirki::add_panel( 'panel_id', array( |
3 |
'title' => esc_html__( 'My Panel', 'kirki' ), |
4 |
'description' => esc_html__( 'My panel description', 'kirki' ), |
‘транспорт’ => ‘авто’
Традиционно при создании элементов управления Customizer у вас есть два варианта аргумента транспорта:
- Обновить – каждый раз, когда пользователь вносит изменения, панель предварительного просмотра обновляется, чтобы отобразить изменения. Это может занять пару секунд.
- postMessage – каждый раз, когда пользователь вносит изменения, панель предварительного просмотра обновляется с помощью Javascript, который не требует обновления и выполняется практически мгновенно.
postMessage, несомненно, является лучшим методом обновления средства предварительного просмотра и должен использоваться там, где это возможно. Однако есть один недостаток: использование postMessage означает, что вам нужно создать собственный код JS для записи для каждого из ваших элементов управления. Простая реализация выглядит примерно так:
2 |
wp.customize( 'blogname', function( value ) { |
3 |
value.bind( function( newval ) { |
4 |
$( '#site-title a' ).html( newval ); |
Когда у вас много настроек, они могут быстро стать повторяющимися.
Здесь Кирки сияет, он добавляет третью опцию: ‘transport’ => ‘auto’.
‘transport’ => ‘auto’ работает вместе с другим аргументом, который Кирки добавляет с именем ‘output’. Когда оба значения определены, Kirki автоматически сгенерирует для вас сценарии postMessage. Это означает, что вы получаете все преимущества использования postMessage без необходимости писать какой-либо код Javascript.
Поле с использованием transport => ‘auto’ выглядит так:
1 |
Kirki::add_field( ‘config_id’, array( |
3 |
'settings' => 'color_setting_hex', |
4 |
'label' => __( 'Color Control', 'kirki' ), |
6 |
'default' => '#0088CC', |
11 |
'property' => 'background-color', |
Эта экономящая время функция Kirki означает, что большую часть времени вам больше не нужно будет писать или ставить в очередь свои собственные сценарии postMessage.
Вывод CSS из внешнего интерфейса
Другая часть создания настроек Customizer – это создание вывода CSS во внешнем интерфейсе. Простой пример может выглядеть так:
4 |
function wptavern_customizer_css() { |
5 |
$bg_color = get_theme_mod( 'color_setting_hex' ); |
9 |
background-color: <?php echo sanitize_hex_color( $bg_color ); ?>; |
14 |
add_action( 'wp_head', wptavern_customizer_css ); |
Как и в примере postMessage, написание этого кода может быстро стать повторяющимся, если у вас много настроек.
К счастью, ‘transport’ => ‘auto’ также позаботится о выводе внешнего интерфейса за вас. Даже в нашем упрощенном примере ‘transport’ => ‘auto’ сократил код, который нам нужно написать, примерно на 50%.
Заключение
В этой статье мы рассмотрели только основы Kirki Framework и два ее аргумента, уже сейчас мы видим, как он позволяет нам создавать элементы управления Customizer быстрее и без ущерба для производительности.
Когда вы погрузитесь в Kirki, вы быстро откроете для себя богатство функциональности, которую он добавляет поверх Customize API. Неудивительно, что он используется более чем на 300 000 веб-сайтов и является основной частью некоторых из крупнейших тем WordPress на рынке.