Начало работы с Redux Framework. Часть вторая.
Привет, друзья!
Продолжаю тему фреймворка Redux, и сегодня представляю ващему вниманию вторую часть статьи о начале работы с Redux Framework.
Эта статья поможет вам, разработчику, начать использовать Redux Framework самым простым способом: добавлять поля. В прошлом работа с Redux требовала некоторого понимания PHP-классов и того, как они работают. С Redux 3.5 и выше кривая обучения практически исчезла.
Я как один их разработчиков, который использует в своих проектах Redux Framework в этой статье я расскажу о внутренней структуре Redux, о том, как работают поля и разделы и о глобальных аргументах конфигурации.
Ко мне часто поступают вопросы про хостинг, которым я пользуюсь и поэтому решил указать хостинг в статье https://sprinthost.ru. Вы можете попробовать попользоваться хостингом 30 дней бесплатно. Чтобы понять, как будет работать Ваш сайт на этом хостинге просто перенести свой сайт (в этом поможет поддержка хостинга бесплатно) и и таким образом сможете понять подходит хостинг Вам или нет. На этом хостинге находятся сайты с 20 000 тысяч посещаемость и сайты чувствуют себя отлично. Рекомендую! Да, если делать оплату на 1 год то получаете скидку 25%. И что мне нравится — тех. поддержка всегда помогает в технических вопросах, за что им спасибо. Как Вы понимаете не всегда проходит всё гладко и нет желания, чтобы сайт не был доступен тем самым страдал трафик и доход.
Redux поставляется с файлом sample-config.php, содержащим несколько примеров настройки Redux, а также примеры почти для каждого предлагаемого нами поля. Для более глубокого понимания просмотрите пример конфигурации или ознакомьтесь с документацией Redux.
Загрузка Redux
Чтобы начать использовать Redux Framework, он должен быть загружен. Есть два способа сделать это.
Во-первых, Redux можно легко установить как плагин и активировать. Плагин находится в свободном доступе на WordPress.org. Установка выполняется через интерфейс установщика плагина.
Второй способ установить Redux Framework — встроить его в вашу тему или плагин. Встраивание довольно легко сделать. Просто скопируйте папку «ReduxCore» в свою тему или плагин (переименовав каталог на любое другое имя) и включите в него файл «framework.php», используя стандартные функции PHP «include».
Если эти инструкции по встраиванию слишком сложны, Redux также предлагает Redux Builder, который позволяет вам выводить полнофункциональную тему с уже загруженным Redux. Лучше всего то, что услуги Redux Builder совершенно бесплатны.
Теперь, когда Redux Framework загружен, мы можем начать его использовать.
Понимание того, как работает Redux
Чтобы понять, как работает Redux Framework, нужно сначала понять, что такое экземпляр Redux. Redux может работать одновременно с темой и любым количеством плагинов, и все это в рамках одной установки WordPress. Каждый экземпляр имеет свой уникальный набор характеристик и аргументов: каждый может вести себя совершенно иначе, чем другие экземпляры Redux.
Причина, по которой Redux работает так, как он это делает, заключается просто в обеспечении максимального уровня гибкости. Слишком много опционных сред разрешено запускать только одному экземпляру. Мы хотели, чтобы разработчики плагинов и тем работали с Redux без помех для кода друг друга.
Аргумент opt_name
Как именно хранить экземпляры отдельно? Это все через уникальный ключ, который называется «opt_name». Здесь ваши данные хранятся в WordPress, а также считаются вашим уникальным ключом в Redux Framework. Важно понимать, что прежде чем вы начнете работать с Redux Framework, вам нужно выбрать уникальный «opt_name». Как только это определение будет сделано, пришло время копаться в глобальных аргументах.
Установка глобальных аргументов
Панель параметров Redux Framework построена с использованием массивов PHP. Глобальные аргументы ниже применяются только к нашему образцу экземпляра Redux Framework. Полный список глобальных аргументов можно найти на сайте Redux. В этом руководстве мы с вами будем работать с очень простым массивом аргументов и я покажу, как его установить.
Redux::setArgs( ‘tuts_plus_tutorial’, // Это ваш аргумент «opt_name», array( // Это ваш массив аргументов ‘display_name’ => ‘Tuts+ Tutorial’, ‘display_version’ => ‘Part 2’, ‘menu_title’ => ‘Tuts+ Menu Item’, ‘admin_bar’ => ‘true’, ‘page_slug’ => ‘tuts_plus_page_slug’, // Должно быть одно слово, без специальных символов, без пробелов ‘menu_type’ => ‘menu’, // Menu or submenu (меню или подменю) ‘allow_sub_menu’ => true, ) );
После запуска этого кода Redux Framework создаст полнофункциональную панель. На рисунке ниже показано, как каждый аргумент влияет на эту панель.
Настройка разделов
Теперь, когда наша панель запущена, давайте добавим несколько разделов и полей. Redux использует вложенные массивы для полей и аргументов, хотя в Redux 3.5 и выше эти процедуры легко разделяются. Давайте начнем с создания раздела, в который мы можем добавить поля. Более подробную документацию по разделам можно найти в документации по разделам.
Redux::setSection( ‘tuts_plus_tutorial’, // Это ваш аргумент «opt_name», array( // Это ваш массив аргументов ‘id’ => ‘section_example_1’, // Уникальный идентификатор панели. Должен быть задан и не должен содержать пробелов или специальных символов ‘title’ => ‘Example Section’, ‘desc’ => ‘This is for descriptive text. (Это для текст описания)’, ‘heading’ => ‘Установка этого параметра переопределяет параметр «Название»‘, ‘icon’ => ‘el el-heart’, // http://elusiveicons.com/icons/ //’subsection’ => true, // Включить это как подраздел предыдущего раздела ) );
Иконки
Команда Redux Framework также поддерживает Elusive Icons. Таким образом, набор иконок Elusive уже непосредственно вшит в ядро Redux. Добавить значки так же просто, как указать класс, как в примере. Если вы хотите иметь другой пакет значков, например FontAwesome, то для этих процедур также есть документация.
Подразделы
Разделы также могут быть преобразованы в подразделы для упрощения организации вашей панели. Ниже приведен пример с примером источника.
Настройка полей
Установка полей ничем не отличается от установки разделов или аргументов: все начинается с массива. Прежде чем мы зайдем слишком далеко, мы должны указать, что Redux имеет более 30 различных «типов» полей, каждый со своим собственным набором аргументов и множеством опций. Чтобы увидеть различные типы, еще раз предлагается прочитать в документации Redux по полям.
Поля могут быть добавлены в разделы двумя способами. Сначала добавьте массивы полей к функции «setSections», описанной выше. В приведенных выше примерах вы можете легко добавить аргумент «fields» и добавить любое количество полей в этот раздел.
Второй способ требует дополнительного вызова функции Redux API, но он такой же простой.
Redux::setField( ‘tuts_plus_tutorial’, // Это ваш аргумент «opt_name», array( // Это ваш массив аргументов ‘id’ => ‘section_example_1’, // Уникальный идентификатор панели. Должен быть задан и не должен содержать пробелов или специальных символов ‘type’ => ‘Text’, ‘section_id’ => ‘section_example_1’, ‘title’ => ‘Example Field’, ‘subtitle’ => ‘Field Subtitle’, ‘desc’ => ‘This is for descriptive text. (Это для текст описания)’, ) );
Давайте посмотрим, что это делает с нашей панелью на примере.
Потратьте некоторое время, чтобы тщательно изучить различные типы полей. Redux Framework содержит несколько действительно мощных полей. Например, поле «typography» автоматически ставит выбранные шрифты Google на вашу страницу. Поле «background» — если выходной аргумент будет установлен в селектор CSS — будет автоматически генерировать необходимый CSS и добавлять на ваш сайт. Проще говоря, Redux Framework действительно делает много тяжелой работы для вас!
Чувствуешь себя немного потерянным?
Самый простой способ начать — это сначала посмотреть демонстрационный сайт Redux. Он демонстрирует все различные типы полей, которые предлагает Redux, с кучей их конфигураций.
Что действительно полезно, так это то, что конфигурация демонстрационного сайта поставляется с Redux. Внутри ~/sample/sample-config.php есть все, что вы видите на демонстрационном сайте.
Если вы все же потерялись, за Redux существует процветающее сообщество, которое поможет, хотя вы найдете большинство всего, что вам нужно, на сайте документации Redux.
Получить полный пример
Полный пример конфигурации, представленный в этом руководстве, прилагается для загрузки в правой боковой панели. Это только пример. У встроенного примера конфигурации Redux есть много более обширных примеров.
Заключение
Во второй части этой серии мы подробно рассмотрели, как работает Redux и как начать работу с ним. Мы также рассмотрели способы добавления разделов и полей в экземпляр Redux.
Мы также рассмотрели разделы и то, как они могут отображаться по-разному, исходя из аргументов и того, как поля связаны с разделами, и как их можно легко настроить в соответствии с вашими потребностями.
В следующем уроке из этой серии мы рассмотрим следующие шаги по реальному использованию Redux в ваших темах и плагинах. Мы опишем, как использовать динамический CSS и вывод шрифтов в Redux. Мы также поговорим о других дополнительных функциях, которые Redux может предложить вам.
Надеюсь и эта статья окажется вам полезной.
На этом буду заканчивать — до скорых встреч!