Kirki customizer framework настройка
Building your own WordPress theme can be daunting and pretty complicated. Usually the process of building a WordPress theme follows these steps:
- Find a concept for the theme
- Design the theme
- Start coding the markup/structure
- Write the CSS
- Add some options for the user so they can further personalize it.
In this article I’m not going to deal with the first 4 steps, I’m only going to focus on the 5th step: adding options for users.
There a re many frameworks out there that allow you to create an admin page on WordPress, add options there and allow your users to change some things on your theme. And then there’s the WordPress customizer, a native WordPress solution that allows you to add options in a way that users can make changes to their options and live-preview their site before saving their selections.
Kirki lies somewhere in the middle: It’s a framework that allows you to add advanced options to the WordPress customizer (without any admin pages) and provides some advanced features for you. It will allow you to add your own custom fields to the customizer a lot faster and more efficiently!
So let’s say you created the basics of your theme and now you want to add some options.
You’ve read about Kirki and you’ve seen its documentation and you’re about to get started. The first thing you have to decide is how you’re going to use Kirki.
You have 2 options:
- Use as a plugin
- Embed in your theme
Давайте начнем добавлять параметры
Кирки теперь готов помочь нам создать некоторые опции Customizer. Вы можете использовать functions.php или создать специальный файл для задачи, это ваше дело.
Параметры настройки находятся внутри разделов , которые по выбору расположены внутри панелей . В демонстрационном проекте этой статьи я сгруппировал все разделы внутри выделенной панели, используя родные методы Customizer, вот так.
Затем добавьте разделы для цветов текста сайта, макета сайта и параметров текста add_panel колонтитула соответственно, поместив этот код чуть ниже предыдущего метода add_panel .
Теперь вы готовы добавить первый вариант с питанием от Kirki.
Шаг 4 (Создание опций для настройки логотипа)
Переключатель (текстовый или изображение)
--Текстовый логотип
--- Текстовое поле для ввода логотипа
--- Настройка типографики логотипа
-- Изображения логотип
--- Светлой логотип
--- Темный логотип
--- Настройка высоты логотипа
Код для создания настроек для general.php
Вот что мы увидим в админ панеле:
Плагин Kirki позволяет стилизовать кастомайзер WordPress и добавить к нему дополнительные средства управления
Kirki – новый бесплатный плагин, который позволяет добавить дополнительные возможности к кастомайзеру WordPress, включая возможность стилизовать его, добавлять свои собственные произвольные хэдеры, а также подключать более продвинутые произвольные средства управления. Это настоящий фреймворк для кастомайзера.
В то время как многие фреймворки опций тем добавляют новую панель к консоли, Kirki был разработан для реализации единственной вещи – расширения кастомайзера. Если вы используете тему, реализованную с помощью Kirki, то вы не увидите его следы, поскольку он не имеет никакого логотипа, не добавляет ничего лишнего к панели администратора WordPress.
Kirki включает в себя более десятка разных типов полей, которые вы можете добавлять при создании расширенных средств управления, таких как чекбоксы с многочисленными вариантами выбора, слайдеры на базе jQuery Slider UI, наборы кнопок, выбор разметки и т.д.
Существует два способа для интеграции фреймворка Kirki в ваши решения: вы можете использовать его в виде плагина или внедрить его в WordPress-тему, которую вы создаете. Стилизация кастомайзера довольно проста – делается она с помощью нескольких строчек кода; в документации приводится пример.
Kirki был создан разработчиком WordPress Аристейдесом Стэтополусом, автором темы Shoestrap. Он сделал его, чтобы помочь разработчикам тем снизить время, которое обычно тратится на написание произвольных средств управления, чтобы они могли сосредоточиться на создании красивых, дружественных к пользователям тем.
Kirki бесплатен и имеет открытый код. Он доступен для скачивания через директорию плагинов WordPress, а также через GitHub.
Embed in your theme
If you want to bundle Kirki in your theme you can do it pretty easily following these simple instructions.
Ресурсы
Хотите больше? Вот несколько замечательных ресурсов.
Интеграция Kirki в ваш проект
Существует несколько способов интеграции Рамочной программы Kirki в ваш проект, официальная документация делает хорошую работу по объяснению различных методов.
Я рекомендую разработчикам направлять пользователя для установки плагина версии Kirki, а не в том числе фреймворк непосредственно в коде проекта. Это можно сделать с помощью TGMPA или предоставленного скрипта.
Рассуждения за принимая плагин маршрут является то, что Кирки часто обновляется и совершенствуется. Установив плагин версию, ваши пользователи будут иметь мгновенный доступ к исправлению ошибок и обновления мгновения.
В отличие от этого, когда вы включаете платформу в рамках проекта, пользователи будут получать обновления только при обновлении темы или плагина, которые могут быть реже, чем требуется.
Какой бы метод вы ни использовали, не забудьте проверить Kirki инициализированы, прежде чем добавить настройки:
В примере «Основной метод» мы сначала создали настройку, а затем создали элемент управления для него. В большинстве случаев эти два человека непосредственно связаны между собой. Кирки упрощает процесс и позволяет нам создавать «Поле» вместо этого. Когда поле создается, оно создает настройку и управление в фоновом режиме для нас.
Поля поддерживают все аргументы управления, которые вы ожидаете (метка, описание, раздел, по умолчанию), а также некоторые аргументы, связанные с Кирки.
Что такое Кирки?
Давайте послушаем, о чем говорит Kirki от разработчика:
Кирки это не рамки. Это инструментарий, позволяющий разработчикам WordPress использовать настройщик и использовать его расширенные функции и гибкость, абстрагируя код и облегчая создание красивого и значимого пользовательского опыта для всех.
Кирки Документация
Я хотел бы рассказать о двух основных моментах этого инструментария.
Пришло время увидеть Кирки в действии. Если вы хотите следовать, подготовьте тему WordPress или возьмите демонстрационную тему Superminimal, которая содержит весь код, обсуждаемый в этом посте.
Улучшение Live Preview
Customizer поставляется с мощным JavaScript API для добавления возможности AJAX в область предварительного просмотра. Это усовершенствование позволяет пользователям проверять свои изменения в режиме реального времени, не дожидаясь обновления всей страницы предварительного просмотра Настройщика.
Мы можем достичь того же результата с Кирки, просто добавив несколько удобных параметров в массив $fields[] .
Например, чтобы добавить ajaxified live preview в настройку superminimal_body_color, добавьте следующий фрагмент в соответствующий массив $fields[] .
Позвольте мне объяснить, что делает код выше.
- Во-первых, приведенный выше код изменяет метод транспорта с Refresh (по умолчанию) на postMessage . Это сигнализирует настройщику, что он должен использовать JavaScript для предварительного просмотра в реальном времени.
- Затем js_vars параметра js_vars указывают, что элементы body и p должны быть изменены с использованием свойства цвета CSS.
Кирки предлагает два предопределенных значения для параметра function . Используйте значение css если добавляемый параметр хранит правила CSS, такие как background-color , color , font-size и т. Д. Используйте значение html если параметр хранит строку HTML-разметки для вставки на страницу.
В качестве примера того, как вы можете использовать значение html , давайте добавим функциональность предварительного просмотра AJAX в параметр, который управляет изменениями текста нижнего колонтитула. Добавьте этот фрагмент в конец массива $fields[] который содержит параметр superminimal_footer_text .
Вот и все, попробуйте написать что-нибудь в текстовой области в разделе superminimal_footer_text . Вы скоро заметите, что соответствующий текст нижнего колонтитула на экране предварительного просмотра изменится соответственно без полной перезагрузки страницы. Здорово!
Step 1: Download Kirki and place it in your theme.
Step 2: Include the main plugin file in your theme’s functions.php file.
That’s pretty simple… Just add this line in your theme’s functions.php file:
Предварительный просмотр Ajax с помощью Radio Image Control
Могут быть случаи, когда ни css ни html не подходят для параметра function который включает предварительный просмотр AJAX в реальном времени. В качестве примера можно привести настройку макета сайта. Использование css в качестве значения для параметра функции не имеет большого смысла, потому что рассматриваемый параметр не хранит никакого значения свойства CSS. Аналогично, использование html не совсем помогает. Фактически, он будет только выплевывать на полную ширину , влево или вправо на странице предварительного просмотра, в зависимости от того, какая кнопка управления радиоизображением выбрана. Но это не может быть тем, чего вы хотели бы достичь.
Хорошей новостью является то, что вы можете подключить собственное имя функции JavaScript в качестве значения параметра функции, и это работает!
Вам нужно поставить в очередь файл JavaScript, в котором находится ваша пользовательская функция, и подключить его к customize_preview_init действий customize_preview_init .
Наконец, напишите функцию JavaScript, которая обрабатывает предварительный просмотр в реальном времени, используя собственный API JavaScript Customizer.
Отличительной особенностью Kirki является то, что вы можете использовать его вместе с API-интерфейсом WordPress, а не вместо него. Поэтому, когда ситуация требует этого, вы можете легко переключаться между двумя API-интерфейсами в кратчайшие сроки.
Use as a plugin
Панели
Панели позволяют создать другой уровень иерархии, объединив разделы. WordPress Core имеет одну встроенную панель, которая является “Меню”.
Опять же, реализация Kirki — это просто обертка для функциональности Core.
Step 4: Add your fields
You can now start adding your fields and structuring your options.
For my theme I want to have the following:
- A “Backgrounds” panel with 3 sections inside it:
- Header Background
- Body Background
- Footer Background
- A typography section where users will be able to choose the font-family for their body and the font-size. I could add more, but this is just an example to showcase what you can do
First of all we’ll have to create the Customizer panels and sections:
We’re not doing anything special here, we’re just adding sections and panels following the WordPress Codex instructions.
Now that we added our sections, we can move on to adding our fields.
All our settings will have to be put inside a function that will then be hooked to the kirki/fields filter like this:
Let’s add the header background first. I want my users to be able to select a background color, an opacity for that color, a background image, whether or not that image has to be repeated, the position of the background image, its size, and finally its attach property.
My field will look like this:
That will create the setting in the database and add all necessary controls in the customizer. But what about using these options to actually style the background of the header? I could write my own custom functions to get the values of all those settings, do some math, sanitize everything and then apply the appropriate styling to my theme.
However Kirki can automatically do all of the above using the output argument. So if I want to apply those styles to a div element on my page that has an ID of header I’d add an extra line to my header field:
Next up: The body background. I’ll just duplicate the above and change the settings argument and the description:
Next is the footer background.
This time I don’t want my users to be able to choose the background repeat, its size and position ‘cause I’ve hard-coded those in my CSS. So I’ll just skip them and not include them at all in my new field:
And I’m done with my backgrounds! Moving on to my typography settings now.
Let’s start with the font-family:
I want to have a dropdown that will allow users to choose the font they want. I’ll use Kirki to get a list of all the google-font families, automatically generate the script required for those, automatically have it added to my page, it will automatically generate the CSS for it, apply it, AND also take this a step further, taking advantage of WordPress’s postMessage so that previews are instant.
And now for the font-size: I want it to be a slider control, and I want my users to use em as the unit for their font-size instead of px . The minimum value for the font-size will be 0.7, the maximum value will be 2, and I want the step to be pretty fluid, so I’ll set that to 0.01. I don’t want the CSS to be applied to headers, just the body element since headers will be calculated based on that value instead by the browser automatically. So this will be the field:
Our final function containing the definitions for our fields should now look like this:
It may not look like much, but what we’ve accomplished above would probably require a couple hundred more lines to do if we were not using Kirki:
- We’d have to create the theme_mod settings before adding the controls
- We’d have to create our own custom color control for the customizer that would be able to handle rgba values and opacities
- We’d have to create our own custom slider control for the customizer that would be able to handle the font-sizes, or we could use a text control for it but that wouldn’t be as practical or pretty
- We’d have to write functions to properly calculate the background values and apply them to all 3 areas of our site
- We’d have to write the JS needed for postMessage to work
- We’d have to write our own custom implementation for Google fonts, not to mention all that includes (calculating the enqueued fonts, adding the CSS etc)
Instead of doing all that, we just created an array specifying what we want and it’s all been taken care of. :)
Одна вещь, к которой привыкли пользователи WordPress, – это простота, не требующий кода опции настройки темы. Идея состоит в том, чтобы загрузить тему, активировать ее на панели «Темы», получить доступ к панели «Настройка» и начать настройку цветов, макета, шрифтов и т. Д. Всего одним щелчком мыши.
WordPress предлагает разработчикам темы API Customizer . Это чистый, объектно-ориентированный набор методов, которые облегчают создание согласованного интерфейса настройки. На панели «Настройка» пользователи могут легко вносить изменения и просматривать их в режиме реального времени без необходимости связываться с кодом PHP или CSS.
Разработка параметров темы с использованием API-интерфейса Customizer, будучи простым и логичным процессом, предполагает написание определенного количества повторяющегося кода. Чтобы сократить некоторые шаги, необходимые для создания функциональных и безопасных опций Customizer, Aristeides Stathopoulos разрабатывает бесплатный плагин с открытым исходным кодом, Kirki .
В этом посте я собираюсь показать, как интегрировать Kirki в вашу тему WordPress и как использовать ее для создания нескольких опций Customizer.
Кирки медленный
Одна критика обычно проводится против Кирки является то, что это медленно. В самом деле, эта критика используется в отношении большинства рамок (в том числе WordPress). В этом есть смысл, да? Вы загружаете много кода, который вы никогда не могли бы использовать.
В этом случае реальность такова, что верно обратное. Большая часть панелей управления временем, построенных с использованием Kirki, будет на самом деле быстрее, чем те же панели, построенные с помощью Core Controls.
Это потому, что Кирки добавляет слой оптимизации, который не встроен в WordPress.
Когда настраиватель инициализирован WordPress мгновенно пытается загрузить все элементы управления, даже если они находятся в разделе или панели, и пользователь не может взаимодействовать с ними еще. Для сравнения, Kirki откладывает загрузку до тех пор, пока пользователь не будет взаимодействовать с управлением.
Чтобы увидеть эффект от этого на практике, давайте попробуем добавить 50 элементов управления цветами с помощью каждого метода.
Основной метод:
С Кирки:
Результаты:
Как вы можете видеть, начальная скорость загрузки значительно быстрее при использовании Kirki. Код, необходимый для создания элементов управления, также более краток.
Шаг 5 (Вывод логотипа во фронт-энде)
Создаем файл: theme-logo.php в папке: template-parts/site/theme-logo.php
Код для файла theme-logo.php
Выводим логотип в шапке сайта, файл: header.php
Результат урока
Я очень люблю шаблонизацию, и всегда страюсь разгружать свой код распределяя элементы по отдельным файлам. Шаблонизация не даст запутаться в своем коде, и поможет другому человеку быстрее разобраться в вашем коде. Пример с выводом логотипа, этот логотип еще придется отображать в футере, и для того чтобы это сделать понадобится одна строчка кода, и если понадобится изменить код логотипа, это не составит проблем. Это конечно все очень логично, но когда я делал первую тему то совсем забыл о шаблонизации.
Kirki — это бесплатная инфраструктура с открытым исходным кодом (MIT-лицензированная) для разработчиков, которые хотят добавить настраиваемые элементы управления в свои темы или плагины.
Aristeides Stathopoulos, ведущий разработчик Kirki работает над этой структурой с 2014 года. Благодаря непрерывным обновлениям и улучшениям, Kirki создал сообщество на Github, которое включает в себя более 1000 звезд и 300 вилок.
До Kirki я никогда не касался настраивателя. Kirki помог мне понять настраиватель и сделать много за меньшее время!
LebCit – WordPress Тема разработчик
‘Транспорт’
Традиционно при создании настраиваемых элементов управления у вас есть два варианта для транспортного аргумента:
- Обновление – Каждый раз, когда пользователь вносит изменения панели предварительного просмотра обновляется, чтобы показать изменения. Это может занять пару секунд.
- postMessage – Каждый раз, когда пользователь вносит изменения, панель предварительного просмотра обновляется с помощью Javascript, который не требует обновления и является почти мгновенным.
postMessage, несомненно, является превосходным методом обновления превью-превью и должен использоваться там, где это возможно. Тем не менее, есть один недостаток, используя postMessage означает, что вам нужно создать пользовательский код JS для каждого из ваших элементов управления. Простая реализация выглядит примерно так:
Если у вас есть много настроек, это может быстро стать повторяющимся.
Это где Кирки светит, он добавляет третий вариант: “транспорт”
‘транспорт’ qgt; ‘авто’ работает вместе с другим аргументом Кирки добавляет названный ‘выход’. Когда оба значения определены, Kirki будет автоматически генерировать скрипты postMessage для вас. Это означает, что вы получаете все преимущества использования postMessage без необходимости писать какой-либо из кода Javascript.
Поле, использующее транспортную перевозку, выглядит следующим образом:
Эта функция экономии времени Kirki означает, что большую часть времени вам больше не нужно будет писать или enqueue свои собственные скрипты postMessage.
Step 3: Configure Kirki to use the proper URL path
Kirki loads some files when in the customizer and therefore needs you to tell it exactly where these files are located. You will need to add the following in your theme’s functions.php :
Of course if you want you can add more configuration options and further customize the way your theme’s customizer will look etc, but the only thing we’ll need for our basic theme is the above.
Заключение
В этой статье мы рассмотрели только основы Kirki Framework и два ее аргумента, уже мы можем видеть, как это позволяет нам создавать настраиваемые элементы управления быстрее и без ущерба для производительности.
Погрузитесь в Kirki, вы быстро обнаружите богатство функциональности, которая добавляется в верхней части API customize. Это не удивительно, что он используется на более чем 300000 веб-сайтов и основной частью некоторых из крупнейших WordPress темы на рынке.
Кастомайзер – мощный инструмент, который позволяет пользователям вносить изменения в темы WordPress и просматривать их в живом режиме. Поскольку он является родным для WordPress, многие авторы тем начинают обращаться к кастомайзеру, вместо того чтобы создавать свои собственные панели опций.
Хотя кастомайзер и является фронтэнд инструментом, он отображается представление страницы в общем дизайне, который соответствует бэкэнду WordPress. Представьте себе, что вы бы могли стилизовать кастомайзер, чтобы он представлял собой неразрывное дополнение вашей темы. Неплохо, не правда ли?
Как включить Кирки в вашу тему
Если вы предпочитаете включить Kirki в свою тему в качестве библиотеки, выполните действия, описанные ниже.
Скопируйте каталог kirki в папку вашей темы.
В демонстрационной теме для этой статьи файлы Kirki находятся в каталоге с именем inc .
Сделайте вашу тему «поговорите» с Кирки, добавив эту строку в functions.php (убедитесь, что вы изменили путь к папке kirki в соответствии с файловой структурой вашей темы).
Добавьте функцию для включения параметров конфигурации Kirki и подключите ее к фильтру kirki/config . Вам решать, что вы хотите добавить к этой функции. Для этого поста давайте сведем его к минимуму, добавив код, который нужен Кирки, чтобы «узнать» о его новом расположении, то есть папке темы, а не папке плагина.
Внутри этой функции конфигурации вы можете контролировать внешний вид WordPress Customizer в соответствии с вашей темой. Самое главное, именно здесь вы добавляете код, необходимый для перевода всех строк, используемых плагином, из вашей темы. Загляните в демонстрационную тему Superminimal или на страницу документации Kirki, чтобы узнать, как этого добиться.
WordPress Core Настраиваемый Контроль
WordPress Core включает в себя несколько основных настройка управления по умолчанию. Например: текст, textarea, флажок, радио, выберите, выпадающие страницы, электронная почта, URL, номер, скрытые, и элементы управления датой.
Kirki поддерживает основные элементы управления тоже, плюс около двадцати больше. Вообще говоря, контроль Kirki охватывает более продвинутые случаи использования. Например:
- Типографии
- Цветовые палитры
- Редактор TinyMCE
- Сортированные поля
Kirki также предлагает функциональность, недоступную в Core WordPress, такие как автоматическое производство ваших скриптов CSS и postMessage скриптов. Эти функции, которые мы рассмотрим позже в этой статье, могут легко сократить время разработки в два раза.
Шаг 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 можно увидеть созданную секцию и текстовое поле.
Как добавить условные параметры
Как дизайнеру темы, вам не нравится перегружать пользователей множеством запутанных вариантов. Некоторые выборы не нужно делать, пока пользователи не выберут какую-то конкретную опцию. Настройщик предлагает удобный параметр active_callback для панелей, секций и элементов управления. Вы можете установить для этого параметра определенное условие, которое должно быть выполнено до отображения панели, раздела или элемента управления в настройщике.
Что Кирки может предложить в этом отношении?
API Kirki использует обязательный параметр, чтобы скрыть или отобразить элемент управления в настройщике на основе значения другого элемента управления.
Например, допустим, вы хотите показать текстовую область, чтобы пользователи могли изменять текст нижнего колонтитула, только если они установили флажок. Для этого добавьте следующий код в элемент управления superminimal_footer_text .
Добавление приведенного выше фрагмента к коду для элемента управления textarea гарантирует, что значение superminimal_reveal_footer_text управления superminimal_reveal_footer_text должно быть равно 1, прежде чем элемент управления textarea отобразится в настройщике. Давайте добавим элемент управления superminimal_demo_fields() функцию superminimal_demo_fields() .
Элемент управления superminimal_reveal_footer_text – это флажок, который по умолчанию имеет значение 0, то есть он не отмечен. Это предотвращает отображение текстовой области.
Только после установки флажка, то есть путем изменения его значения с 0 на 1, текстовое поле появляется в настройщике.
Вариант цвета текста
Весь ваш код, связанный с опциями, должен быть размещен внутри функции. Затем эта функция фильтруется через фильтр kirki/fields .
Давайте дадим пользователям вашей темы WordPress простой способ изменить цвет текста. Это быстро делается с Кирки. Добавьте следующий фрагмент кода внутри функции superminimal_demo_fields() , чуть выше return $fields; заявление.
Кирки предлагает сжатый синтаксис, чтобы добавить настройки и связанный элемент управления за один раз.
Давайте разберем массив $fields[] .
- type относится к конкретному элементу управления, где пользователи вводят значение выбранного параметра, в данном случае элемент управления «Цвет».
- setting относится к id параметра Customizer, который выполняет предварительный просмотр, сохранение и очистку объектов Customizer в режиме реального времени.
- label и description есть для общения с пользователями. Метка отображает заголовок для опции, а описание предлагает некоторое указание того, что делает опция.
- section ссылается на id Раздела, в котором размещен этот конкретный элемент управления Цвет.
- priority относится к позиции этого конкретного элемента управления цветом относительно других элементов управления в том же разделе.
- default установлено значение цвета CSS по умолчанию.
- Наконец, output – это замечательный способ Кирки применить значение параметра. Просто передайте ему селектор и свойство CSS, и Кирки обрабатывает все необходимые операции.
Следуя приведенному выше примеру, вы можете добавить цветовую опцию и для ссылок.
Далее давайте дадим пользователям вашей темы возможность настроить макет сайта.
Шаг 1 (Настройка главной страницы)
Для работы с главной страницей необходимо в админ панеле создать новую страницу, назовем ее Home Page и назначить для этой страницы template Page Builder Page который мы создавали в прошлом уроке:
Далее переходим в Settings / Reading На этой странице настроек нам нужно установить ранее созданную страницу Home Page, главной страницей на сайте.
Теперь если мы обновим главную страницу, то она будет абсолютно пустая, на которой будет видно только меню, которое мы делали в прошлом уроке.
Для того чтобы пустота на главной странице не мешала, я перемещу html код слайдера и Footer в тему, и добавлю в редакторе текст для страницы.
Как вы видите на последнем скриншоте, контент отображается на странице так как было задумано, без каких либо html тегов внутри.
Позже мы рассмотрим настройку Footer.
Шаг 3 (Создание первых опций для темы)
Чтобы не запутаться при написании опций для темы я рекомендую разбить код опций для каждой секции по отдельным файлам.
В папке inc я создал след структуру:
inc
-customizer
--sections
---general.php
-customizer.php
B файле customizer.php после конфига kirki подключаем файл general.php см код ниже:
Далее когда нам понадобится создать новую секцию настроек, например для футера, типографики, или woocommerce нам понадобится создать новый файл в папке sections и подключить его в файле customizer.php
Разделы
Настраиваемые разделы позволяют группировать элементы управления вместе. WordPress имеет шесть встроенных разделов, которые вы можете добавить ваши элементы управления тоже:
- title’tagline – Идентификация сайта
- цвета – Цвета
- заголовок – Заголовок изображение
- фоновая изображение – Фоновое изображение
- статический-фронт-страница – Настройки главной страницы
- custom’css – Дополнительные CSS
Разделы в Kirki работают точно так же, как и в Core, Кирки::add-section() метод просто обертка для $wp-customize-‘gt;add-section() и принимает те же параметры и аргументы.
Фронтенд CSS выход
Другая часть создания настройки настройки генерации вывода CSS на переднем конце. Простой пример может выглядеть следующим образом:
Как и на примере postMessage, написание этого кода может быстро стать повторяющимся, если у вас много настроек.
К счастью, “транспорт” йgt; ‘авто’ заботится о переднем выходе для вас тоже. Даже в нашем упрощенном примере ,транспорт» qgt; ‘авто’ сократил код, который мы должны написать на 50%.
Вывод
Я показал, как интегрировать Kirki Toolkit в тему WordPress.
Чтобы углубиться в детали кода, обсуждаемого в этом посте, не стесняйтесь загружать демонстрационную тему Superminimal с GitHub.
Всем привет друзья, на связи Валерий Столярчук. Это третий урок по разработке WordPress темы для продажи. В этому уроке мы начнем делать первые настойки для темы, познакомимся с кастомайзером в WordPress. План урока вы можете посмотреть ниже.
Вариант текста нижнего колонтитула
Сколько раз вы сталкивались с пользователями тем WordPress, которые просили вас помочь им заменить любые материалы разработчиков в области нижнего колонтитула их темы? Добавление опции, позволяющей пользователям легко управлять текстом нижнего колонтитула из настройщика, занимает у Кирки пару минут. Вот код
Приведенный выше код выводит текстовую область, где пользователи могут писать уведомления об авторских правах, кредиты и т. Д.
Чтобы извлечь и отобразить текст, введенный в текстовую область, используйте собственный метод Customizer get_theme_mod в footer.php следующим образом.
Далее, давайте посмотрим, что еще может сделать Кирки, чтобы улучшить пользовательский опыт с WordPress Customizer.
Вариант размещения сайта
Кирки предлагает кучу сложных элементов управления Customizer. Мой любимый – радиоуправление изображениями .
Вот как вы можете добавить его в свою тему, чтобы предложить пользователям возможность изменять макет своего сайта.
Поместите код выше сразу после предыдущего фрагмента массива $fields[] . Обратите внимание, что ни один output параметр не был добавлен в код. Это так, потому что значение каждого ввода радиоизображения не является значением свойства CSS.
Вы можете извлечь значение из параметра get_theme_mod помощью get_theme_mod метода Customizer get_theme_mod . Затем вы используете это значение в качестве значения атрибута класса подходящего HTML-элемента в файле шаблона. Наконец, это просто вопрос написания соответствующего CSS для достижения желаемого макета для .fullwidth , .sidebar-left и .sidebar-right в вашей таблице стилей.
Ознакомьтесь с подробной информацией о том, как реализовать параметр макета в демонстрационной теме Superminimal .
Читайте также: