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

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

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

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

Содержание:

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

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

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

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

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

Заключение

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

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

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

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

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

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

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

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

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

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

Сайт аренды автомобилей выводит данные о типе кузова, объеме двигателя, типе трансмиссии и так далее.

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

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

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

Добавьте кастомные поля в админке той страницы, на которой находится слайдер или на странице Options, а вывод полей — на слайдере.

Тогда клиент может изменить текст на слайдере в бэк-энде сайта без необходимости редактирования страницы.

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

Еще одна идея — вынести всю кастомную информацию на отдельную страницу в админке, например, текст в слайдере, вопросы и ответ FAQ / ЧаВо, контактную информацию, и так далее.

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

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

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

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

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

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

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

Количество ванных комнат, спален и гаражей — кастомные поля, локация — кастомное поле.

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

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

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

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

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

Плагин Advanced Custom Fields

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

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

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

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

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

Бесплатная версия плагина блоков GenerateBlocks работает с Advanced Custom Fields.

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

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

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

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

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

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

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

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

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

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

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

В эту группу полей будут входить 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. Конструктор страниц / Блоки Гутенберг. Аналог первого способа, но без необходимости работать с PHP. Обычно находится в платных версиях плагинов.

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

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

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

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

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

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

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

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

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

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

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

[acf field="имя_поля"]

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

[acf field="course-title-1"]

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

[acf field="родительский-шорткод_дочерний-шорткод"]

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

[acf field="course-1_course-title-1"]

Как выводить Кастомные поля с помощью 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 с кастомными полями.
• Галерея — Поле с несколькими картинками.
• Клонирование полей — Позволяет использовать существующие поля или группы полей по запросу.

Страница Options

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

Чтобы вывести кастомные поля со страницы Options, используйте такой шорткод:

[acf field="имя_поля" post_id="options"]

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

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

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

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

Заключение

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

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

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

Если вам нужно создать кастомные поля, кастомные типы записей, кастономии или страницу Options с полями, вы можете обратиться ко мне для выполнения этой работы. У меня есть лайф-тайм лицензия на Advanced Custom Fields, я могу настроить этот плагин.

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