X-INSIDE.ru X-INSIDE.ru — блог о том, как создать и раскрутить свой сайт, как заработать в интернете. Все об интернет заработке, онлайн инвестициях, криптовалюте, майнинге, инфобизнесе. 
Произвольные поля в WordPress (Custom Fields) или как их еще называют пользовательские поля — очень полезная фишка. С их помощью вы сможете добавить на страницу/пост сайта любой контент, который будет выводится в определенном месте шаблона.
По умолчанию в системе пользователю доступно задание лишь нескольких базовых форматов данных для записи: заголовок, текст, МЕТА (если установлены плагины) и т.п. Используя функцию произвольный полей, получится внедрить дополнительные нужные вам информационные блоки.
Например: иконку для страницы, оригинально оформленные контакты в одноименном разделе, блок категорий товаров, карту Google Maps + слайдер картинок.
Сегодня рассмотрим два полезных плагина по теме — это Custom Field Suite и Advanced Custom Fields.
Можно, конечно, работать с произвольными WordPress полями вручную, о чем я когда-то рассказывал в другом блоге. Однако, во-первых, информация там слегка устарела, а во-вторых, модули значительно упрощают задачу и ускоряют процесс разработки. Грех ими не воспользоваться. Более детально познакомимся с Custom Field Suite, с которым работал уже несколько раз, а также обратим внимание на популярный и продвинутый плагин Advanced Custom Fields.
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 с помощью соответствующей кнопки.
Для полей требуется определить некоторые настройки, например:
- тип;
- название (отображается в админке);
- имя (используется в коде шаблона, поэтому должно быть на английском);
- значение по умолчанию;
- обязательное поле или нет;
- примечание для редактора.
Большую часть этих характеристик вы встретите и в других типах произвольных полей, однако в каждом из них есть и свои особенности. На картинке выше можете видеть 6 элементов, 3 из которых являются табами (tabs), а 3 текстовой областью. В результате в админке пользователь увидит следующую картинку:
Вместо одиночной строки использовались текстовые области дабы пользовать мог вводить не один телефон или email, плюс для адреса нужно несколько строк.
3. Как я говорил выше, на этой же странице есть блоки настроек Placement Rules и Extras. Полезнее всего первый, т.к. там создаются условия для вывода произвольных полей в 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
По 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 даже для начинающего разработчика не будет проблемой. Кроме того, в самой админке плагин имеет весьма приятный интерфейс. В разделе 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. Выбирайте тот, что больше нравится. Если же требуются повторяющиеся поля (цикл), то бесплатно эта функция есть только в первом модуле.
