Создание кастомной панели настроек для темы WordPress, задача, которая способна растянуться на недели. WordPress Settings API требует написания тонны шаблонного кода: регистрация, рендеринг полей, валидация, сохранение. И когда проект горит, писать всё это с нуля, неоправданная роскошь.

Redux Framework решает эту проблему радикально: вместо ручной возни с Settings API вы описываете нужные поля в одном конфигурационном файле, а фреймворк берёт на себя всё остальное, рендеринг, валидацию, экранирование, импорт/экспорт и даже динамический CSS. На WordPress.org у плагина больше 32 миллионов загрузок и свыше миллиона активных установок, и это не маркетинговая накрутка, а прямое следствие того, что Redux реально экономит недели разработки.

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

💡 Быстрый обзор:

• Установка Redux Framework: три способа интеграции в проект WordPress
• Подключение фреймворка и создание конфигурационного файла
• Настройка аргументов панели: положение в меню, кастомайзер, Google Fonts
• Добавление разделов и полей ввода через единый API Redux
• Извлечение сохранённых значений в шаблонах темы с защитой от ошибок

Что такое Redux Framework и зачем он нужен

Redux Framework, это бесплатный опционный фреймворк с открытым исходным кодом для тем и плагинов WordPress. Построен поверх стандартного WordPress Settings API, но полностью абстрагирует его сложность. Вместо десятков вызовов register_setting, add_settings_field и settings_fields вы пишете декларативный массив на PHP, и получаете полностью рабочую, адаптивную панель настроек с 49 типами полей на выбор.

Важно не путать с JavaScript-библиотекой Redux для управления состоянием, это совершенно разные продукты с совпадающим названием. WordPress-фреймворк появился раньше JS-библиотеки.

Ключевые возможности, которые вы получаете «из коробки»:

• 49 типов полей: от обычного текста и чекбокса до редактора ACE, повторителя (repeater), Google Maps, сортировщика блоков и слайдера изображений;
• Автоматический вывод CSS: для полей типографики, цвета, градиентов, отступов, достаточно указать CSS-селектор, и Redux сам сгенерирует таблицу стилей с Google Fonts;
• Интеграция с кастомайзером: одноимённый аргумент customizer => true, и вся панель дублируется в WordPress Customizer с живым превью;
• Импорт/экспорт настроек: встроенный инструмент переноса конфигурации между сайтами;
• Компилятор: хук, срабатывающий при изменении поля с флагом compile => true, можно, например, пересобрать SCSS;
• Валидация и экранирование: каждое значение проходит санитизацию, соответствующую типу поля, текстовое поле не примет массив, числовое отсеет строки.

С 2024 года фреймворк развивается под крылом Team Updraft (Дэвид Андерсон, создатель UpdraftPlus). Текущая версия, 4.5.11 (март 2026), полная совместимость с WordPress 7.0 и PHP 8.5. Проект живёт на redux.io, документация, на сайте документации Redux.

Установка Redux Framework

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

Отдельным плагином

Установите Redux Framework из каталога WordPress.org как обычный плагин. После активации панель параметров не появится, плагин лишь предоставляет API. Все настройки вы описываете в конфигурационном файле внутри своей темы.

Плюсы: тема остаётся лёгкой (ядро фреймворка не раздувает архив); фреймворк обновляется независимо через стандартный механизм WordPress.

Минусы: ваша тема требует наличия стороннего плагина, пользователю нужно установить и активировать его отдельно; при отсутствии плагина панель настроек исчезает, и нужно предусмотреть graceful fallback в коде темы.

В ядре темы

Скопируйте папку ReduxCore внутрь вашей темы и подключите её в functions.php. Фреймворк становится неотъемлемой частью темы, пользователю не нужно ставить дополнительный плагин.

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

Минусы: размер архива темы вырастает примерно на 2 МБ; каждое обновление фреймворка требует обновления темы с вашей стороны; плагин Theme Check может выдавать предупреждения.

В зависимом плагине темы

Рекомендованный подход для премиальных тем. Создайте отдельный плагин-компаньон для вашей темы (в нём же удобно держать кастомные типы записей, шорткоды, виджеты) и встройте Redux в него. В functions.php темы добавьте проверку наличия этого плагина через TGMPA или аналогичный механизм.

Плюсы: чистая архитектура (функционал темы отделён от представления); фреймворк не раздувает архив темы; обновления фреймворка не затрагивают код темы напрямую.

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

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

Общая конфигурация: подключаем фреймворк

Внутри плагина Redux Framework (или скачанного с официального сайта Redux архива) найдите папку ReduxCore, она содержит всё ядро.

Создайте в своём плагине (или теме) папку, например optionpanel, и скопируйте в неё содержимое ReduxCore. Рядом положите пустой файл config.php, именно в нём мы опишем все разделы и поля панели настроек.

Теперь подключите фреймворк. В основной файл плагина (или functions.php темы) добавьте:

1
<?php
2
if ( ! class_exists( 'Redux' ) ) {
3
    require_once plugin_dir_path( __FILE__ ) . 'optionpanel/ReduxCore/framework.php';
4
}

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

После этого можно переходить к созданию разделов и полей.

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

Аргументы фреймворка

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

1
$opt_name = 'mytheme_options';

Префикс обязателен, он предотвращает конфликты имён с другими плагинами, использующими Redux. Хорошая практика: brandname_themename.

Теперь соберём массив аргументов. Вот минимальная рабочая конфигурация:

1
$args = array(
2
    'opt_name'             => $opt_name,
3
    'display_name'         => 'Настройки темы',
4
    'display_version'      => '1.0.0',
5
    'menu_type'            => 'submenu',
6
    'allow_sub_menu'       => true,
7
    'menu_title'           => 'Настройки темы',
8
    'page_title'           => 'Панель настроек темы',
9
    'page_parent'          => 'themes.php',
10
    'page_permissions'     => 'manage_options',
11
    'page_slug'            => 'theme_options',
12
    'dev_mode'             => false,
13
    'update_notice'        => false,
14
    'customizer'           => true,
15
    'save_defaults'        => true,
16
    'show_import_export'   => true,
17
    'async_typography'     => true,
18
    'admin_bar'            => true,
19
    'global_variable'      => $opt_name,
20
);
21
 
22
Redux::set_args( $opt_name, $args );

Разбор ключевых аргументов:

• menu_type: submenu, панель появится внутри пункта «Внешний вид»; menu, отдельный пункт верхнего уровня в админке;
• customizer: true включает дублирование всех полей в WordPress Customizer с живым превью, пользователь видит изменения до сохранения;
• dev_mode: включите на время разработки (расширенная отладка, демо-импорт), но обязательно выключите перед релизом;
• update_notice: всегда false для тем и плагинов, в которые встроен Redux, ваши пользователи не должны получать уведомления об обновлениях фреймворка отдельно от вашего продукта;
• show_import_export: добавляет инструмент переноса всех настроек между сайтами одним кликом.

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

Добавление разделов и полей

Раздел, это логическая группа полей (вкладка на экране настроек). Минимальный раздел:

1
Redux::set_section( $opt_name, array(
2
    'title'  => 'Шапка сайта',
3
    'id'     => 'header_section',
4
    'icon'   => 'dashicons-heading',
5
    'fields' => array(
6
        array(
7
            'id'       => 'header_logo',
8
            'type'     => 'media',
9
            'title'    => 'Логотип',
10
            'subtitle' => 'Загрузите изображение логотипа',
11
            'default'  => array( 'url' => get_template_directory_uri() . '/images/logo.png' ),
12
        ),
13
        array(
14
            'id'      => 'sticky_header',
15
            'type'    => 'switch',
16
            'title'   => 'Фиксированная шапка',
17
            'default' => true,
18
        ),
19
    ),
20
) );

Иконки разделов: Redux 4.x поддерживает встроенные иконки WordPress Dashicons (полный список, на developer.wordpress.org). Для кастомных иконок используйте CSS-классы вашего набора (например, Font Awesome).

Каждое поле, это ассоциативный массив с обязательными ключами id, type и title. Примеры часто используемых типов:

1
// Селект с поиском
2
array(
3
    'id'      => 'sidebar_layout',
4
    'type'    => 'select',
5
    'title'   => 'Раскладка сайдбара',
6
    'options' => array(
7
        'right' => 'Сайдбар справа',
8
        'left'  => 'Сайдбар слева',
9
        'none'  => 'Без сайдбара',
10
    ),
11
    'default' => 'right',
12
),
13
 
14
// Выбор цвета RGBA
15
array(
16
    'id'      => 'accent_color',
17
    'type'    => 'color_rgba',
18
    'title'   => 'Акцентный цвет',
19
    'default' => array(
20
        'color' => '#2271b1',
21
        'alpha' => 1,
22
    ),
23
),
24
 
25
// Типографика с Google Fonts
26
array(
27
    'id'          => 'body_typography',
28
    'type'        => 'typography',
29
    'title'       => 'Шрифт текста',
30
    'google'      => true,
31
    'font-backup' => true,
32
    'line-height' => true,
33
    'font-size'   => true,
34
    'default'     => array(
35
        'font-family' => 'Inter',
36
        'font-size'   => '16px',
37
    ),
38
),

Для создания подраздела добавьте аргумент 'subsection' => true, поле появится вложенной вкладкой внутри родительского раздела.

Список всех 49 типов с примерами конфигурации, в разделе типов полей документации Redux.

Использование параметров в теме

Redux хранит все значения в одной глобальной переменной, той самой, которую вы указали в $opt_name. Чтобы получить значение в шаблоне, сначала объявите её глобальной. Но прямое объявление global вне функции или экшена, плохая практика. Правильный подход:

1
function mytheme_get_option( $option_id, $default = '' ) {
2
    global $mytheme_options;
3
    return isset( $mytheme_options[ $option_id ] ) ? $mytheme_options[ $option_id ] : $default;
4
}

Функция-обёртка делает две вещи: предотвращает PHP Notice «undefined index» при обращении к несуществующему ключу и предоставляет fallback-значение. В шаблоне использование выглядит так:

1
$logo = mytheme_get_option( 'header_logo' );
2
if ( ! empty( $logo['url'] ) ) {
3
    echo '<img src="' . esc_url( $logo['url'] ) . '" alt="' . esc_attr( get_bloginfo( 'name' ) ) . '">';
4
}

Если панель настроек ещё не настроена (например, пользователь активировал тему, но не установил зависимый плагин), $mytheme_options будет пустым массивом, и mytheme_get_option() молча вернёт $default, без вороха предупреждений в debug.log.

Для динамического CSS используйте встроенную возможность Redux, укажите аргумент output в конфигурации поля:

1
array(
2
    'id'     => 'body_bg_color',
3
    'type'   => 'color',
4
    'title'  => 'Цвет фона',
5
    'output' => array( 'background-color' => 'body' ),
6
),

Redux автоматически сгенерирует и встроит CSS-правило <style>body{background-color:#fff;}</style>, без единой строки ручного кода.

Наглядно процесс установки и настройки полей показан в этом видеоуроке: от подключения фреймворка до создания первого раздела с селектами и переключателями:

⁉️🤔 Частые вопросы

Чем Redux Framework отличается от Carbon Fields, ACF Options Pages и других решений?

Redux предлагает 49 типов полей «из коробки» (против ~25 у Carbon Fields и ~30 у ACF Pro) и фокусируется именно на панелях настроек темы, а не на метаполях записей. ACF Options Pages, это надстройка над метапольным движком, тогда как Redux изначально спроектирован под опционные панели: встроенный импорт/экспорт, компилятор, живой превью в кастомайзере, динамический CSS с Google Fonts. Carbon Fields ближе по духу, но требует Composer и неймспейсов, в ряде хостинговых окружений это барьер. Вывод: если вы уже используете ACF для метаполей, берите ACF Options Pages, чтобы не плодить сущности; если строите тему с нуля и нужна мощная опционная панель, Redux даст больше возможностей бесплатно.

Работает ли Redux Framework с блочными темами (Full Site Editing)?

Да, но с оговорками. Redux выводит панель настроек через классический admin-интерфейс (Settings API), а не через редактор сайта. Для гибридного подхода, блочная тема плюс панель Redux для глобальных настроек (цвета, типографика, скрипты аналитики), связка работает. На момент версии 4.5.11 прямая интеграция с theme.json не реализована: значения нужно извлекать в шаблонах через mytheme_get_option() и инлайнить как CSS-переменные. Для чистого FSE-окружения, где все настройки должны жить в редакторе сайта, Redux избыточен; для классических и гибридных тем, один из лучших вариантов.

Как быть, если Redux конфликтует с другим плагином, использующим эту же библиотеку?

Это известная проблема «двойного включения». Проверка if ( ! class_exists( 'Redux' ) ) перед require_once гарантирует, что фреймворк загрузится ровно один раз: WordPress исполняет PHP последовательно, и первый же require_once делает последующие вызовы безвредными. Если ваша тема и сторонний плагин оба тащат Redux, загрузится та копия, которая инициализировалась первой, и панели обоих продуктов продолжат работать. При значительной разнице мажорных версий возможна несовместимость на уровне API, лечится обновлением отстающей стороны до актуального релиза.

Нужна ли лицензия для использования Redux Framework в коммерческой теме?

Нет. Redux распространяется под GPLv2, той же лицензией, что и WordPress. Вы можете свободно включать фреймворк в коммерческие темы и плагины, продавать их на ThemeForest, распространять через собственный сайт. Единственное ограничение GPLv2, производные работы тоже должны быть под GPLv2, но это требование относится к исходному коду, а не к контенту сайта конечного пользователя. Redux Pro (дополнительные поля, расширенный кастомайзер, приоритетная поддержка), отдельный платный продукт, необязательный для работы фреймворка.

Что делать, если после обновления WordPress панель Redux перестала открываться?

Сценарий: после мажорного апдейта WP белый экран на странице настроек темы. Порядок действий: первое, проверьте, что у вас установлена версия Redux не ниже 4.5.11 (совместимость с WP 7.0). Второе, на минуту включите 'dev_mode' => true и посмотрите вывод ошибок PHP на экране настроек, Redux в dev-режиме показывает детальный лог. Третье, если ошибка сыплется из конкретного поля, проверьте, не используете ли вы deprecated-тип (search удалён в Redux 3.x, divide переименован). Актуальный список полей всегда в документации Redux.

Стоит ли использовать Redux Framework в 2026 году

Redux Framework, зрелый, активно поддерживаемый продукт, за спиной которого 32 миллиона загрузок и сообщество из более чем 270 контрибьюторов на GitHub. Если вы строите классическую или гибридную тему WordPress и вам нужна панель настроек с богатым набором полей, живым превью в кастомайзере и динамическим CSS, Redux сэкономит вам недели разработки и даст результат, соответствующий стандартам безопасности WordPress (PHPCS, экранирование, валидация).

Архитектурно лучший способ интеграции, вынести фреймворк в зависимый плагин темы через require_once c проверкой class_exists. Это даёт и чистую кодовую базу, и защиту от конфликтов двойного включения, и прозрачный путь обновления.

Когда Redux не нужен: вы делаете лёгкую тему без панели настроек; работаете в чистом FSE-окружении (блочная тема с theme.json); у вас уже развёрнут ACF с Options Pages для метаполей. В этих случаях тащить Redux ради одной кнопки включения/выключения, как стрелять из пушки по воробьям: фреймворк добавит ~2 МБ к размеру темы без соразмерной пользы.

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