Kirki customizer framework настройка

Обновлено: 07.07.2024

Есть два варианта добавления настроек для темы WordPress – добавить новую страницу настроек в админку сайта, либо использовать кастомайзер. Я замечаю, что все классные и свежие темы используют именно второй вариант.

И я думаю, что если это касается именно оформления темы, то этот вариант 100% правильный, а создание страниц настроек в админке – это история больше про плагины WordPress, чем про темы.

Что в видеоуроке?

В этом видеоуроке мы с вами добавим в нашу тему немного настроек, а именно – настройку фиксированной/нефиксированной шапки и позволим пользователям изменять текст в футере сайта.

Кроме того, научу вас делать несколько уровней вложенностей панелей.

Чтобы скачать тему WordPress, которая получилась у нас в процессе этого урока, необходимо приобрести курс.

Чтобы подробнее понять, как всё это будет выглядеть и работать – посмотрите это видео:

В этом примере мы добавили две секции с настройками – для хедера и для футера сайта, и в каждую секцию добавили поле настроек.

Как работают опции темы через Theme Customizer API?

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

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

Теперь давайте пошагово на примерах рассмотрим, как работать с Theme Customizer и как использовать его в своих проектах.

Шаг 1. Добавление панелей, секций и полей

Всё начинается с использования экшн-хука customize_register , именно в него мы будем добавлять все поля настроек и секции для них.

Так как мы разрабатываем свою тему, то код в основном можете вставлять в functions.php внутри вашей темы. Если вопрос с местом вставки кода для вас до сих пор не открыт, то рекомендую почитать этот урок.
Чуть ниже читайте документацию про add_panel(), add_section(), add_setting() и add_control().
Также для панелей, секций и полей есть ещё и методы remove_panel() , get_panel() и так для каждого.

Подробнее рассматриваем этот шаг в видеоуроке.

Шаг 2. Очистка полей и валидация

Этот шаг нужен для защиты от дурака – чтобы ваш пользователь не вводил в полях то, что не нужно вводить. Очистка состоит из двух шагов (или даже одного).

Сначала мы указываем при регистрации настройки функцию для очистки в параметре sanitize_callback .

А потом создаём эту функцию:

И функцию для валидации:

Что касается вали

Подробнее рассматриваем этот шаг в видеоуроке.

Шаг 3. Вывод настроек на сайте

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

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

get_theme_mod() – функция получает настройки непосредственно для текущей темы. Опции одной темы будут недоступны, если вы активируете другую тему! По умолчанию кастомайзер записывает опции именно сюда. Идеально подойдёт для визуальных настроек темы например. – функция получает настройки глобально для всего сайта. Если вы хотите, чтобы ваша опция кастомайзер сохранялась именно туда, то в методе $wp_customizer->add_setting() вам нужно указать параметр type равным option .

Пример добавления класса для хедера:

Это означает, что по умолчанию хедер фиксированный (имеет класс fixed ), но если мы отключаем чекбокс в кастомайзере, то хедер становится обычным (класс fixed исчезает).

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

Подробнее рассматриваем этот шаг в видеоуроке.

Шаг 4. Просмотр в кастомайзере без перезагрузки страницы

В целом у нас уже всё прекрасно работает, единственное только, при изменении наших настроек кастомайзер каждый раз перезагружает страницу сайта. Поэтому давайте немного проапгрейдим наш код.

Для этого нужно сделать несколько мини-шагов в шаге 3.

Сначала нужно убедиться, что у метода $wp_customize->add_setting() параметр transport стоит в значении postMessage .

Круто, теперь нам нужно подключить дополнительный файл .js , например true-customizer.js , при помощи хука customize_preview_init .

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

Подробнее рассматриваем этот шаг в видеоуроке.

Методы

Для того, чтобы урок слишком не затянулся, разберу только методы добавления панелей/секций/полей. Не стану рассматривать методы получения и удаления remove_panel() , get_panel() , которые в общем-то работают довольно интуитивно. И редко могут пригодиться.

$wp_customize->add_panel()

Прежде всего задайте себе вопрос – нужно ли вам несколько уровней вложенностей панелей или нет? Если вы хотите довольствоваться одним уровнем, то возможно вам сразу нужно перейти к документации метода $wp_customize->add_section().

Таблица со стандартными приоритетами панелей:

Название	ID	Приоритет
Свойства сайта	title_tagline	20
Цвета	colors	40
Заголовок	header_image	60
Фон	background_image	80
Меню (Панель)	nav_menus	100
Виджеты (Панель)	widgets	110
Настройки главной страницы	static_front_page	120
По умолчанию	160
Дополнительные стили	custom_css	200

$wp_customize->add_section()

Секции – это уже то, куда мы добавляем непосредственно настройки! Мы могли даже не добавлять панели, а сразу добавлять секции, если уровней вложенности секций не планируется.

$wp_customize->add_setting()

Сам этот метод не добавляет поле настроек, для этого нужен $wp_customize->add_control(), а $wp_customize->add_setting() именно регистрирует настройку и задаёт правила для неё.

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

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

До Kirki я никогда не касался настраивателя. Kirki помог мне понять настраиватель и сделать много за меньшее время!
LebCit – WordPress Тема разработчик

WordPress Core Настраиваемый Контроль

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

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

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

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

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

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

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

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

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

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

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

С Кирки:

Результаты:

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

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

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

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

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

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

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

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

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

Разделы

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

title’tagline – Идентификация сайта
цвета – Цвета
заголовок – Заголовок изображение
фоновая изображение – Фоновое изображение
статический-фронт-страница – Настройки главной страницы
custom’css – Дополнительные CSS

Разделы в Kirki работают точно так же, как и в Core, Кирки::add-section() метод просто обертка для $wp-customize-‘gt;add-section() и принимает те же параметры и аргументы.

Панели

Панели позволяют создать другой уровень иерархии, объединив разделы. WordPress Core имеет одну встроенную панель, которая является “Меню”.

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

‘Транспорт’

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

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

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

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

Это где Кирки светит, он добавляет третий вариант: “транспорт”

‘транспорт’ qgt; ‘авто’ работает вместе с другим аргументом Кирки добавляет названный ‘выход’. Когда оба значения определены, Kirki будет автоматически генерировать скрипты postMessage для вас. Это означает, что вы получаете все преимущества использования postMessage без необходимости писать какой-либо из кода Javascript.

Поле, использующее транспортную перевозку, выглядит следующим образом:

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

Фронтенд CSS выход

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

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

К счастью, “транспорт” йgt; ‘авто’ заботится о переднем выходе для вас тоже. Даже в нашем упрощенном примере ,транспорт» qgt; ‘авто’ сократил код, который мы должны написать на 50%.

Заключение

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

Погрузитесь в Kirki, вы быстро обнаружите богатство функциональности, которая добавляется в верхней части API customize. Это не удивительно, что он используется на более чем 300000 веб-сайтов и основной частью некоторых из крупнейших WordPress темы на рынке.

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

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

Плагин Kirki позволяет стилизовать кастомайзер WordPress и добавить к нему дополнительные средства управления

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

В то время как многие фреймворки опций тем добавляют новую панель к консоли, Kirki был разработан для реализации единственной вещи – расширения кастомайзера. Если вы используете тему, реализованную с помощью Kirki, то вы не увидите его следы, поскольку он не имеет никакого логотипа, не добавляет ничего лишнего к панели администратора WordPress.

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

Существует два способа для интеграции фреймворка Kirki в ваши решения: вы можете использовать его в виде плагина или внедрить его в WordPress-тему, которую вы создаете. Стилизация кастомайзера довольно проста – делается она с помощью нескольких строчек кода; в документации приводится пример.

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

Kirki бесплатен и имеет открытый код. Он доступен для скачивания через директорию плагинов WordPress, а также через GitHub.

Всем привет друзья, на связи Валерий Столярчук. Это третий урок по разработке WordPress темы для продажи. В этому уроке мы начнем делать первые настойки для темы, познакомимся с кастомайзером в WordPress. План урока вы можете посмотреть ниже.

Шаг 1 (Настройка главной страницы)

Для работы с главной страницей необходимо в админ панеле создать новую страницу, назовем ее Home Page и назначить для этой страницы template Page Builder Page который мы создавали в прошлом уроке:

Далее переходим в Settings / Reading На этой странице настроек нам нужно установить ранее созданную страницу Home Page, главной страницей на сайте.

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

Для того чтобы пустота на главной странице не мешала, я перемещу html код слайдера и Footer в тему, и добавлю в редакторе текст для страницы.

Как вы видите на последнем скриншоте, контент отображается на странице так как было задумано, без каких либо html тегов внутри.

Позже мы рассмотрим настройку Footer.

Шаг 2 (Настройка Customizer Kirki)

В этому пункте мы рассмотрим создание настроек для темы. Для написания опций мы будем использовать kirki.

Что такое Kirki, и почему стоит его использовать ?

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

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

Настройка Kirki

В своей теме настройки я решил разместить в папке inc. Также я удалил часть файлов с этой папки оставив только 1 файл.
Customizer.php (Файл в котором мы будем настраивать кастомайзер)

Код файла customizer.php

В этом примере была создана секция General Settings и текстовое поле с названием Insert your logo

В панели администратора в пункте меню Appearance > Customize можно увидеть созданную секцию и текстовое поле.

Шаг 3 (Создание первых опций для темы)

Чтобы не запутаться при написании опций для темы я рекомендую разбить код опций для каждой секции по отдельным файлам.
В папке inc я создал след структуру:

inc
-customizer
--sections
---general.php
-customizer.php

B файле customizer.php после конфига kirki подключаем файл general.php см код ниже:

Далее когда нам понадобится создать новую секцию настроек, например для футера, типографики, или woocommerce нам понадобится создать новый файл в папке sections и подключить его в файле customizer.php

Шаг 4 (Создание опций для настройки логотипа)

Переключатель (текстовый или изображение)
--Текстовый логотип
--- Текстовое поле для ввода логотипа
--- Настройка типографики логотипа
-- Изображения логотип
--- Светлой логотип
--- Темный логотип
--- Настройка высоты логотипа

Код для создания настроек для general.php

Вот что мы увидим в админ панеле:

Шаг 5 (Вывод логотипа во фронт-энде)

Создаем файл: theme-logo.php в папке: template-parts/site/theme-logo.php

Код для файла theme-logo.php

Выводим логотип в шапке сайта, файл: header.php

Результат урока

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

Читайте также: