Начало работы с Redux Framework. Часть первая.

Привет всем!

Данная статья будет больше полезна разработчикам тем WordPress, которые решили научиться делать темы с настраиваемыми админками. Если вы относитесь к данной категории разработчиков – то эта тема для вас.

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

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

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

Создавая параметры страниц/панелей, конечно!

Однако, параметры темы, не так легко создать, особенно для тех разработчиков, которые не имеют большого опыта работы с WordPress или программирования в целом. К счастью, есть варианты фреймворков.

Что такое Options Frameworks?

Options Frameworks – это библиотеки кода, плагины или классы, которые обеспечивают прочную основу, на которой разработчики могут легко и быстро создавать и добавлять страницы опций в свои темы. Это позволяет не разработчикам использовать такие панели для быстрой настройки внешнего вида сайта, не затрагивая код.

Панели параметров можно использовать для:

• загружать логотип
• изменять цвета фона или любого CSS-свойства элемента (например, шапки или подвала темы сайта)
• выбор предопределенной темы оформления или макета
• добавлять пользовательский CSS или JavaScript
• и так далее

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

В этой части мы с вами рассмотрим очень популярный и широко используемый фреймворк – Redux Framework.

Эта серия будет разделена на следующие части:

1. Часть 1: Внедрение Redux Framework и интеграция его в вашу тему
2. Часть 2: Добавление разделов, полей и работа с настройками конфигурации
3. Часть 3: Использование опций в вашей теме (и виджетах)
4. Часть 4: Альтернативы Redux
5. Часть 5: Заключение

Что такое Redux Options Framework?

Redux Framework – это фреймворк опций, который родился из комбинации четырех фреймворков, а именно:

1. NPH, который был создан Ли Мейсон с целью создания структуры, которая была совместима с требованиями Themeforest
2. ОВС
3. Простые варианты, представляющий собой слияние вышеперечисленных фреймворков, созданных Dovy Paukstys
4. Более ранняя версия Redux (Redux 2.0), созданная Даниэлем Гриффитсом и основанная на NPH

Основная команда Redux состоит из этих трех разработчиков. Проект находится в стадии активной разработки, обновления выходят достаточно регулярно.

Особенности Redux

• Использует API настроек WordPress
• Несколько типов полей
• Встроенные классы проверки
• Расширяемость модулями
• Функции импорта и экспорта, позволяющие переносить параметры между сайтами

Почему Redux?

• Бесплатно: Redux является бесплатным и со 100% открытым исходным кодом. Вы можете использовать его как в личных, так и в коммерческих проектах, не заплатив ни копейки.
• Совместимый с Themeforest: Redux соответствует требованиям Envato, что делает его хорошим вариантом для разработчиков тем, желающих разрабатывать темы или плагины для продажи на рынках Envato.
• Популярный: Redux используется более чем 250 (известными) предметами на рынках Envato, которые проданы за все время более чем на 6 миллионов долларов. Эта популярность намекает на мощь этого фреймворка.
• Простота в использовании: если вы понимаете, как работают массивы, вы можете использовать Redux. Начать работу с Redux так же просто, как создать объект конфигурации, состоящий не более чем из вложенных массивов.
• Гибкость: если это не совсем соответствует вашим потребностям, Redux может быть расширен для создания пользовательских полей и проверки/обработки ошибок.
• Хорошо документирован: Redux хорошо документирован. На сайте Redux есть база знаний, кодекс (документация для разработчиков) и видеоуроки.
• Сильное сообщество: сильное сообщество разрослось вокруг Redux. Если у вас возникли небольшие проблемы и вам нужна помощь, вы, вероятно, найдете кого-то, кто столкнулся с той же проблемой раньше. И если это функция, которую вы требуете, то более 50 участников будут готовы выслушать вас (и, возможно, добавить ее в следующем выпуске).

Установка Redux

Существует несколько способов установки Redux. Но для целей этого урока мы собираемся установить его из WordPress.org.

Установите плагин, как и любой другой:

• Перейдите в раздел “Плагины – Добавить новый”.
• В поле поиска введите Redux Framework и нажмите кнопку поиск плагинов.
• На странице результатов нажмите кнопку “Установить” в первой записи.
• После того, как вы установите его, активируйте его, как и любой другой плагин.

Активировать Демо-Режим

Чтобы активировать демо-режим, перейдите в “Плагины – Установленные плагины” и прокрутите до Redux Framework. Вы увидите нечто подобное:

Нажмите “Активировать Демо-Режим”.

Это активирует демонстрационный режим и создаст панель параметров “Sample Options” под названием “Sample Options” на панели управления WordPress.

Демо-режим и страница параметров позволит вам поиграть с Redux и изучить различные типы полей, которые он позволяет создавать.

Интеграция в вашу тему

До сих пор мы установили Redux и активировали демо-режим, чтобы мы могли исследовать различные поля, которые Redux позволяет нам создавать.

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

• Перейдите в каталог Redux-framework, который находится в каталоге плагинов WordPress (wp-content/plugins/) и скопируйте каталог “sample” в вашу тему.
• Откройте файл functions.php и добавьте следующую строку кода:

<?php

require_once (dirname(__FILE__) . '/sample/sample-config.php');

?>

Когда вы обновите панель управления WordPress и наведете указатель мыши на “Sample Options”, вы заметите, что ничего не изменилось – у вас все еще есть те же подменю, что и раньше. Это потому, что наша конфигурация точно такая же, как и раньше. Мы просто переместили файл config из каталога плагин Redux в каталог темы.

Кроме того может появиться следующее сообщение об ошибке:

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

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

Для этого измените строку, которую вы только что добавили functions.php:

<?php

require_once (dirname(__FILE__) . '/sample/sample-config.php');

?>

На эту:

<?php

require_once (dirname(__FILE__) . '/sample/barebones-config.php');

?>

Если вы теперь вернетесь на панель мониторинга, вы поймете, что наша панель “Sample Options” содержит один раздел — “Home Settings” — и одно поле, поле загрузчика мультимедиа с названием “Web Fonts” (Веб-шрифты).

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

Подведем итог

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

Мы также создали наши собственные файлы конфигурации barebones, чтобы продемонстрировать, как мы можем начать настраивать Redux для удовлетворения наших конкретных потребностей.

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

На этом буду заканчивать данный пост – до скорых встреч!