Добавление произвольных полей с WPS Framework

13.02.2018
Александр Михайленко
6 минут
WordPress, WPS Framework, Разработка,
176

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

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

Задача на сегодня:

  • Добавить поле для загрузки главного изображения работы;
  • Добавить поле для описания работы с редактором кода (TinyMCE);
  • Добавить поле для загрузки изображений в фотогалерею для вывода всех возможных изображений работы;
  • Добавить полей, которые позволяют создать динамический список выполненных работ с возможностью добавлять или удалять новые работы (изюминка в WPS Framework) ;

Прежде, чем начать добавлять поля, мы должны немного объяснить и раскрыть те пункты, которые есть в документации (https://github.com/penguin-007/wps_framework/wiki). Для добавления произвольных полей нам необходим пункт «Builder MetaBox» и пункт «UI Elements».

Элемент MetaBox является оберткой для наших будущих полей. Он позволяет их группировать или же наоборот позволяет создать разные блоки с наборами полей для удобства администратора.

UI Elements – это список всех возможных компонентов (полей), которые вы можете создать у  записи. Полный список полей приведен в документации. А сейчас мы обратим внимание на один компонент под названием UI_Repeater (репитер). Данный блок позволяет создавать внутри себя определенный набор полей и, более того, эти блоки с полями могут дублироваться неограниченное количество раз. Пример внешнего вида данного блока представлен ниже:

внешний вид блока

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

Создание полей для нашего типа записи

Перед тем, как создавать сами поля, нам необходимо будет указать обертку, внутри которой они буду располагаться. Для этого в файл wps_portfolio.php добавим ниже вот такой код (код взят из документации):

Основные настройки данного блока:

  • meta_box_name – заголовок блока с полями;
  • post_types – массив названий типов записей, к которым это поле будет прикреплено;
  • page_templates – массив названий шаблонов страниц, к которым будет прикреплено данное поле;
  • title – название подзаголовка блока, который описывает определенный набор полей.

 

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

заголовок блока

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

 

Добавляем поля

 

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

 

Для этого нам надо будет добавить два компонента:

  • UI_Image – поле для загрузки одного изображения;
  • UI_SimpleGallery – множество полей, для созданий галереи;

 

Написав вот такой код, получим следующий результат:

блоки с изображениями

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

детальное разбиение блоков

Теперь мы получили более детальное разбиение на группы в пределах одной вкладки «Изображения». Далее добавим текстовую информацию для нашей записи.

 

Для блока описания нам нужно будет снова сделать обертку и поместить туда компонент UI_WP_editor, который создает текстовое поле с подключенным внешним редактором TinyMCE. Данный редактор дает широкие возможности для администратора при написании и редактировании контента страницы.

Итак код, который нам необходимо прописать:

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

вывод блока с описанием

И последний блок, который позволит пользователю добавлять произвольное количество описательной информации. Нам потребуется блок с компонентом UI_Repeater, в котором будет указываться «вид работы» и «срок выполнения» данного пункта.

Снова создаем обертку для нашего блока и вписываем туда код нашего поля «Репитер».

Обратите внимание! Содержание блока «repeater» — это по факту те же самые компоненты, которые есть в WPS Framework, но они объединяются в блок, который можно дублировать.

 

Данный код приводит вот к такому результату:

блоки

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

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

Получить 7 писем о том,
как улучшить свой AdWords аккаунт
+ PPC статьи

Имя
e-mail
Улучшить AdWords

Улучшить свой AdWords

Получите 7 писем, о том, как можно улучшить свой аккаунт в AdWords

Подписаться

Наш сайт использует файлы cookie, чтобы улучшить работу и предоставить максимальное удобство пользователям.




В версии 2.1.1

  • Добавлена поддержка "Google Keyword Planner"
  • Используйте "LeftALT + S" для поиска слов
  • "Показать/скрыть" теперь полностью скрывает расширение с экрана

Основные комбинации

  • LeftMouseClick для добавления слова, повторное нажатие - для удаления
  • LeftALT + LeftMouseClick - для сбора фраз
  • LeftALT + S - для поиска слов