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

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

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

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

Содержание:

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

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

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

Заключение

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

Пример банера на Главной странице
Пример Банера / Слайдера на Главной

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

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

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

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

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

Основное

  • Текст
  • Область текста
  • Число
  • Диапазон
  • E-mail
  • Ссылка
  • Пароль

Содержание

  • Изображение
  • Файл
  • Редактор WordPress
  • Медиа

Выбор

  • Выбор (select)
  • Флажок (checkbox)
  • Переключатель (radio)
  • Группа кнопок
  • Да / Нет

Отношение

  • Ссылка
  • Объект записи
  • Ссылка на страницу
  • Записи
  • Таксономия
  • Пользователь

jQuery

  • Расположение на карте
  • Дата
  • Дата и время
  • Время
  • Цвет

Блок

  • Сообщение
  • Аккордеон
  • Вкладка
  • Группа

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

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

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

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

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

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

Сайт недвижимости - Кастомные поля
Сайт недвижимости — Кастомные поля

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

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

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

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

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

Встроенные кастомные поля Вордпресс
Встроенные кастомные поля Вордпресс

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

Обычно этим функционалом пользуются плагины, например 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 — Добавьте Кастомные поля

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

ACF - Добавьте кастомное поле
Добавьте первое поле

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

ACF - Настройте кастомное поле
Настройте кастомное поле

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

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

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

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

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

ACF - Группа полей
Группа полей ACF

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

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

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

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

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

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

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

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

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

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

ACF - Продублируйте группу полей
Продублируйте группу

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

ACF - Создайте вторую Группу полей
Создайте вторую Группу полей

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

ACF - Готовые группы полей
Готовые группы полей

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

ACF - Кастомные поля в бэк-энде
Кастомные поля в бэк-энде страницы

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

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

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

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

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

ACF - Расположение полей в ряд с помощью настройки Атрибуты
Расположение полей в ряд с помощью настройки Атрибуты

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

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

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

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

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

ACF - Типы полей Вкладка и Группа
Типы полей Вкладка и Группа

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

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

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

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

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

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

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

ACF - Управление условной логикой
Галочка отключает показ всех полей

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

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

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

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

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

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

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

Кроме Элементора, вы можете использовать другие пейдж-билдеры, у которых есть поддержка ACF. Посмотрите в документации своего пейдж-билдера.

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

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

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

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

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

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

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

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

Имена полей ACF
Имена полей ACF

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

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

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

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

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

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

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

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

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

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

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

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

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

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

Вывод полей ACF в Elementor Pro
Вывод изображения ACF в Elementor Pro

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

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

Elementor - Конструктор темы - Одиночная
Elementor — Конструктор темы — Одиночная

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

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

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

ACF Free vs. Pro

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

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

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

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

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

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

Заключение

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

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

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

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

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

10 комментариев

  1. Добрый вечер! Пользуюсь Custom Field Suite. И мне информацию нужно отобразить на всех страницах в хедере и футере, как это сделать? Если я поля присваиваю только главной странице то поля отобразятся на главной, если присваиваю и другим страницам, то все это все равно нужно редактировать для каждой страницы.

    • Здравствуйте,
      Хотя в статье речь идет о другом плагине, я постараюсь ответить.

      С плагином ACF я бы сделал так:
      Создал нужные поля, назначил их появление на нужных страницах (всех), и вывел с помощью шорткодов в виджетах html в хедере и в футере.

      Мне кажется в вашей фразе «если присваиваю и другим страницам, то все это все равно нужно редактировать для каждой страницы» несколько слов пропущено, или я не понял смысл.

      В CFS нет шорткодов и у него нет интеграции с пейдж-билдерами, он выводит поля в шаблоны темы с помощью PHP.

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

  2. У меня выводятся эти поля. но не редактируемые. Мне нужно, чтобы пользователь мог вносить доп информацию о себе в своем профиле.

    • Если не ошибаюсь, в версии Pro есть возможность добавить поля на страницу User Form.
      Зависит от того, какой профиль пользователя вы используете.
      WooCommerce, Profile Builder, Свой собственный?

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

  3. Я имел ввиду, что мне необходимо использоваться эти поля для редактирования информации, например в своем профиле пользователю необходимо внести дополнительную информацию о себе. А у меня получается поле есть, но я не могу редактировать его содержимое.

  4. Добрый день, это описывается вывод поля, а если необходимо отображать поле для ввода информации. Тогда как?

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

  5. Отличная статья, спасибо!
    Но вот не могу разобраться с функцией ограничения просмотра записей студентами из определенной категории, например, есть 1 Курс и 2 Курс, так вот надо разграничить студентов, чтобы 1 курс не видел записи и курсы LearnPress для студентов 2 курса, и наоборот.

    • Вам нужно создать 2 разных уровня мембершипа в вашем мембершип плагине.
      Когда посетитель оплатит доступ к Курсу 1, он не получит доступ к Курсу 2.

  6. Наконец-то нашёл способ выводить кастом филдс без копания в коде, юзая шорткоды. Спасибо, автор!

Ответить

Techbear