WEBWordPress

Redux Framework – Отличное решение для быстрого создания красивых и функциональных плагинов и тем WordPress

Redux Framework – одна из самых популярных, продвинутых и бесплатных платформ опционных панелей для тем и плагинов WordPress. Его гибкость дает вам свободу создавать любые типы опций и настроек для вашего проекта на WordPress.

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

Мы пройдем через следующие шаги:

  1. Установка
  2. Общая конфигурация
  3. Создание панели параметров
  4. Использование параметров в теме

Примечание : я буду ссылаться на Redux Framework просто как Redux на протяжении всего этого урока. Это не следует путать с Redux , «контейнером предсказуемого состояния для приложений JavaScript».

Установка

Есть три способа включить Redux в ваш проект:

  • Установить его как отдельный плагин
  • Включить его в ядро ??вашей темы
  • Включить его в зависимый от темы плагин

Установка отдельным плагином

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

Чтобы получить панель с настраиваемыми параметрами для вашей темы или плагина, вам нужно создать отдельный файл config.php.

Отсюда плюсы и минусы этого подхода:

Плюсы

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

Минусы

  • Усилилось ощущение, что тема / плагин зависит от сторонних разработок и инструментов.
  • Вы избегаете многочисленных предупреждений и ошибок от плагина Theme Check .

Включение в ядро темы

Ничто не остановит вас, включая Redux в вашей теме, если только он не конфликтует с плагином Theme Check. Логика та же, что и раньше, вам все еще нужен файл config.php с вашими пользовательскими настройками, но теперь вы избегаете установки дополнительных плагинов.

Минусы

Увеличивает размер пакета темы.

Избегайте установки дополнительных плагинов.

Потенциальные конфликты и проблемы могут возникнуть из-за плагина Theme Check.

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

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

Включение в зависимый от темы плагин

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

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

Минусы

Не нашел 🙂

Вы избегайте установки дополнительных плагинов.

Панель параметров темы кажется более интегрированной в вашу тему.

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

Общая конфигурация

Если вы изучите папку плагина Redux Framework по умолчанию, вы найдете множество файлов и каталогов, но все, что вам здесь нужно, это папка ReduxCore.

Папка ReduxCore

Скопируйте все содержимое этой папки в папку с надстройками. Создайте папку, назовите ее как хотите, например, optionpanel, и вставьте в нее содержимое ReduxCore. Затем создайте пустой файл внутри этой папки и назовите его config.php. Далее нам нужно будет подключиться к reduxframework, в бесконфликтном режиме, поэтому, если плагин надстройки установлен в среде WordPress, сайт не будет "падать".

В основной файл вашего плагина добавьте код:

<?php if (!class_exists('ReduxFramework') && file_exists(plugin_dir_path(__FILE__) . '/optionpanel/framework.php')) { require_once ('optionpanel/framework.php'); } if (!isset($redux_demo) && file_exists(plugin_dir_path(__FILE__) . '/optionpanel/config.php')) { require_once ('optionpanel/config.php'); }

Вот и все! Redux Framework теперь интегрирован, хотя вы еще не увидите панели параметров, так как сначала нам нужно создать некоторые параметры. Все это будет сделано в файле config.php, который мы создали.

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

В качестве руководства и отправной точки вы можете использовать файл sample-config.php, поставляемый с плагином Redux. Он содержит весь код, необходимый для создания собственных пользовательских параметров. А пока давайте выделим основной процесс настройки.

Откройте файл config.php и в начале добавьте этот код (открывающий <?php тег не понадобится, если он уже присутствует):

<?php if (!class_exists('Redux')) { return; }

Эта проверка гарантирует, что Redux Framework активен, в противном случае все созданные нами параметры не будут работать и, скорее всего, приведут к множеству ошибок PHP.

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

$opt_name = "your_variable_name";

Сделайте её уникальной, с помощью префиксов, например: yourbrandname_yourthemename.

После этого добавьте код:

$theme = wp_get_theme();

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

Аргументы

На данный момент нам нужно добавить следующие аргументы:

$args = array( 'opt_name' => $opt_name, 'display_name' => $theme->get('Name') , 'display_version' => $theme->get('Version') , 'menu_type' => 'submenu', 'allow_sub_menu' => true, 'menu_title' => esc_html__('Theme Settings', yourtextdomain'),'page_title' => esc_html__('ThemeSettings', yourtextdomain') , 'google_api_key' => '', 'google_update_weekly' => false, 'async_typography' => true, 'admin_bar' => true, 'admin_bar_icon' => '', 'admin_bar_priority' => 50, 'global_variable' => $opt_name, 'dev_mode' => false, 'update_notice' => false, 'customizer' => true, 'page_priority' => null, 'page_parent' => 'themes.php', 'page_permissions' => 'manage_options', 'menu_icon' => '', 'last_tab' => '', 'page_icon' => 'icon-themes', 'page_slug' => 'themeoptions', 'save_defaults' => true, 'default_show' => false, 'default_mark' => '', 'show_import_export' => true );

Здесь много аргументов, но не волнуйтесь, я выделю самые важные.

menu_type

Если вы хотите, чтобы страница параметров вашей темы отображалась как отдельный элемент меню верхнего уровня, вам следует установить это значение menu, если вам нужно, чтобы параметры вашей темы отображались в виде подменю (я предпочитаю размещать их в разделе Внешний вид ), установите значение на submenu.

dev_mode

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

update_notice

Поскольку Redux будет частью вашего проекта, вы не захотите, чтобы ваши пользователи получали какие-либо уведомления об обновлениях от Redux Framework, поэтому установите это значение false.

customizer

Если вы хотите показать свои пользовательские настройки как часть настройщика WordPress, просто установите для этого аргумента значение true.

Массив arguments содержит гораздо больше элементов, и если вам нужна информация о каждом из них, вы можете найти подробности в файле sample-config.php. Для наших нужд мы настроили аргументы достаточно. Теперь давайте установим аргументы.

Redux::setArgs( $opt_name, $args );

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

Теперь ваша панель темы готова, вы можете добавлять разделы с опциями. Думайте о секциях как о группах. Если вы хотите добавить (например) параметры заголовка, вы создаете раздел заголовка и добавляете в него параметры. Для создания любого раздела вам понадобится следующая структура:

Redux::setSection($opt_name, array( 'title' => esc_html__('Section title', 'yourtextdomain') , 'id' => esc_html__('section-unique-id', ' yourtextdomain') , 'icon' => 'icon-name', 'fields' => array()));

Здесь я хочу выделить id атрибут - убедитесь, что он уникален. Вы можете использовать пользовательские значки, но набор значков по умолчанию - elusiveicons .

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

Если вы хотите сделать раздел подразделом ранее добавленного раздела, просто добавьте новый аргумент 'subsection' => true.

Сам параметр - это не что иное, как массив с аргументами, например:

array( 'id' => 'opt-checkbox', 'type' => 'checkbox', 'title' => esc_html__('Checkbox', 'yourtextdomain') , 'subtitle' => esc_html__('No validation can be done on this field type', 'yourtextdomain') , 'desc' => esc_html__('This is the description field, again good for additional info.', ' yourtextdomain') , 'default' => '1' // 1 = on | 0 = off),

С помощью этого кода мы добавили флажок в наш раздел. Наиболее важными здесь являются идентификатор (он должен быть уникальным) и тип (он должен быть правильным и следовать точному именованию типа поля, предоставляемого Redux). Опять же, более подробную информацию о полях можно найти в файле sample-config.php.

Как правило, это все, что вам нужно знать, чтобы создать панель параметров. Далее мы рассмотрим, как использовать эти параметры.

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

Redux хранит все параметры в глобальной переменной. Помните $opt_name переменную, которую мы создали в файле config.php? Это переменная, которая хранит все ваши параметры, и вы можете получить к ним доступ следующим образом.

Во-первых, вам нужно объявить глобальную переменную. И это представляет первую потенциальную проблему: не рекомендуется объявлять глобальную переменную вне функции или действия. Решение состоит в том, чтобы добавить в ваш файл functions.php эту небольшую функцию:

function yourprefix_theme_options_global_variable() { global $yourglobalvariable; }

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

yourprefix_theme_options_global_variable ();

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

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

Если вы используете опции без предварительной проверки, существует ли эта опция, вы получите уведомление PHP, в котором говорится о неопределенной переменной / индексе . Почему это важно? Потому что, если пользователь активирует вашу тему, но не активирует дополнительный плагин, содержащий вашу панель параметров, он или она увидит коллекцию предупреждений PHP о неопределенных переменных. Не идеально.

Существует хорошая схема, позволяющая избежать этой ситуации - она ??выглядит так:

$your_option_name = (isset($GLOBALS['yourglobalvariable']['youroption'])) ? $GLOBALS['yourglobalvariable']['youroption'] : “yourdefaultvalue for thisoption”;

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

If (isset($GLOBALS['yourglobalvariable']['youroption']) { // do the stuff…}

Вывод

Спасибо за чтение, я надеюсь, что это поможет вам начать использовать Redux для вашей темы! Если у вас есть какие-либо вопросы или предложения, пожалуйста, оставьте комментарий ниже.

Полезные ссылки

Статья была переведена для блога TechBlog.SDStudio.top

Источник: webdesign.tutsplus.com

Связанные записи
WEBWordPress

Как справиться с загрузкой изображений, которые могут не существовать и вызывать ошибку загрузки?

WEBWordPress

Как включить метки (теги , tags) на страницах WordPress

WEB

Google Analytics - Что означают источники трафика сайта Direct, Referral, Organic

WEBWordPress

Contact Form 7 в 2 или более столбца (с плагином и без плагина)

Категории сайта

Мои записи