Сен
4
1

Плагины произвольных полей — Custom Field Suite и Advanced Custom Fields

Плагины произвольных полейПроизвольные поля в WordPress (Custom Fields) или как их еще называют пользовательские поля — очень полезная фишка. С их помощью вы сможете добавить на страницу/пост сайта любой контент, который будет выводится в определенном месте шаблона. По умолчанию в системе пользователю доступно задание лишь нескольких базовых форматов данных для записи: заголовок, текст, МЕТА (если установлены плагины) и т.п. Используя функцию произвольный полей, получится внедрить дополнительные нужные вам информационные блоки. Например, недавно на одном проекте я реализовал несколько объектов: иконку для страницы, оригинально оформленные контакты в одноименном разделе, блок категорий товаров, карту Google Maps + слайдер картинок. Сегодня рассмотрим два полезных плагина по теме — это Custom Field Suite и Advanced Custom Fields.

Можно, конечно, работать с произвольными WordPress полями вручную, о чем я когда-то рассказывал в другом блоге. Однако, во-первых, информация там слегка устарела, а во-вторых, модули значительно упрощают задачу и ускоряют процесс разработки. Грех ими не воспользоваться. Более детально познакомимся с Custom Field Suite, с которым работал уже несколько раз, а также обратим внимание на популярный и продвинутый плагин Advanced Custom Fields.

Custom Field Suite

Плагин Custom Field Suite

Найдете модуль в официальном репозитории на этой странице. Текущая версия на момент написания статьи (2.5.6.1) требует вордпресс от 4.0, имеет более 30 тысяч установок и оценивается в 4.9 баллов из 5-ти возможных. Основная функция — внедрение удобного интерфейса для работы с произвольными полями WordPress, который бы позволял их легко создавать и управлять ими. Плагин Custom Field Suite (CFS) поддерживает 12 типов элементов:

  • Text — текстовая строка;
  • Textarea — поле для текста из нескольких строк;
  • WYSIWYG — графический редактор;
  • True / False — чекбокс (блок с галочкой);
  • Color — выбор цвета;
  • Date — выбор даты;
  • Select — несколько чекбоксов или выпадающий список;
  • File Upload — загрузка файла;
  • User — выбор пользователя;
  • Relationship — виджет для похожих постов;
  • Loop — контейнер повторяющихся полей;
  • Hyperlink — URL ссылки;
  • Tab — объединение группы полей в табы.

Плюс модуля Custom Field Suite в том, что кроме ввода определенных данных (текстов, дат, цветов) здесь есть элементы организации полей: табы и контейнеры. Последний, например, позволяет реализовать галерею на слайдере Owl Carousel 2 за счет создания нескольких повторяющихся объектов «текст + картинка». Табы мне также пригодились в работе. Решение абсолютно бесплатное, функциональное и очень простое.

Вывод произвольных полей в WordPress с помощью CFS

Давайте разберем на реальном примере как вывести произвольные WordPress поля с помощью модуля Custom Field Suite. Алгоритм приблизительно следующий:

1. В самом начале, разумеется, устанавливаем и активируем Custom Field Suite.

2. Далее заходим в админку вордпресс в раздел «Field Groups» (Группа полей). Там содержится список всех созданных вами элементов и кнопка «Add New» (Добавить новую) . С ее помощью можно создать новый набор нужных элементов. Кликаем и видим на открывшейся странице 3 блока для ввода информации:

  • Fields — список всех элементов/полей;
  • Placement Rules — правила размещения;
  • Extras — дополнительные настройки.

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

Добавляем произвольные поля в WordPress

Для полей требуется определить некоторые настройки, например:

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

Большую часть этих характеристик вы встретите и в других типах произвольных полей, однако в каждом из них есть и свои особенности. На картинке выше можете видеть 6 элементов, 3 из которых являются табами (tabs), а 3 текстовой областью. В результате в админке пользователь увидит следующую картинку:

Произвольные поля в WordPress

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

3. Как я говорил выше, на этой же странице есть блоки настроек Placement Rules и Extras. Полезнее всего первый, т.к. там создаются условия для вывода произвольных полей в WordPress админке.

Вывод произвольных полей в WordPress

Ограничения показа могут касаться:

  • Post Types — типов записей (посты, страницы, товары);
  • Post Formats — форматов постов (обычный, видео, цитата, ссылка);
  • User Roles — пользовательских ролей (админ, автор, редактор);
  • Posts — конкретных записей;
  • Taxonomy Terms — терминов таксономии;
  • Page Templates — шаблонов страниц.

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

4. Финальная и самая основная стадия интеграции Custom Fields — вывод значений произвольных полей в WordPress файле шаблона. Для этого используется специальная функция get. Например:

Отображение значения поля contacts_email

echo CFS()->get( 'contacts_email' );

Считывание всех значений для текущей записи

$fields = CFS()->get();

Вывод произвольного поля contacts_email для поста с ID=71

echo CFS()->get( 'first_name', 71 );

Вариант с циклом для галереи:

$loop = CFS()->get( 'gallery' );
foreach ( $loop as $row ) {
    echo $row['gallery_title'];
    echo $row['gallery_image'];
}

Детальное ее рассмотрение и примеры найдете на странице описания API плагина Custom Field Suite. Кроме нее есть еще функции поиска полей, отображения их свойств, создание форм и т.п.

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

<div class="contacts">
	<?php 
	$contacts_item1 = CFS()->get( 'contacts_email' );
	if( ! empty($contacts_item1) ):
	?>
	<div class="contacts-item  contacts__email">			
		<?php echo __( $contacts_item1 ,'newsite'); ?>
	</div><!-- .contacts-item -->
	<?php endif; ?> 		
 
	<?php 
	$contacts_item3 = CFS()->get( 'contacts_phone' );  
	if( ! empty($contacts_item3) ):
	?>
	<div class="contacts-item  contacts__phone">
		<?php echo __( $contacts_item3 , 'newsite'); ?>
	</div><!-- .contacts-item -->
	<?php endif; ?> 
</div>

Здесь, во-первых, используется условный оператор «IF !empty» для проверки не пустое ли у нас поле, во-вторых,  с помощью __() я вывожу значение произвольного поля с учетом выбранного языка сайта.  Для локализации используется плагин qTranslate-X.

5. После завершения манипуляций по добавлению и выводу произвольных полей в WordPress вам нужно лишь зайти в админку на нужную страницу и заполнить соответствующие тексты/данные. После этого перейдите на сам сайт и проверьте все ли корректно отображается. Если нет, весь алгоритм по работе с плагином Custom Field Suite нужно будет тщательно проверить и повторить.

Advanced Custom Fields

Плагин Advanced Custom Fields

По WordPress плагину произвольных полей Advanced Custom Fields вообще создан отдельный сайт с описанием, документацией и подсказками. Сразу замечу, что в нем есть 2 версии — обычная бесплатная и PRO. Первую совершенно спокойно можно скачать отсюда с официального репозитория вордпресс. Оценка 4.9, минимальная версия WP — 3.5 и более миллиона загрузок!

Основная функция модуля, как и в предыдущем варианте — это упрощение работы с пользовательскими полями WordPress с помощью специальных интуитивно понятных инструментов интерфейса. Данное решение позволит легко создавать и редактировать поля, а также определять для них правила отображения. За счет использования базовых механизмов Custom Fields системы WordPress работа плагина достаточно быстрая. Для веб-разработчиков определены соответствующие хуки, фильтры и функции интеграции с шаблоном.

Advanced Custom Fields имеет чуть больше типов пользовательских полей, которые разделены на 6 групп:

  • Базовые: текстовая строка и область.
  • Выборка: чекбоксы, True / False, выпадающий список, Radio Button.
  • Контент: файлы, галерея, картинка, текстовый редактор, встраиваемый объект oEmbed.
  • Элементы jQuery: цветовая палитра, выбор даты/времени, Google карта.
  • Для разметки: отображение (клонирование) определенных полей, гибкий элемент контента (Flexible Content), табы, повторяющиеся элементы.
  • Связи: URL линк, таксономия, объект поста, ссылка на объект.

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

Документация по плагину Advanced Custom Fields

Разобраться с интеграцией Advanced Custom Fields даже для начинающего разработчика не будет проблемой. Кроме того, в самой админке плагин имеет весьма приятный интерфейс. В разделе Add-ons на официальном сайте найдете несколько модулей для расширения функциональности — поддержка Font Awesome, дополнительные поля для таблиц и аккордеона, переводы через qTranslate.

В принципе, можно было сказать, что плагин является идеальным, если бы не одно «но». Дело в том, что добавить произвольные поля типа галереи, гибкого контента и повторяющегося элемента можно только в PRO версии. Поэтому мне пришлось создавать слайдер картинок через связку Custom Field Suite + Owl Carousel 2. С другой стороны, стоимость PRO для одного сайта ($25) может быть включена в общую смету сайта, а если вы часто разрабатываете проекты, то пожизненная лицензия ($100) окупится достаточно быстро. Там же есть Add-on для создания страницы настроек Options Page в WP через произвольные поля, что также может пригодиться (как альтернатива соответствуюших фреймворков).

Итого. Если вам нужно добавить произвольное поле в WordPress простого типа (текст, картинка, ссылка), то тут подойдет любой плагин — Custom Field Suite или Advanced Custom Fields. Выбирайте тот, что больше нравится. Если же требуются повторяющиеся поля (цикл), то бесплатно эта функция есть только в первом модуле.

Кстати, если знаете еще какие-то плагины произвольных полей для WordPress напишите о них в комментариях.

рейтинг Оцените статью:
Ужасная статьяНичего интересногоТак себеНормальноХорошоКлассный постВ закладки!
(голосов - 1, средний балл: 7,00 из 7)
Загрузка...

категория Категории: Возможности; Плагины;
теги Теги: , , , , .

1 комментарий к статье “Плагины произвольных полей — Custom Field Suite и Advanced Custom Fields”

  • Кирилл   28.09.2016

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

Оставить комментарий

(следующая статья)

Блог Wordpress Inside поможет вам научиться работать в вордпресс, закрепить и расширить имеющиеся знания. Плагины и шаблоны, разные хаки и функции wp, оптимизация и безопасность системы – все это и намного больше вы сможете найти на страницах нашего проекта!

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

Последние посты
Полезные заметки
Лучшее в категории
Облако тегов
Скажи свое мнение!

В чем основные плюсы Wordpress?

Посмотреть результаты

Загрузка ... Загрузка ...
Друзья проекта
Последние новости