Как пользоваться Advanced Custom Fields

Advanced Custom Fields переводится как Продвинутые Кастомные (Произвольные) Поля.

То есть, кроме стандартных полей Заголовок, Редактор, Миниатюра и так далее, в редакторе Постов, Страниц и других типов записей, вы можете добавить свои собственные кастомные поля.

В этой статье вы узнаете, как настроить и как пользоваться плагином ACF.

Содержание:

Стандартные поля редактора WordPress
Что такое кастомные поля. Что с их помощью можно делать.
Когда использовать Кастомные Поля
Встроенные в Вордпресс Произвольные Поля
Плагин Advanced Custom Fields

• Настройка плагина
• Добавьте Группу полей
• Добавьте Кастомные поля
• Настройки Группы полей
• Дублирование Группы полей
• Отображение полей в бэк-энде
• Условная логика

Как выводить поля Advanced Custom Fields

• Как добавить Кастомные поля в файлы темы
• Как вывести Кастомные поля с помощью шорткода
• Как вывести Кастомные поля с помощью Elementor Pro

Сообщество Advanced Custom Fields
ACF Free vs. Pro
Альтернативы Advanced Custom Fields

Заключение

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

Стандартные поля редактора WordPress

Что такое кастомные поля. Что с их помощью можно делать.

Кастомные (Произвольные) поля позволяют добавлять, хранить и выводить дополнительную информацию о вашем контенте.

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

• Цена
• Вес
• Цвет
• Размер

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

• Место события
• Дата / Время начала
• Цена

Для сайта с недвижимостью вы можете выводить поля с типом недвижимости, аренда или продажа, количеством комнат, метраж, и так далее.

Для сайта о фильмах вы можете выводить информацию о режиссёре, студии, продолжительности, жанре фильма, и так далее.

Еще одна область применения плагина Advanced Custom Fields — на сайтах клиентов.

Например, вы сделали сайт, где на главной странице находится слайдер с несколькими строками текста.

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

Добавьте кастомные текстовые поля в админку Главной страницы, а вывод полей — на слайдере. Тогда клиент может изменить текст на слайдере в бэк-энде сайта без использования пейдж-билдера. И нажать на кнопку Обновить.

Или, например, изменить цвет шрифта или фон секции.

В бесплатной версии ACF вы можете использовать такие типы кастомных полей:

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

Если вы хотите опубликовать на сайте, например, какое-то Мероприятие, вы можете это сделать это в виде простого текста в Статье или на Странице.

Можно и так, но лучше использовать кастомные поля по нескольким причинам:

• Вы выносите ключевую информацию в отдельное место
• Вы можете использовать одну и ту же информацию неограниченное количество раз
• Если вы захотите изменить стили вывода информации, вы можете это сделать в одном месте вместо изменений на каждой странице

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

Встроенные Произвольные Поля

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

Перейдите в Инструменты — Настройки — Произвольные поля.

Встроенные произвольные поля предполагают только текст, и их не так просто выводить во фронт-энде. Для вывода полей надо добавить код в шаблоны темы.

Обычно этим функционалом пользуются плагины, например SEO плагины.

Плагин Advanced Custom Fields

С плагином Advanced Custom Fields работать с полями гораздо проще. У плагина более понятный интерфейс с бóльшим числом функций и гораздо более простой процесс вывода полей.

Плагин ACF установлен на более чем 1 млн. сайтов и имеет рейтинг 98% на основе 1.100+ отзывов.

После установки плагин добавляет раздел меню Группы полей (Custom Fields) в админке Вордпресс.

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

Вы можете выводить поля ACF с помощью кода в файлах темы (подробная документация по каждому типу полей и выводу с помощью кода), с помощью шорткодов и Elementor Pro.

Advanced Custom Fields — Настройка плагина

Подробная инструкция по настройке плагина Advanced Custom Fields.

Пример: Допустим, у вас он-лайн школа, и время от времени вы проводите вебинары / курсы на 3 определенные темы.

Вы хотите выводить на Главной странице информацию об этих вебинарах. В этом примере вы добавите кастомные поля для вывода такой информации:

• Название вебинара
• Картинка вебинара
• Описание вебинара
• Дата начала вебинара
• Кнопка со ссылкой на страницу вебинара

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

ACF — Добавьте Группу полей

В админке Вордпресс перейдите в Группы полей — Добавить, чтобы создать новую группу полей.

Группа полей — это одно или несколько полей, которые относятся к одной по смыслу информации.

Например: Я хочу добавить Группы полей для 3 вебинаров. Для каждого вебинара нужно создать свою группу полей, которая будет состоять из 5 полей: Название, Изображение, Описание, Дата начала и Кнопка со ссылкой.

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

В эту группу полей будут входить 5 полей. Группа будет отображаться на Странице Advanced Custom Fields.

ACF — Добавьте Кастомные поля

Чтобы добавить первое поле — в этом примере Название вебинара или курса, — нажмите на кнопку Добавить поле:

Заполните поля:

Все настройки понятны из описания, кроме Атрибуты, — это ширина поля в бэк-энде.

Если вы хотите поместить несколько полей в один ряд — используйте эту настройку. В этом примере я задал ширину первого поля 65%.

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

Атрибуты ширины этим четырем полям я дам 50%. Подробнее далее.

В итоге должно получиться так:

ACF — Настройки Группы полей

Группа полей создана, сделайте настройки отображения полей на выбранных страницах, в этом примере — на странице Advanced Custom Fields:

У всех настроек понятные описания, если не уверены — оставьте настройки по умолчанию.

Нажмите Опубликовать.

ACF — Дублирование Группы полей

В нашем примеры нужны 3 одинаковые группы, которые отличаются только индексом имен полей, то есть:

• Группы полей называются Курс 1, Курс 2, Курс 3
• Имена полей Название Курса называются course-title-1, course-title-2, course-title-3
• Имена полей Картинка Курса называются course-image-1, course-image-2, course-image-3
• И так далее…

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

Перейдите в Группы полей — Группы полей и продублируйте готовую группу:

Переименуйте группу в Курс 2 и замените «1» в именах полей на «2», чтобы получилось так:

Таким же образом создайте третью Группу полей. Не забудьте добавить «3» к каждому имени поля. В итоге должно получиться так:

Перейдите на страницу Advanced Custom Fields, посмотрите что получилось:

ACF — Отображение полей в бэк-энде

В этом примере я дал полям Картинка Курса, Краткое описание Курса, Дата начала и Кнопка 50% ширины в Атрибутах поля.

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

Например, вы можете настроить отображение всех трех полей Название Курса в одной строке, если в Группе полей вы расположите все 3 поля Название Курса друг за другом и дадите каждому полю 33% ширины.

Картинки Курса будут во второй строке, каждое поле займет 33% ширины, и так далее.

Расположите в Группе полей каждое поле всех трёх Курсов друг за другом и дайте каждому полю 33% ширины.

В Настройках — Расположение меток выберите Вверху:

Так у вас получится 1 аккордеон со всеми тремя Курсами вместо трёх аккордеонов с 1 Курсом в каждом.

Еще один вариант расположения — с помощью Типов полей — Вкладка и Группа:

Чтобы сгруппировать Курсы по вкладкам, создайте Группу полей с типом Вкладка.

После этого добавьте поле с типом Группа. Внутри настроек поля Группа в разделе Вложенные поля добавьте нужные поля, в этом примере:

• Название Курса
• Картинка Курса
• Краткое описание Курса
• Дата начала
• Кнопка

Если вы будете использовать такую группировку (Родительское поле — Дочерние поля), то вывод полей во фронт-энде будет немного другим.

ACF — Условная логика

Еще одна крутая функция ACF — Условная логика, которая позволяет показывать или скрывать поля в зависимости от условий, которые выполняются или не выполняются в других полях.

Например, вы можете отключить показ полей, если решите не проводить Курс и снимите галочку:

Добавьте поле Будет Курс? с Типом поля Да / Нет. Включите условную логику на всех полях каждого Курса. Настройте логику Показывать поле, если поставлена галочка в поле Будет Курс?

Как вывести поля Advanced Custom Fields

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

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

Существует 3 способа вывести поля в ACF:

1. Добавить код в файлы темы. Этот способ требует технических знаний, но считается лучшим.
2. С помощью шорткодов. Очень простой способ и используется, когда вы хотите поместить кастомные поля только в нескольких местах.
3. С помощью Elementor Pro. Аналог первого способа, но без необходимости работать с PHP.

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

Первый способ выводить поля ACF — добавить PHP функции Advanced Custom Fields в файлы шаблонов дочерней темы.

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

Например, если вы хотите добавить вывод полей ACF на всех страницах блога, вам нужно редактировать файл single.php.

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

После того, как вы нашли файл шаблона страницы, добавьте в нужное место файла функцию ACF the_field() для вывода нужного поля. Подробнее о функции the_field().

В общем виде функция выглядит так:

Имена полей можно посмотреть здесь:

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

Как выводить Кастомные поля с помощью шорткода

Выводить поля ACF с помощью шорткода проще. Если у вас всего несколько мест / страниц, где вы хотите выводить кастомные поля, это простой и удобный способ.

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

Шорткод для вывода полей ACF:

Например, такой шорткод выводит поле Название Курса:

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

То есть, если вы использовали поле Вкладка, а в нем дочернее поле Название Курса, то шорткод должен быть такой:

Как выводить Кастомные поля с помощью Elementor Pro

Elementor — один из самых популярных конструкторов страниц. Он позволяет создавать страницы просто перетаскивая виджеты.

С помощью Elementor Pro вы можете создавать шаблоны страниц, включая добавление в них кастомных полей Advanced Custom Fields.

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

В этом примере вы добавляете поля на странице Advanced Custom Fields. Откройте страницу в Элементоре и добавьте виджеты для вывода кастомных полей.

Чтобы выводить Изображение, сделайте так:

Остальные поля выводятся аналогично.

Если вы хотите выводить поля, например, на всех страницах Блога, вам нужно редактировать шаблон страницы.

Создайте или загрузите нужный шаблон страницы и добавьте в него вывод ACF полей в нужном месте.

Сообщество Advanced Custom Fields

У ACF есть большое сообщество, которое занимается разработкой дополнений для плагина:

• AwesomeACF.com
• Advanced Custom Fields for WooCommerce

ACF Free vs. Pro

У плагина ACF есть версия Pro, в которой есть:

• Повторяющиеся поля — Вы можете повторять нужные поля на нужных страницах. Например, вы пишите о каком-то мероприятии, на котором будет несколько выступающих. В этом случае вам не нужно подбирать количество полей для каждого мероприятия вручную. Вы можете нажать +Добавить поле в админке каждой страницы, чтобы добавить столько полей, сколько нужно.
• Блоки ACF — Вы можете создавать свои собственные блоки для редактора Гутенберг.
• Гибкие поля — Еще больше возможностей для организации полей в группы.
• Страницы с настройками — Создавайте страницы в админке WP с кастомными полями.
• Галерея — Поле с несколькими картинками.
• Клонирование полей — Позволяет использовать существующие поля или группы полей по запросу.

Альтернативы Advanced Custom Fields

• Custom Field Suite — бесплатный, простой и легкий плагин, в котором «нечему ломаться». Поля выводятся с помощью PHP.
• CMB2 — бесплатный плагин. Метабоксы, кастомные поля и формы.
• Meta Box — бесплатный плагин, аналог ACF с 40 типами кастомных полей. Для работы требуется генерировать код в он-лайн генераторе. Инструкция.
• PODS — бесплатный плагин, который кроме кастомных полей создает кастомные типы страниц и таксономии. Создает страницы в админке WP для вывода настроек. Лучший бесплатный плагин для кастомных полей, страниц, таксономий и остального.
• Toolset — Платный и дорогой плагин. Кастомные поля, страницы и таксономии. Шаблоны, архивы, листинги, контроль доступа / мембершип, формы и карты.
• JetEngine — платный, но недорогой плагин. Делает все то же самое, что предыдущий плагин, кроме мембершипа. Возможно, разработчики добавят эту функцию в будущих версиях. Один из флагманов CrocoBlock, постоянно развивается. Однозначно стоит своих денег.

Скорее всего, вы хотите не только добавить кастомные поля, но и реализовать какой-то функционал, например, выбор автомобиля по параметрам и его аренда. Я рекомендую плагин JetEngine, он предлагает готовые динамические шаблоны и другой готовый софт для реализации ваших идей.

Заключение

Как видите, даже бесплатная версия ACF предлагает большой функционал.

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

Если вы хотите выводить кастомные поля на многих страницах, например, на всех страницах Блога, используйте PHP или редактируйте шаблон страницы в Элементоре.

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

Надеюсь, статья была полезна. Оставляйте комментарии.