Techbear
Сайт для тех, кто хочет использовать Вордпресс по максимуму, но не хочет разбираться в коде.
Advanced Custom Fields переводится как Продвинутые Кастомные (Произвольные) Поля.
То есть, кроме стандартных полей Заголовок, Редактор, Миниатюра и так далее, в редакторе Постов, Страниц и других типов записей, вы можете добавить свои собственные кастомные поля.
В этой статье вы узнаете, как настроить и как пользоваться плагином ACF.
Содержание:
Стандартные поля редактора WordPress
Что такое кастомные поля. Что с их помощью можно делать.
Когда использовать Кастомные Поля
Встроенные в Вордпресс Произвольные Поля
Плагин Advanced Custom Fields
Как выводить поля Advanced Custom Fields
Сообщество Advanced Custom Fields
ACF Free vs. Pro
Альтернативы Advanced Custom Fields
Если вы уже знаете, что такое Кастомные поля, и для чего они используются, то переходите к настройке.
Кастомные (Произвольные) поля позволяют добавлять, хранить и выводить дополнительную информацию о вашем контенте.
Например, WooCommerce использует свои собственные кастомные поля для хранения дополнительной информации о Товарах:
Если вы пользуетесь плагином событий, эти плагины используют кастомные поля для вывода информации:
Для сайта с недвижимостью вы можете выводить поля с типом недвижимости, арендой или продажей, количеством комнат, метражом, и так далее.
Для сайта о фильмах вы можете выводить информацию о режиссёре, студии, продолжительности, жанре фильма, и так далее.
Сайт аренды автомобилей выводит данные о типе кузова, объеме двигателя, типе трансмиссии и так далее.
Еще одна область применения плагина Advanced Custom Fields — на сайтах клиентов.
Например, вы сделали сайт, где на главной странице находится слайдер с несколькими строками текста.
Через некоторое время клиент хочет изменить текст в слайдере на какой-то другой. Чтобы он мог это сделать без вашей помощи, вы можете использовать кастомные поля.
Добавьте кастомные поля в админке той страницы, на которой находится слайдер, а вывод полей — на слайдере.
Тогда клиент может изменить текст на слайдере в бэк-энде сайта без использования пейдж-билдера. И нажать на кнопку Обновить.
Или, например, изменить цвет шрифта или фон секции.
Еще более продвинутая идея — вынести всю кастомную информацию на отдельную страницу в админке, например, текст в слайдере, вопросы и ответ FAQ / ЧаВо, контактную информацию, и так далее.
В бесплатной версии ACF вы можете использовать такие типы кастомных полей:
Основное
Содержание
Выбор
Отношение
jQuery
Блок
Например, вы хотите опубликовать на сайте какое-то Мероприятие. Вы можете это сделать в виде простого текста в Статье или на Странице.
Если у вас только одно мероприятие, то можно и так, но если у вас много мероприятий, или сайт, посвященный каким-то мероприятиям, то лучше использовать кастомные поля.
Использовать кастомные поля лучше по нескольким причинам:
Если у вас на сайте десятки или сотни страниц с одинаковым выводом информации, лучше создать единый шаблон страницы и использовать Кастомные поля.
Количество ванных комнат, спален и гаражей — кастомные поля. Расположение — кастомное поле.
В Вордпрессе есть встроенный функционал произвольных полей:
Перейдите в Инструменты — Настройки — Произвольные поля.
Встроенные произвольные поля предполагают только текст, и их не так просто выводить во фронт-энде. Для вывода полей надо добавить код в шаблоны темы.
Обычно этим функционалом пользуются плагины, например SEO плагины.
С плагином Advanced Custom Fields работать с полями гораздо проще. У плагина более понятный интерфейс с бóльшим числом функций и гораздо более простым выводом полей.
Плагин ACF установлен на более чем 1 млн. сайтов и имеет рейтинг 98% на основе 1.100+ отзывов.
После установки плагин добавляет раздел меню Группы полей (Custom Fields) в админке Вордпресс.
Вы можете добавлять кастомные поля во все виды записей, включая собственные типы записей, таксономии, пользователям, в медифайлы, в комментарии и меню.
Вы можете выводить поля ACF с помощью кода в файлах темы (подробная документация по каждому типу полей и выводу с помощью кода), с помощью шорткодов и Elementor Pro.
Подробная инструкция по настройке плагина Advanced Custom Fields.
Пример: Предположим, у вас он-лайн школа, и время от времени вы проводите курсы / вебинары на 3 определенные темы.
Вы хотите выводить на Главной странице информацию об этих вебинарах. В этом примере вы добавите кастомные поля для вывода такой информации:
Вместо отображения полей только на одной странице вы можете задать другие условия отображения полей, например, выводить поля на всех страницах Блога.
В админке Вордпресс перейдите в Группы полей — Добавить, чтобы создать новую группу полей.
Группа полей — это одно или несколько полей, которые относятся к одной по смыслу информации.
Например: Я хочу добавить Группы полей для 3 вебинаров. Для каждого вебинара нужно создать свою группу полей, которая будет состоять из 5 полей: Название, Изображение, Описание, Дата начала и Кнопка со ссылкой.
В этом примере нужно создать 3 Группы полей, по 5 полей каждая. Для удобства Группу полей можно создать один раз и несколько раз продублировать.
В эту группу полей будут входить 5 полей. Группа будет отображаться на Странице Advanced Custom Fields.
Чтобы добавить первое поле — в этом примере Название вебинара или курса, — нажмите на кнопку Добавить поле:
Заполните поля:
Все настройки понятны из описания, кроме Атрибуты, — это ширина поля в бэк-энде.
Если вы хотите поместить несколько полей в один ряд — используйте эту настройку. В этом примере я задал ширину первого поля 65%.
Нажимайте на кнопку Добавить поле, добавляйте поля по одному. Выбирайте тип поля в выпадающем меню Тип поля, заполните остальные настройки полей.
Атрибуты ширины этим четырем полям я дам 50%. Подробнее далее.
В итоге должно получиться так:
Группа полей создана, сделайте настройки отображения полей на выбранных страницах, в этом примере — на странице Advanced Custom Fields:
У всех настроек понятные описания, если не уверены — оставьте настройки по умолчанию.
Нажмите Опубликовать.
В нашем примеры нужны 3 одинаковые группы, которые отличаются только индексом имен полей, то есть:
Чтобы не создавать одни и те же Группы полей несколько раз, вы можете их продублировать.
Перейдите в Группы полей — Группы полей и продублируйте готовую группу:
Переименуйте группу в Курс 2 и замените «1» в именах полей на «2», чтобы получилось так:
Таким же образом создайте третью Группу полей. Не забудьте добавить «3» к каждому имени поля. В итоге должно получиться так:
Перейдите на страницу Advanced Custom Fields, посмотрите что получилось:
В этом примере я дал полям Картинка Курса, Краткое описание Курса, Дата начала и Кнопка 50% ширины в Атрибутах поля.
Атрибуты поля — довольно мощный инструмент, с помощью которого вы можете настроить разные виды отображения ваших кастомных полей в бэк-энде.
Например, вы можете настроить отображение всех трех полей Название Курса в одной строке, если в Группе полей вы расположите все 3 поля Название Курса друг за другом и дадите каждому полю 33% ширины.
Картинки Курса будут во второй строке, каждое поле займет 33% ширины, и так далее.
Расположите в Группе полей каждое поле всех трёх Курсов друг за другом и дайте каждому полю 33% ширины.
В Настройках — Расположение меток выберите Вверху:
Так у вас получится 1 аккордеон со всеми тремя Курсами вместо трёх аккордеонов с 1 Курсом в каждом.
Еще один вариант расположения — с помощью Типов полей — Вкладка и Группа:
Чтобы сгруппировать Курсы по вкладкам, создайте Группу полей с типом Вкладка.
После этого добавьте поле с типом Группа. Внутри настроек поля Группа в разделе Вложенные поля добавьте нужные поля, в этом примере:
Если вы будете использовать такую группировку (Родительское поле — Дочерние поля), то вывод полей во фронт-энде будет немного другим.
Еще одна крутая функция ACF — Условная логика, которая позволяет показывать или скрывать поля в зависимости от условий, которые выполняются или не выполняются в других полях.
Например, вы можете отключить показ полей, если решите не проводить Курс и снимите галочку:
Добавьте поле Будет Курс? с Типом поля Да / Нет. Включите условную логику на всех полях каждого Курса. Настройте логику Показывать поле, если поставлена галочка в поле Будет Курс?
Вы узнали, как добавлять информацию в Произвольные поля, как связывать поля с типом контента на сайте и сохранять информацию в базу данных.
Если сейчас вы заполните поля в бэк-энде, сохраните страницу и перейдете во фронт-энд, то поля не будут отображаться.
Существует 3 способа вывести поля в ACF:
Кроме Элементора, вы можете использовать другие пейдж-билдеры, у которых есть поддержка ACF. Посмотрите в документации своего пейдж-билдера.
Первый способ выводить поля ACF — добавить PHP функции Advanced Custom Fields в файлы шаблонов дочерней темы.
Этот способ предполагает работу с файлами темы, но гарантирует, что поля ACF будут всегда выводиться в одном и том же месте.
Например, если вы хотите добавить вывод полей ACF на всех страницах блога, вам нужно редактировать файл single.php.
В вашей теме это может быть другой файл, например, в теме TwentyNineteen этот файл называется content-single.php.
После того, как вы нашли файл шаблона страницы, добавьте в нужное место файла функцию ACF the_field() для вывода нужного поля. Подробнее о функции the_field().
В общем виде функция выглядит так:
Имена полей можно посмотреть здесь:
Документация по функциям Advanced Custom Fields.
Выводить поля ACF с помощью шорткода проще. Если у вас всего несколько мест / страниц, где вы хотите выводить кастомные поля, это простой и удобный способ.
Если вам нужно выводить поля на многих страницах, то придется везде добавлять шорткоды вручную. В этом минус этого способа.
Шорткод для вывода полей ACF:
[acf field="имя_поля"]
Например, такой шорткод выводит поле Название Курса:
[acf field="course-title-1"]
Если вы используете Родительские и Дочерние поля, вам нужно указать оба шорткода:
[acf field="родительский-шорткод_дочерний-шорткод"]
То есть, если вы использовали поле Вкладка, а в нем дочернее поле Название Курса, то шорткод должен быть такой:
[acf field="course-1_course-title-1"]
Elementor — один из самых популярных конструкторов страниц. Он позволяет создавать страницы просто перетаскивая виджеты.
С помощью Elementor Pro вы можете создавать шаблоны страниц, включая добавление в них кастомных полей Advanced Custom Fields.
По сути это визуальный редактор первого способа, который позволяет вам редактировать файлы шаблонов без работы с кодом.
В этом примере вы добавляете поля на странице Advanced Custom Fields. Откройте страницу в Элементоре и добавьте виджеты для вывода кастомных полей.
Чтобы выводить Изображение, сделайте так:
Остальные поля выводятся аналогично.
Если вы хотите выводить поля, например, на всех страницах Блога, вам нужно редактировать шаблон страницы.
Создайте или загрузите нужный шаблон страницы и добавьте в него вывод ACF полей в нужном месте.
У ACF есть большое сообщество, которое занимается разработкой дополнений для плагина:
У плагина ACF есть версия Pro, в которой есть:
Скорее всего, вы хотите не только выводить кастомные поля, но и реализовать какой-то функционал, например, выбор автомобиля по параметрам и аренда.
Я рекомендую плагин JetEngine и вообще софт Crocoblock. У них есть готовые динамические шаблоны и другой готовый софт для реализации ваших идей.
Как видите, даже бесплатная версия ACF предлагает большой функционал.
Если вы хотите выводить кастомные поля всего на нескольких страницах сайта, вы можете использовать шорткоды или использовать динамические теги в редакторе Elementor.
Если вы хотите выводить кастомные поля на многих страницах, например, на всех страницах Блога, используйте PHP или редактируйте шаблон страницы в Элементоре.
Используя дополнительные кастомные поля вы можете использовать WordPress не только в качестве блог-платформы, но и, например, создать сайт недвижимости.
Надеюсь, статья была полезна. Оставляйте комментарии.
Сайт для тех, кто хочет использовать Вордпресс по максимуму, но не хочет разбираться в коде.
Здравствуйте. Пользуясь плагином Advanced Custom Fields наполняю станицу контентом. К сожалению текста много надо переходить на другую страницу. Традиционный способ с помощью не работает. Есть какой способ сделать постраничную навигацию?
Здравствуйте,
В классическом редакторе и в редакторе Гутенберг есть виджет переноса контента на следующую страницу.
Наверное лучше на самом деле использовать крокоблок или элементор про. В теме Blocksy так и не нашла singl post. Скорее всего это потому что в их про версии есть функция «Блоки содержимого». Спасибо за статью, с шорткодами вообще помогли!
Добрый вечер! Пользуюсь Custom Field Suite. И мне информацию нужно отобразить на всех страницах в хедере и футере, как это сделать? Если я поля присваиваю только главной странице то поля отобразятся на главной, если присваиваю и другим страницам, то все это все равно нужно редактировать для каждой страницы.
Здравствуйте,
Хотя в статье речь идет о другом плагине, я постараюсь ответить.
С плагином ACF я бы сделал так:
Создал нужные поля, назначил их появление на нужных страницах (всех), и вывел с помощью шорткодов в виджетах html в хедере и в футере.
Мне кажется в вашей фразе «если присваиваю и другим страницам, то все это все равно нужно редактировать для каждой страницы» несколько слов пропущено, или я не понял смысл.
В CFS нет шорткодов и у него нет интеграции с пейдж-билдерами, он выводит поля в шаблоны темы с помощью PHP.
Если кратко, то мне кажется вам лучше взять ACF и сделать как я предложил.
У меня выводятся эти поля. но не редактируемые. Мне нужно, чтобы пользователь мог вносить доп информацию о себе в своем профиле.
Если не ошибаюсь, в версии Pro есть возможность добавить поля на страницу User Form.
Зависит от того, какой профиль пользователя вы используете.
WooCommerce, Profile Builder, Свой собственный?
В JetEngine есть возможность создать свою собственную админку во фронт-энде с любыми данными, в том числе с редактируемыми полями для пользователя.
Я имел ввиду, что мне необходимо использоваться эти поля для редактирования информации, например в своем профиле пользователю необходимо внести дополнительную информацию о себе. А у меня получается поле есть, но я не могу редактировать его содержимое.
Добрый день, это описывается вывод поля, а если необходимо отображать поле для ввода информации. Тогда как?
Поле для ввода информации находится в бэк-энде.
Создайте нужный тип поля или полей, и выберите, в бэк-энде каких страниц отображать эти поля.
Поля появятся в бэк-энде этих страниц.
Отличная статья, спасибо!
Но вот не могу разобраться с функцией ограничения просмотра записей студентами из определенной категории, например, есть 1 Курс и 2 Курс, так вот надо разграничить студентов, чтобы 1 курс не видел записи и курсы LearnPress для студентов 2 курса, и наоборот.
Вам нужно создать 2 разных уровня мембершипа в вашем мембершип плагине.
Когда посетитель оплатит доступ к Курсу 1, он не получит доступ к Курсу 2.
Наконец-то нашёл способ выводить кастом филдс без копания в коде, юзая шорткоды. Спасибо, автор!