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

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

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

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

В данной статье мы рассмотрим:

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

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

Как отображать поля ввода Advanced Custom Fields

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

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

Заключение

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

Основное

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

В данной статье мы рассмотрим

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

Выбор

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

Отношение

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

jQuery

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

Блок

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

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

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

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

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

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

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

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

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

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

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

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

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

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

Плагин Advanced Custom Fields

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


Advanced Custom Fields

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

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

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

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

Advanced Custom Fields — Параметр плагина

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

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

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

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

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

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

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

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

Например: Я хочу добавить Группы полей ввода для 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 — добавить 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 есть большое сообщество, которое занимается разработкой дополнений для плагина:

  • 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 не только в виде блог-платформы, но и, например, создать веб-сайт недвижимости.

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

Добавить комментарий

Ваш адрес email не будет опубликован. Обязательные поля помечены *