Сен
4
18

Плагины произвольных полей — 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 напишите о них в комментариях.

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

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

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

  • Кирилл   28.09.2016

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

  • Евгений   02.03.2017

    Большое спасибо автор!
    Задача стояла реализовать вывод похожих публикаций после статьи. Готовые плагины не подходили, поскольку ни в одном нельзя вместо стандартного заголовка вывести в виде ссылки произвольное название (в моем случае самый частотный ключ).
    Благодаря этой статье узнал про Custom Field Suite. Все вроде как хорошо, но ваш вариант результирующего кода вывода не смог под себя переделать и начал курить мануалы. Соорудил свою конструкцию, но она с косяком получилась (пустой src выводился если не заполнено было поле с миниатюрой, а валидатор ругался на это). Несколько бессонных ночей провел пытаясь до ума довести.
    В итоге плюнул, купил готовый плагин (нашелся таки один)… но он у меня начал конфликтовать на одном из сайтов с другим плагином)))
    В конечном итоге все эти мучения были не напрасны — вернулся сюда и смог заточить ваш вариант под себя)))

  • Tod   02.03.2017

    Евгений, непростой вы путь проделали к финальному решению)) Иногда веб-разработка напрягает из-за подобных «косяков», которые по закону подлости время от времени появляются. Но главное, что в итоге все получилось! Во втором модуле, кстати, есть PRO версия, которая в разы увеличивает его возможности.

  • Тимур   15.09.2017

    Хорошо. А как вывести группу полей?
    Очевидно что «группа», это тип записи, а создаваемая группа полей — сама запись.
    Получается надо получить данные по типу «группа» и выводить поля только из одной группы.
    Вопрос — как? эти данные НЕ так просто получить, как кажется. Или может есть функция, выводящая указанную группу?.
    Вот ситуация; есть сайт, должны быть две РАЗНЫХ группы характеристик у одной записи НО, меньшая выводится исключительно для анонса товара, то есть в списке, а бОльшая (то есть та в которой больше полей) — уже для одиночной записи, описание о товаре и его полные характеристики.
    Да, можно было бы сделать просто вывод по полям. Проблема только в том что не зря это Пользовательские поля, то есть если далёкий от кода человек попробует добавить новую группу, он её никогда не увидит. Вариант один — выводить все поля. Но мне не надо все выводить. Есть чёткое разграничение, урезанное количество полей для Анонса, полный набор — для полной записи, всё, иного не дано.
    Так как же вывести нужную группу? и если админ захочет добавить ещё одну группу…. Ситуация такая что это реальные условия, которые мне необходимо выполнить.
    То есть:
    Человек должен иметь возможность создать собственную группу полей — РАЗ.
    Человек может менять названия полей так как того требует КАТЕГОРИЯ товара (ибо не может компьютер иметь характеристики телевизора или стиральной машины) — ДВАЗ
    Человек может изменять количество полей как ему надо, ставить дополнительные поля в анонсе или на оборот убирать лишние (собственно как и в одиночной) — ТРИЗ.
    Уважаемый автор, подскажи, пожалуйста, среднее решение для моей задачи. Мне кажется даже такой плагин не справится с тем что мне нужно.

  • Tod   15.09.2017

    Тимур, если честно, сложно было понять всю суть задания. Могу лишь дать пару советов как бы я решал задачу. Во-первых, если у вас там что-то вроде каталога товаров, то совету погуглить соответствующие плагины, например, для магазина Woocommerce есть, но там можно сделать без продаж просто товары + должны быть другие Вордпресс модули с каталогами с соответствующим функционалом.
    Во-вторых, если хотите реализовать характеристики, то не совсем понятно зачем вам какие-то «зависимости» от категорий или выбор конкретного числа полей. Через плагины произвольных полей добавляете 1 блок (контейнер Loop) из двух объектов: «название характеристики» + «значение», и тогда для каждой записи создаете сколько нужно повторяющихся записей «характеристика + значение».
    Если магазин/каталог большой и нужны какие-то фишки по характеристикам — отображение списка, фильтр и т.п., то я бы брал Woocommerce и похожие плагины и допиливал. Если по товарам будет по 3-5разных постых описаний и каталог не сложный, то используйте второй вариант.

  • Тимур   16.09.2017

    Tod, добрый вечер.
    Благодарю за ответ.
    Логически, задача проста. Зависимости может не быть, этого не надо. Просто есть категории:
    Компьютеры (мини ПК) на базе ODROID;
    Антенны;
    Роутеры несколько операторов;
    Комплектующие.
    У каждой категории список товаров и для каждого характеристики и заголовки характеристик разные, как и количество.
    Проблема в том что поля эти задаются всем типам записи без исключения и без разграничения по определённым категориям.
    К примеру для мини ПК нужны версия, вес платы, серия, производитель, артикул.
    А для Антенн совсем другие поля. Если сделать несколько групп, администратор просто запутается среди большого количества блоков с разными полями, потому что их может быть и 5 и 25. Соответственно 25 групп полей будет создано.
    Я говорю о том что если бы было назначение группы для какой категории отображать её, было бы всё намного проще. Можно ли так сделать, точнее нет, это сделать можно через хуки, вопрос — как сделать, если это не шибко тяжело.
    Ещё раз благодарю за ответы )

  • Тимур   16.09.2017

    Прошу простить за невнимательность, только сейчас стал разбирать поля отображения, оказывается в «записи» можно настроить всё-таки область отображения по категориям )))

  • Тимур   17.09.2017

    Доброй ночи, Tod.
    Извини за назойливость, но теперь мне нужно вывести заголовок этого поля…как это сделать? )) не значение, а название: «Производитель», «модель», «процессор».
    Возможно ли вообще? эта информация тоже меняется, поэтому статичная информация в файле php исключается.
    Я понял что нужно из бд вытягивать, но только теоретически понятно как это сделать. На практике такого не было (было очень давно).

  • Спартак   27.01.2018

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

  • Tod   27.01.2018

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

  • Спартак   27.01.2018

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

  • Игорь   29.01.2018

    Хорошая статья. Про Custom Field Suite не слышал. Надо попробовать

  • Марина   16.03.2018

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

  • Tod   17.03.2018

    Марина, если честно не совсем понимаю при чем тут произвольные поля, можно просто создать отдельный шаблон страниц без футера и хедера и выбирать их для нужных записей. Скоро здесь будет статья по теме как это сделать (пока что ссылка ну другой блог). Второй вариант — поискать шаблоны лендингов, думаю, есть полно тем, которые изначально под это заточены. Сегодня опубликую заметку с простыми темами — возможно там что-то сможете подобрать.

  • Марина   17.03.2018

    Спасибо за ответ.
    Ну в общем, я пошла, судя по всему, правильным путем.
    Создала даже не один, а несколько шаблонов с разными кодами из разных сайтов..
    Но только один из них реагирует на плагины.
    На самом деле создать чистый шаблон очень легко, как 2 пальца об асфальт, достаточно написать код РНР на странице и вставить ее в папку темы.
    Проблема в другом — как ее заполнить, чтоб ничего не поползло и не перегрузило хостинг?
    Может просто в HTML написать в виде таблицы?
    Можно с помощью блоков, но тут надо элементарные стили использовать.
    А visual composer сильно грузит сервер?
    Он конечно, платный, но говорят, что самый лучший?

  • Tod   18.03.2018

    Марина, есть шаблон страницы page.php или похожий на него — он копируется, а потом модифицируется по свои нужды. То есть не надо создавать файл с нуля, особенно если вы не сильно ориентируетесь в функциях. В статье про создание разных шаблонов для постов показано как с помощью функцию include можно подключать другие файлы темы.
    Таким образом: 1) делаете новый шаблон из сущесвующего page.php; 2) точно также копируете файлы футера и хедера дабы модифицировать их под себя, называете что-то типа new-header.php. 3) с помощью include подключаете их вместо стандартных вызовов футера/хедера и получаете новый вид шаблона.
    Если вы хотите вставлять код через HTML, то вообще не совсем понятно зачем вордпресс — создайте нужную вам страницу-лендинг на обычном HTML. С visual composer не работал.

  • Сергей   14.01.2019

    В админке появилось. На страницах блога не отображается.

  • Tod   14.01.2019

    Сергей, для первого модуля (Custom Field Suite) смотрите 4тый шаг, где я показал как нужно интегрировать данные плагина в шаблон сайта для их отображения. Статью писал 2-3года назад, но ничего концептуально поменяться не должно было. Насколько я помню, в описании модуля есть информация как его внедяить на сайт (там тоже можно подсмотреть функции/методы, используемые в работе).

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

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

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

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

Поиск:
Последние посты
Лучшее в категории

Облако тегов
Скажи свое мнение!

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

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

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