Наверняка вы знаете, что в меню Внешний вид в админке WordPress есть пункт "Настроить". Его английский аналог - Appearance → Customize. Так вот Customizer - это английский вариант слова "настройщик" и одновременно специальный класс, который предназначен для управления настройками темы в ее классическом варианте.

Подключаем файл customize.php в functions.php

Для того чтобы использовать Customizer в WordPress, лучше создать отдельный файл в папке inc с именем customize.php, чтобы не смешивать этот код с другим. Затем его нужно подключить в файл functions.php, т.к. он отвечает за весь функционал вашей темы.

Затем необходимо определиться с тем, какие настройки вы будете добавлять. Самыми распространенными являются: текстовое поле и текстовая область, флажок (checkbox), radio-кнопки, выпадающий список (select) и его разновидности в виде списка категорий, записей или страниц, colorbox и загрузчик медиа (картинок, видео и т.д).

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

Всю информацию по Customizer вы можете найти в официальной документации на ресурсе для разработчиков WordPress.

Чтобы использовать Customizer, как объект, а также получить доступ к диспетчеру Customizer, добавьте в customize.php хук customize_register:

Методы, которые вы можете использовать, представлены ниже. Все они имеют свои настройки, но, если говорить в общем, то методы, начинающиеся с add_ позволяют добавить настройки, get_ - их получить, remove_ - удалить.

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

Создание отдельной панели

За создание панелей отвечает класс  WP_Customize_Panel. Название темы, для которой мы здесь будем создавать настройки, techex, поэтому во всех строках для перевода будет указана эта строка и сами настройки будут начинаться с techex_. Поэтому панель мы добавим с помощью метода add_panel():

Приоритет (priority) позволяет расположить настройки темы выше/ниже в списке уже существующих настроек, title - это название панели, а description - описание того, что можно сделать с помощью данных настроек.

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

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

Создание нового раздела настроек

Чтобы панель отобразилась в настройщике, в нее нужно добавить хотя бы один раздел.  За создание разделов настроек отвечает класс WP_Customize_Section и метод add_section():

Важно, чтобы ваш раздел имел приоритет, который позволит его разместить выше или ниже существующих или после них. Если вы собираетесь добавлять раздел не в созданную вами панель, а между стандартными, то ниже вы найдете их названия и приоритет (своего рода уровень).

Название ID (слаг) Приоритет (Priority)
Свойства сайта (Site Title & Tagline) title_tagline 20
Цвета (Colors) colors 40
Изображение заголовка (Header Image) header_image 60
Фоновое изображение(Background Image) background_image 80
Панель Меню (Menus) nav_menus 100
Панель виджетов (Widgets) widgets 110
Настройки главной страницы (Static Front Page) static_front_page 120
По умолчанию (default) 160
Дополнительный CSS (Additional CSS) custom_css 200

Имейте в виду, что вы можете добавлять элементы управления не только в новые панели, но и в те, что присутствуют в таблице выше. Для этого в атрибуте section нужно указать ID (слаг) соответствующего раздела, например, 'section' => 'colors'.

Добавляем свои (пользовательские) элементы управления

Пользовательские элементы управления - это собственно те самые текстовые поля, чекбоксы, радио-кнопки или выпадающие списки, о которых мы говорили в начале. Для каждого такого элемента настройки темы нужно добавлять саму настройку, за которую отвечает класс  WP_Customize_Setting и контролирующий элемент, создаваемый классом  WP_Customize_Control.

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

Имеет смысл остановиться на параметре type: он может иметь значение option (опции) и theme_mod (модификации темы):

  • Опции (option) хранятся в таблице wp_options  и имеют имя (название) в виде первого параметра 'setting_id'. В файлах темы вы будете получать значение любой опции принято функцией get_option().
  • Модификации темы (theme_mod) - это значение по умолчанию. Они хранятся для каждой темы отдельно в виде сериализованного массива в таблице wp_options, в опции с названием theme_mods_THEME_NAME. Получать такие опции принято функцией get_theme_mod() или get_theme_mods().

Для нашего раздела в футере мы добавим настройку для копирайта в виде текстового поля.

Теперь укажем, что это будет текстовое поле:

Методadd_control( $id, $args ) добавляет элемент управления, в котором вы указываете, каким будет ваш элемент управления (какой-либо из обычных элементов форм, например, text, textarea, checkbox, select или тот, что описан в ядре WordPress, например, WP_Customize_Color_Control. Общий вид использования этого метода:

Параметры add_control():

Давайте соберем все, что писали по частям, в один код для файла customize.php:

В результате этих действий мы увидим в кастомайзере следующие настройки:

customizer с настройками

Для того, чтобы "усилить" наши настройки футера, добавив в них еще одну - это флажок (checkbox), который будет отображать или прятать кнопку , отправляющую прокрутку вверх (to top), которая традиционно размещается в футере.

В методе add_setting() у нас есть функция techex_sanitize_checkbox(), которая нужна для проверки значения checkbox и его преобразования. Она не слишком обязательна, т.к. можно использовать и стандартную sanitize_text_field(), но давайте посмотрим, как можно реализовать этот код:

Теперь наши настройки нужно применить на всех страницах, добавив код в файл footer.php. Для этого мы будем использовать функцию get_theme_mod('setting_id', 'default_value'). В эту функцию нужно передать id настройки, под которым вы добавили ее в customize.php и значение по умолчанию.

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

В результате получим такое сочетание настроек и внешнего вида футера.

Настройки футера в Customizer

Автор: Админ

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

Ваш адрес email не будет опубликован. Обязательные поля помечены *