Как настроить custom field

Полное руководство по плагину Advanced Custom Fields

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

Что такое произвольные поля в WordPress?

Произвольные поля WordPress позволяют добавлять и отображать дополнительную информацию. Например, хранить метаданные.

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

А плагин календаря событий будет использовать их для хранения дополнительной информации о мероприятиях:

• Место проведения.
• Время начала и окончания.
• Стоимость билета.

Когда использовать произвольные поля?

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

• Более простой ввод — продуманная группа произвольных полей значительно облегчит ввод данных. Например, можно выбрать необходимую дату в календаре.
• Согласованность — информация, которую вы вводите в произвольные поля, всегда будет отображаться в заданном формате.
• Простое обновление – благодаря произвольным полям можно внести изменения в одном месте, а не редактировать каждый пост по отдельности.

WordPress предоставляет встроенный функционал произвольных полей

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

Как получить доступ к произвольным полям в редакторе WordPress.

Затем можно ввести значение и идентификатор произвольного поля.

Встроенная функциональность произвольных полей в WordPress

Но это не самый удобный способ работы с произвольными полями. Поэтому многие используют плагин Advanced Custom Fields.

Advanced Custom Fields упрощает дело

Плагин Advanced Custom Fields упрощает интерфейс добавления и управления произвольными полями в административной панели и процесс их отображения на страницах сайта.

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

Advanced Custom Fields в блочном редакторе.

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

Бесплатная или платная версия плагина Advanced Custom Fields?

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

• Repeater fields — позволяют повторять определенные поля и группы полей в различных постах. Например, если вы добавляете информацию об участниках конференции, данный тип произвольного поля позволяет быстро добавить данные о каждом спикере.
• Блоки ACF — отображают произвольные поля как блоки редактора Gutenberg, а не как мета-блоки. Это позволяет реализовать более простой способ ввода и визуализации данных.
• Flexible content field – позволяет создавать макеты из других полей. Фактически это конструктор страниц, основанный на данных из произвольных полей.
• Gallery field – позволяет загружать нескольких изображений в одно поле.

Более подробно возможности Advanced Custom Fields PRO описаны здесь .

Как добавлять произвольные поля с помощью Advanced Custom Fields

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

• Цель – он практикует два разных типа бега: скоростной и тренировочный.
• Расстояние – сколько пробежал.
• Время начала — когда начал бег.
• Время окончания — когда закончил бег.
• Место — где проходила тренировка.

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

1. Как добавлять произвольные поля и управлять ими.
2. Как отобразить информацию из произвольных полей на страницах сайта.

1. Создание новой группы произвольных полей

После установки и активации бесплатной версии плагина Advanced Custom Fields в левой боковой панели перейдите в раздел Произвольные поля > Добавить.

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

Дайте создаваемой группе полей имя, а затем выберите область ее отображения. В этом примере мы хотим вывести произвольные поля для обычных постов в блоге. Поэтому используем значение по умолчанию ( Post ).

Вы также можете настроить несколько правил для отображения создаваемых произвольных полей сразу в нескольких местах.

Создание новой группы полей ACF

2. Добавьте произвольные поля

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

Добавление нового произвольного поля

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

• Ярлык поля – это то, что отобразится в редакторе. Ярлык также будет использоваться для генерации имени поля, которое будет отображаться в коде.
• Тип поля – формат информации, которую будет содержать поле. Например, поле Число собирает числовую информацию, а поле Email – адреса электронной почты.

Для первого поля установим тип переключатель ( Radio) .

Настройка произвольного поля

Далее введите варианты состояния переключателя

Ввод вариантов состояния переключателя

Рассмотрим другой пример: произвольное поле для отображения расстояния пробега. На этот раз используем тип данных «Число»:

Создание числового поля

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

Больше настроек произвольных полей

Повторите этот процесс для всех других полей, которые вы хотите создать.

5 различных полей ACF

3. Настройте параметры и опубликуйте

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

В большинстве случаев подойдут значения по умолчанию. Но можно и поэкспериментировать с ними.

Настройка параметров группы полей ACF

После этого опубликуйте свою группу произвольных полей, чтобы она отобразилась на сайте.

4. Добавьте дополнительную информацию в редакторе WordPress

После публикации группа произвольных полей появится при создании нового поста.

Advanced Custom Fields в редакторе WordPress.

Информация, вводимая в них, будет храниться в базе данных WordPress.

Обзор условной логики

Плагин Advanced Custom Fields поддерживает условную логику, которая позволяет отображать/скрывать произвольные поля в зависимости от информации, введенной пользователем в предыдущем поле.

Допустим, автор блога захотел рассказать о своих путешествиях. Поэтому нет смысла отображать поля с информацией о беге.

Пример условной логики

Если установите флажок, появятся произвольные поля с информацией о беге. Если вы не установите его, они останутся скрытыми.

Остальные произвольные поля отображаются при установке флажка

Чтобы настроить условную логику, необходимо отредактировать ранее созданную группу полей и добавить новое поле « Да/Нет» для условия «Этот пост о беге?»:

Добавление поля «Да/Нет»

Затем нужно отредактировать существующие произвольные поля и включить условную логику , чтобы каждое произвольное поле отображалось только при установленном флажке «Этот пост о беге?».

Добавление уловной логики к другим полям

Как отображать условные поля на сайте

Созданные произвольные поля пока не появляется на сайте.

Произвольные поля не отображаются на сайте

Давайте исправим это. Существует несколько способов произвольных полей на страницах сайта:

1. Файлы шаблонов используемой темы оформления – это решение требует технических знаний.
2. С помощью шорткодов – это простой вариант, если нужно вставить данные из поля на отдельных страницах сайта. Но вам придется добавлять шорткоды в каждый пост.
3. С помощью Elementor Pro – это самый простой способ, потому что он полностью избавляет от необходимости работать с PHP. Но это платный инструмент.

Как добавить произвольные поля в файлы шаблона темы оформления

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

Первоначально нужно отредактировать шаблон выбранного типа записи. Шаблон обычного поста располагается в файле single.php . Некоторые темы оформления разбивают этот шаблон на части. Например, в теме TwentyNineteen нужно будет отредактировать часть шаблона в файле content-single.php .

После этого нужно использовать функцию Advanced Custom Fields the_field() для отображения информации из произвольного поля. Например:

Больше информации об этой функции доступно здесь .

Например, чтобы отобразить произвольное поле «Цель», используйте приведенный ниже код:

Источник

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

Найдете модуль в официальном репозитории на этой странице. Текущая версия на момент написания статьи (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’ );

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

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

echo CFS()->get( ‘first_name’, 71 );

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

$loop = CFS()->get( ‘gallery’ ); foreach ( $loop as $row )

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

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

Здесь, во-первых, используется условный оператор «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. Выбирайте тот, что больше нравится. Если же требуются повторяющиеся поля (цикл), то бесплатно эта функция есть только в первом модуле.

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

Источник