Redux framework wordpress что это

Обновлено: 02.07.2024

Что такое Redux ? Это менеджер состояний. Чаще всего его используют с React, но его возможности не ограничиваются одной этой библиотекой. Хотя в React есть собственный метод управления состояниями (почитать о нём можно в руководстве по React), он плохо масштабируется. Перемещение состояния вверх по дереву работает для простых приложений, но в более сложных архитектурах изменение состояния производится через свойства (props). Ещё лучше делать это через внешнее глобальное хранилище.

Библиотека Redux — это способ управления состоянием приложения. Она основана на нескольких концепциях, изучив которые, можно с лёгкостью решать проблемы с состоянием. Вы узнаете о них далее, в этом руководстве по Redux для начинающих.

Примечание Вы читаете улучшенную версию некогда выпущенной нами статьи.
Содержание:

Когда нужно пользоваться Redux?

Redux идеально использовать в средних и крупных приложениях. Им стоит пользоваться только в случаях, когда невозможно управлять состоянием приложения с помощью стандартного менеджера состояний в React или любой другой библиотеке.

Простым приложениям Redux не нужен.

Использование Redux

Разберём основные концепции библиотеки Redux, которые нужно понимать начинающим.

Неизменяемое дерево состояний

В Redux общее состояние приложения представлено одним объектом JavaScript — state (состояние) или state tree (дерево состояний). Неизменяемое дерево состояний доступно только для чтения, изменить ничего напрямую нельзя. Изменения возможны только при отправке action (действия).

Действия

Действие (action) — это JavaScript-объект, который лаконично описывает суть изменения:

Единственное требование к объекту действия — это наличие свойства type , значением которого обычно является строка.

Типы действий должны быть константами

В простом приложении тип действия задаётся строкой. По мере разрастания функциональности приложения лучше переходить на константы:

и выносить действия в отдельные файлы. А затем их импортировать:

Генераторы действий

Генераторы действий (actions creators) — это функции, создающие действия.

Обычно инициируются вместе с функцией отправки действия:

Или при определении этой функции:

Редукторы

При запуске действия обязательно что-то происходит и состояние приложения изменяется. Это работа редукторов.

Что такое редуктор

Редуктор (reducer) — это чистая функция, которая вычисляет следующее состояние дерева на основании его предыдущего состояния и применяемого действия.

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

Чего не должен делать редуктор

Редуктор — это всегда чистая функция, поэтому он не должен:

мутировать аргументы;
мутировать состояние. Вместо этого создаётся новое состояние с помощью Object.assign(<>, . ) ;
иметь побочные эффекты (никаких API-вызовов с какими-либо изменениями);
вызывать нечистые функции. Это функции, результат которых зависит от чего-то кроме их аргументов (например, Date.now() или Math.random() ).

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

Симулятор редуктора

Упрощённо базовую структуру Redux можно представить так:

Состояние

Список действий

Редуктор для каждой части состояния

Редуктор для общего состояния

Хранилище

Хранилище (store) — это объект, который:

содержит состояние приложения;
отображает состояние через getState() ;
может обновлять состояние через dispatch() ;
позволяет регистрироваться (или удаляться) в качестве слушателя изменения состояния через subscribe() .

Хранилище в приложении всегда уникально. Так создаётся хранилище для приложения listManager:

Хранилище можно инициировать через серверные данные:

Функции хранилища

Прослушивание изменений состояния:

Поток данных

Поток данных в Redux всегда однонаправлен.

3–5 декабря, Онлайн, Беcплатно

Передача действий с потоками данных происходит через вызов метода dispatch() в хранилище. Само хранилище передаёт действия редуктору и генерирует следующее состояние, а затем обновляет состояние и уведомляет об этом всех слушателей.

Советуем начинающим в Redux прочитать нашу статью о других способах передачи данных.

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

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

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

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

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

Что такое Options Frameworks?

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

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

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

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

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

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

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

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

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

Почему Redux?

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

Установка Redux

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

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

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

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

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

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

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

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

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

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

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

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

Так может выглядеть нами созданная панель опций темы:

Установить Redux Framework можно двумя способами:

загрузка с админки Wordpress;
загрузка с официального сайта при помощи билдера.

Сегодня будем использовать второй способ.

Переходим на официальный сайт Redux.

Регистрируемся и нажимаем Launch the Redux Builder .

Заходим в билдер под своей учётной записью

Настройка и загрузка Redux Framework - Redux Builder

Вкладка Require / Embed Redux

Require Plugin - Redux не будет являться частью темы / плагина. Устанавливается отдельно
Suggest + Embed - встраивание Redux с TGM рекомендациями
Embed Only - Redux встроен в тему / плагин; TGM - не используется

Я выбираю Suggest + Embed

Вкладка Redux Arguments

Рассмотрим лишь некоторые настройки, т.к. их достаточно много

opt_name - глобальная переменная, благодаря которой все данные сохраняются и выводятся из базы данных. Имя переменной можете ввести своё

page_title - заголовок вкладки браузера

menu_title - заголовок вкладки нашей панели опций

Изменение иконок, их цветов и множество других настроек можно кастомизировать в данной вкладке.

Вкладка Redux Version

Выбор версии Redux

Вкладка Redux Fields

Выбор полей. Обычно я оставляю все

Вкладка Generate Your Files

Нажимаем Generate Admin Folder

Сгенерированные файлы размещаем в папке нашей темы и подключаем в functions.php

Как использовать Redux Framework

В header.php и footer.php объявляем глобальную переменную

В нашем случае код будет выглядеть следующим образом

Название данной переменной мы задавали во вкладке Redux Arguments

Теперь нам необходимо создать необходимые поля для вывода в админку. На момент написания статьи в redux предусмотрено 40 различных типов полей.

Добавление и изменение опций темы будем производить в файле: /admin-folder/admin/options-init.php

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

Создание текстового типа поля в Redux

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

Т.е. для вывода с базы данных текста нам необходимо использовать указанный нами id

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

Вывод изображений в Redux

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

С полным списком полей можно ознакомиться на странице reduxframework.

Чтобы изменить иконку для вкладки админки можно использовать elusiveicons.

Выбираем нужную иконку и вставляем название вместо el-home на выбранное

Вывод блока при наличии переменной

Иногда бывает необходимо чтобы блок выводился на странице только если пользователь заполнил поле в админке. Если поле не будет заполнено, то блок не будет выводиться.

Для этого мы будем использовать условие

Т.е. если телефон заполнен, то блок main-phone будет отображён на сайте, если нет - то блока на сайте не будет.

Надеюсь, вам понравилась данная информация. Если вам интересна тема web-разработки, то можете следить за выходом новых статей в Telegram.

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

Фреймворки для настроек в вордпресс шаблоне

Options Framework

Модуль Options Framework позволяет включить панель настроек в любой шаблон WordPress. Среди опций вы можете использовать текстовые поля, чекбоксы, radio button, селекты, загрузку картинок, выбор цвета, шрифта и т.п. Все желающие смогут интегрировать модуль внутрь своей темы.

На сайте разработчиков есть видео по использованию плагина + детальное описание. Options Framework поддерживает версию системы начиная с 3.6., имеет более 100 тысяч загрузок и оценку 4.8.

Titan Framework

Unyson Framework

OptionTree

Redux Framework

Судя по 200 тысячам загрузок решение Redux Framework весьма и весьма интересное. Создатели называют его простым и расширяемым вордпресс фреймворком, которые поможет разработчикам создавать функциональные панели настроек шаблонов. Он построен на WP Settings API. Кроме поддержки всех основных полей, модуль может похвастаться уникальными фишками: обработкой ошибок, проверками полей, экспортом/импортом, переводами, интегрированной поддержкой Google Webfonts и многим другим.

UpThemes Framework

Напоследок упомяну еще два решения, которые распространяются не через официальный сайт WP, а через сервис Github. Фреймворк UpThemes был создан одноименной компанией, что занимается разработкой WP тем. Он использует возможности Settings API и имеет все стандартные опции системы: загрузку изображений, выбор цвета, настройки темы, фонов и т.п. Решение расширяемое и поддерживает настройщик Theme Customizer. К сожалению, нет информации о требуемых версиях системы + последние правки там, судя по всему, были более года назад.

Vafpress Framework

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

Понравился пост? Подпишись на обновления блога по RSS, Email или twitter!

Оцените статью:

Читайте также: