Настройка и использование Redux Framework

Redux Framework позволяет создавать панели опций для расширения тем WordPress. Рассмотрим, как установить, настроить и использовать Redux Framework.

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

Панель опций с помощью Redux Framework

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

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

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

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

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

WordPress мультиязычность с помощью qTranslate-X

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

Вход в билдер Redux

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

Вкладка Require / Embed Redux

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

Я выбираю Suggest + Embed

Вкладка Redux Arguments

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

Настройка Redux Arguments

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

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

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

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

Вкладка Redux Version

Настройка Redux Version

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

Вкладка Redux Fields

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

Redux Fields

Вкладка Generate Your Files

Нажимаем Generate Admin Folder

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

// подключаем redux

require get_template_directory() . '/admin-folder/admin/admin-init.php';

Redux 4

// подключаем redux 4

require get_template_directory() . '/inc/sample-config.php';

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

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

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

<?php global $r_n; ?>

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

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

Типы полей в Redux

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

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

<?php
/*
  *
  * ---> START SECTIONS
  *
  */
?>

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

/* Главная вкладка */
Redux::setSection( $opt_name, array(
  'title'  => 'Основные настройки - первая вкладка',
  'id'     => 'basic',
  'desc'   => 'Basic field with no subsections.',
  'icon'   => 'el el-home',
  'fields' => array(
    array(
      'id'       => 'phone', /* используется для вывода в php-файле */
      'type'     => 'text',
      'title'    => 'Телефон',
      'desc'     => 'Описание ...',
      'subtitle' => 'Подпись ...',
    ),
  )
) );

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

<?php echo $r_n['phone']; ?>

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

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

/* Первая Подвкладка главной вкладки */
Redux::setSection( $opt_name, array(
  'title' => 'Основные настройки',
  'id'    => 'basic',
  'desc'  => 'Данные, которые выводятся на всех страницах',
  'icon'  => 'el el-home'
) );

/* Вторая Подвкладка главной вкладки */
Redux::setSection( $opt_name, array(
  'title'        => 'Фоновые изображения в шапке',
  'desc'         => 'Изображения в слайдере на главной странице',
  'id'           => 'bg-main',
  'subsection'   => true,
  'fields'       => array(
    array(
      'id'       => 'bg-main-1',
      'type'     => 'media',
      'url'      => true,
      'title'    => 'Первое изображение',
      'compiler' => true,
      'desc'     => 'Описание ...',
      'subtitle' => 'Подпись ...',
    ),
  )
) );

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

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

<?php echo $r_n['bg-main-1']['url']; ?>

Пример:

<!-- изображение -->
<img src="<?php echo $r_n['bg-main-1']['url']; ?>" alt="alt">

<!-- фоновое изображение -->
<div style='background-image: url("<?php echo $r_n['bg-main-1']['url']; ?>");'></div>

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

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

Elusiveicons в reduxframework

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

'icon'  => 'el el-home'

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

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

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

<?php if ( $r_n['id'] ) { ?>
  ...
<?php } ?>

Например

<?php if ( $r_n['phone'] ) { ?>
  <div class="main-phone">
    <i class="fa fa-phone"></i>
    <?php $r_n['phone']; ?>
  </div>
<?php } ?>

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

admin
01/12/2019 14:49