Если вы занимаетесь профессиональной разработкой тем для WordPress, то наверняка сталкивались с вопросом создания страницы настроек. Начиная с версии 3.4 в WordPress появился Theme Customizer. Кодекс рекомендует разработчикам встраивать параметры настройки темы с его помощью, а не на странице параметров темы.

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

Элементы управления по умолчанию

Коротко пробежимся по основным моментам. Theme Customization API позволяет создавать элементы управления в разделе Внешний вид->Настроить в меню панели управления WordPress. Каждая тема, особенно последних лет, снабжена некоторыми настройками по умолчанию: заголовок сайта, слоган, цвет фона, меню, фоновое изображение, виджеты, а также статическая и главная страница. Нет необходимости добавлять какой-либо код для поддержки этих базовых параметров.

Однако, в Theme Customization API заложен большой потенциал, который было бы неправильно не использовать.
к содержанию ↑

Общие сведения о панелях, секциях, настройках и элементах управления

Панель — это блок из одной или более секций с элементами управления, для её создания используется метод add_panel(). Пример кода чуть ниже.

Секции представляют собой блок с группой элементов управления. При определении новых настроек и элементов они должны быть добавлены в указанную секцию. Для создания новой секции используется метод add_section().

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

Новый элемент управления (контролл) регистрируется методом add_control()Элемент управления — это элемент HTML-формы на странице настройщика темы, например, поле для ввода текста, кнопки выбора цвета и так далее. В каждой секции можно встроить неограниченное количество элементов.

Ниже представлены скриншоты, как выглядят панель, а также стандартная секция «Свойства сайта» с базовыми настройками: название, логотип, краткое описание.

Несмотря на богатые возможности и огромный потенциал, по умолчанию WordPress предоставляет не так уж и много контроллов:

  • Текстовое поле input
  • Радиокнопки (группа переключателей)
  • Чекбоксы (флажки)
  • Загрузчик изображения
  • Кнопка выбора цвета
  • Выпадающий список

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

Скачать Cody Framework
к содержанию ↑

Cody Framework

Всего в новом фреймворке содержатся чуть более 25 новых элементов управления. Вместо того, чтобы их просто перечислить, я постараюсь привести код каждого элемента с короткими пояснениями. Подключение фреймворка очень простое. Распакуйте файлы и разместите папку cody-framework в корневой папке с вашей темой. Затем произведите подключение, разместив в самом начале файла function.php следующий код:

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

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

Создаем новую панель. Обратите внимание, что если в панели нет ни одной секции, она не отобразится.

Создадим новую секцию в панели.

Всё. Теперь можно создавать новые настройки.
к содержанию ↑

#1 Простое текстовое поле input

#2 Простое текстовое поле textarea

#3 Текстовый редактор

Представляет собой стандартный текстовый редактор WordPress. Параметры:

  • params — массив аргументов параметра $settings у функции wp_editor()
  • relation — задает отношение к элементу Switcher (возможные значения: children или пусто)

#4 Динамические текстовые поля input

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

#5 Простые радиокнопки

#6 Текстовые радиокнопки

#7 Радиокнопки картинкой

#8 Переключатель switcher

Обратите внимание на параметр relation. Если он установлен в значении parent, то все ближайшие последующие элементы управления с параметром children будут скрыты при условии, что чекбокс не активен.

#9 Простой выпадающий список

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

#10 Выпадающий список категорий записей

#11 Список шрифтов Google

#12 Список существующих меню

#13 Список зарегистрированных типов записей

#14 Список страниц из любого типа записей

Вы можете менять параметр post_type на любой: page, post, или custom_post_type.

#15 Список тегов записей

#16 Список пользователей

#17 Список таксономий

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

#18 Выбор цвета с прозрачностью

#19 Выбор цветовой схемы (палитры)

Позволяет создавать группы цветовых схем заранее предустановленных разработчиком темы. Цветовые схемы записываются в виде многомерного массива в параметр choices:

Пример настройки в кастомизере:

Цветовые схемы в настройщике
Цветовые схемы в настройщике

к содержанию ↑

#20 Выбор даты

#21 Простая разделительная полоса

#22 Уведомление

#23 Range slider

Одиночный ползунок для выбора числа в заданном диапазоне. Параметры контрола:

  • min — максимальное число диапазона
  • max — минимальное число диапазона
  • step — шаг изменения числа при движении ползунка
  • unit — не выполняет какую-либо практическую задачу, а лишь является пояснением для пользователя, выводится в элементе настройщика темы

#24 Слайдер

Еще один динамический элемент управления. Его основная задача — создание сгруппированных данных с динамическим управлением. Каждая группа разделена логически. Параметры контрола:

  • img — динамическая загрузка изображения
  • link — простое поле input для вставки абсолютных ссылок (в принципе, можно использовать для хранения и других данных)
  • title — простое поле input для вставки заголовка
  • desc — textarea для вставки произвольного текста
  • check — чекбокс
  • relation — параметр для создания зависимости от Switcher

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

к содержанию ↑

#25 Выбор множественных изображений

#26 Выбор пиктограмм fontawesome

Обратите внимание на новые параметры в некоторых элементах управления:

  • relation — задает отношение к элементу управления «Переключатель switcher». Может принимать либо parent, либо children. По умолчанию «пусто». Если параметр relation у переключателя в значении parent, то все последующие элементы со значением children будут скрыты, пока переключатель не станет в активном режиме.
  • multi — задает порядок выбора элементов в выпадающих списках. Может принимать значение true или false (по умолчанию). Если true, то пользователь может выбирать несколько значений.

Добавить комментарий