Создание параметров темы WordPress с помощью API настройки темы

Создание параметров темы WordPress с помощью API настройки темы очень просто. В этой статье показано, как это делается.

API настройки темы WordPress был выпущен вместе с WordPress 3.4 еще в 2012 году. Он обещал разработчикам стандартизированный способ добавления тем с богатыми параметрами, а пользователям — способ настройки своего веб-сайта в удобной для пользователя форме.

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

Успех этого проекта спорный, но он совершенствуется и набирает обороты. Он был построен на прочном фундаменте, и нет причин не начать с него.

Итак, давайте посмотрим, как мы можем легко добавлять настройки к темам с помощью API.

Вот что мы собираемся осветить сегодня:

• Создание нашего фонда
• Компоненты настройки темы
• Использование значений настройки
• Превью в реальном времени
• Инкапсуляция в классе
• Дополнительные параметры

Создание нашего фонда

Ключом к API настройки является класс WP_Customize_Manager , доступ к которому можно получить через объект $wp_customize . Мы будем использовать различные методы, определенные в этом классе, для добавления разделов настроек и элементов управления в них.

Рекомендуемый способ создания настроек темы — инкапсулировать их в класс. В наших первоначальных примерах я не буду придерживаться этой рекомендации, чтобы убедиться, что ясно, что является частью API настройки, а что нет. Я завершу статью реализацией на основе классов.

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

Компоненты настройки темы

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

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

Если разделение между элементом управления и настройкой кажется запутанным, подумайте об этом так: когда вы создаете настройку, вы сообщаете WordPress, что действительно существует настройка для цвета шрифта, и значение по умолчанию для этого — #444444. Само по себе это уже означает, что данную настройку можно использовать.

Однако настройщику темы необходимо знать, как манипулировать этим параметром. Вы можете создать для него текстовое поле, где пользователь вводит новые цвета вручную как «#ff9900», но вы также можете указать элемент управления цветом, который выведет селектор цвета. На уровне базы данных все по-прежнему будет сводиться к шестнадцатеричному цвету, но сторона, обращенная к пользователю, отличается.

Создание раздела

add_section() используется для создания разделов. Он принимает два параметра, слаг раздела и массив аргументов. Вот пример того, как я настроил раздел для параметров нижнего колонтитула в теме.

Большая часть этого довольно очевидна. Однако обратите внимание на приоритет! Это определяет порядок раздела на экране. Мне нравится увеличивать мои параметры десятками. Если мне нужно вставить раздел между двумя существующими разделами, мне не нужно будет все переиндексировать, я могу просто назначить новый раздел 95.

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

Добавление настроек

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

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

Создание элемента управления

Элементы управления устанавливаются с помощью add_control() . Этот метод принимает слаг и массив аргументов, или он также может получить выделенный объект управления. Объект управления используется для более сложных элементов управления, таких как селекторы цветов или загрузчики файлов.

Вот как я создал элемент управления, который изменяет цвет фона нижнего колонтитула:

Я передал объект управления add_control() . Этот объект должен быть создан путем передачи объекта $wp_customize в качестве первого параметра, уникального идентификатора элемента управления в качестве второго и массива аргументов в качестве третьего.

Обратите внимание, что контроль — это то, где все это объединяется. section задается идентификатором созданной нами секции, а settings задается идентификатором настройки.

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

Использование значений настройки

По умолчанию настройки сохраняются в файле theme_mod. Theme_mods — это альтернатива API настроек, они обеспечивают простой способ обработки настроек конкретной темы. Все, что вам нужно сделать, чтобы получить значение настройки, — это использовать get_theme_mod() с переданным ей идентификатором настройки.

Давайте добавим динамический CSS на наш веб-сайт, подключившись к wp_head и используя наши сохраненные настройки:

Превью в реальном времени

Предварительный просмотр параметров в реальном времени по умолчанию не включен. Чтобы использовать их, вы должны сделать три вещи:

• Поставьте в очередь файл Javascript, который обрабатывает превью
• Добавьте поддержку предварительного просмотра в реальном времени для настройки и
• Создайте код Javascript, чтобы позаботиться о каждой настройке

Постановка в очередь сценария предварительного просмотра в реальном времени

Единственная необычная вещь на этом шаге заключается в том, что нам нужно использовать customize_preview_init , и мы должны убедиться, что «jquery» и «customize-preview» загружены перед нашим скриптом. В остальном это стандартная очередь, указывающая на файл javascript в нашей теме:

Добавить поддержку предварительного просмотра в реальном времени для настройки

Это довольно легко. В аргументах наших настроек нам нужно определить transport ключ и установить его значение в postMessage . Давайте пересмотрим наш предыдущий код:

Создайте код Javascript, чтобы позаботиться о каждой настройке

Нам нужно будет использовать wp.customize() в Javascript. Этой функции следует передать идентификатор настройки в качестве первого параметра, второй — функция обратного вызова. Внутри мы привязываем функцию к изменению настройки и пишем наш код, который позаботится об изменении.

Из всего, что нам нужно только написать строку, используйте этот шаблон копирования-вставки для скорости записи в режиме реального времени:

Инкапсуляция в классе

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

Обратите внимание, что все точно так же, все, что изменилось, это название некоторых функций, и мы имеем в виду методы внутри класса, а не функции, разбросанные по нашему файлу functions.php .

Дополнительные параметры

Я настоятельно рекомендую прочитать документацию по API настройки тем в Кодексе WordPress. Он содержит множество дополнительных настроек и способов работы с API.

• бесплатные темы
• премиальные темы