кастомные поля что это
Создание пользовательского поля
Создание пользовательских полей осуществляется в одноименном разделе «Пользовательские поля».
Разберем значения основных полей:
При выборе типа поля «целое число» и «число» вводимые значения, которые начинаются с 0, будут удалены.
В мобильном приложении пользовательские поля не выводятся в списках заказов и клиентов, поэтому активация опции «Доступно в списке» не нужна.
Ограничения, связанные с пользовательскими полями
В системе присутствует ограничение на количество пользовательских полей. Невозможно создать свыше 250 полей.
Для определенных типов полей стоит ограничение на количество символов в пользовательском поле:
Тип поля «E-mail» работает по методу GetAnyEmail в карточке заказа и клиента. То есть поля «E-mail» учитываются при получении входящей почты и предлагаются в подсказках в поле «Кому» при написании письма.
Если в нередактируемое пользовательское поле вписан URL, то он будет отображаться как кликабельная ссылка.
Удаление пользовательского поля
Предусмотрена функция удаления пользовательских полей. При нажатии на кнопку удаления (корзина) надо иметь в виду, что удалятся и все значения, которые были заведены в данное поле.
Обратите внимание, что если пользовательское поле используется в сегментации, удалить его будет невозможно. Сначала необходимо убрать его из условия сегмента, а потом будет доступно удаление самого пользовательского поля.
Кастомные поля что это
В некоторых приложениях для авторизации, помимо логина и пароля, требуются дополнительные параметры (например, сервер, база данных и т.п.). Поля для задания дополнительных параметров авторизации в терминологии Indeed-Id называются кастомными полями.
Для обработки кастомного поля (обучение, заполнение поля и т.п.) в шаблоне приложения необходимо:
описать кастомное поле;
описать команду заполнения кастомного поля в алгоритме заполнения.
СИНТАКСИС
ПАРАМЕТРЫ
Структура задает описание кастомных полей, которые могут использоваться для заполнения форм приложения.
Опциональный параметр. Значение по умолчанию: пустой набор кастомных полей.
Атрибуты
id
Идентификатор кастомного поля.
Идентификатор используется при определении порядка кастомных полей для самообучения и при определении кастомного поля в алгоритме заполения.
Значение: число, строка.
Идентификатор должен быть уникальным в пределах описания кастомных полей. В случае, если для нескольких полей заданы одинаковые идентификаторы, идентификатор будет присвоен тому полю, описание которого указано первым. Описания остальных полей с таким же индентификатором при обработке шаблона не учитываются.
Структура задает описание кастомного поля.
Атрибуты
emptyStringValueForbidden
Флаг запрета пустых строковых значений поля.
Опциональный параметр. Значение по умолчанию: 0.
editLengthSymbols
Ширина поля для редактирования значения кастомного поля при самообучении.
Значение по умолчанию: 43 символа.
Атрибут определяет отображаемый размер поля для редактирования значения кастомного поля в окне самообучения и не определяет количество символов, которое можно задать в поле.
Значение атрибута имеет смысл только для кастомных полей с самообучением. Для других кастомных полей значение атрибута при обработке шаблона не учитывается.
alternateLogin
Флаг использования значения кастомного поля в качестве альтернативного имени учетной записи SSO.
Опциональный параметр. Значение по умолчанию: 0.
В качестве альтернативного имени учетной записи SSO целесообразно использовать самообучаемое кастомное поле.
Обучение кастомного поля происходит при обучении имени учетной записи SSO пользователем, при этом процесс обучения не отличается от стандартного обучения учетной записи.
Обученное значение кастомного поля при соответсвующем описании алгоритма заполнения можно использовать для заполнения поля логина целевого приложения.
Имя кастомного поля, отображаемое в ESSO Консоли в настройках учетной записи SSO.
Значение: непустая строка.
Структура задает значение кастомного поля.
Опциональный параметр. Значение по умолчанию: пусто.
Атрибуты
type
Тип значения кастомного поля.
Возможные значения:
vtString строковое значение
Строковое значение кастомного поля.
Задание тега имеет смысл только в том случае, если для кастомного поля задан строковый тип ( т.е. тогда, когда тег typeимеет значение vtString). В остальных случаях значение тега при обработке шаблона не учитывается.
Заданное значение является значением по умолчанию и используется при добавлении новой записи SSO для пользователя. Для существующей записи пользователя текущее значение поля изменено не будет.
Если для поля задан строковый тип (тег type имеет значение vtString) при запрете пустых строковых значениях поля (атрибут emptyStringValueForbidden имеет значение 1), значение тега должно быть непустой строкой. Если тег при указанных условиях имеет пустое значение, кастомное поле будет определено как самообучаемое.
САМООБУЧАЕМЫЕ КАСТОМНЫЕ ПОЛЯ
Самообучаемым кастомным полем называется кастомное поле, значение которого задается пользователем при обучении учетной записи SSO для приложения.
Для того, чтобы определить самообучаемое кастомное поле, необходимо:
установить флаг запрета пустых строковых значений поля (т.е. установить значение атрибутаemptyStringValueForbidden равным 1);
удалить из описания значение поля (тег )
СИНТАКСИС
В ESSO Консоли самообучаемое кастомное поле отображается с соответствующим комментарием.
Порядок обучения кастомных полей может быть определен структурой
ПОРЯДОК ОБУЧЕНИЯ КАСТОМНЫХ ПОЛЕЙ
В некоторых случаях обучение кастомных полей необходимо выполнять в определенном порядке. Шаблоны ESSO позволяют задать этот порядок.
СИНТАКСИС
идентификатор кастомного поля 1
…
идентификатор кастомного поля N
ПАРАМЕТРЫ
Структура определяет порядок отображения кастомных полей в ESSO Консоли и порядок обучения кастомных полей.
Идентификатор кастомного поля.
ПРИМЕРЫ
Пример 1
определение кастомного поля, обучаемого пользователем;
определение кастомного поля с предопределенным строковым значением;
определение ширины поля для редактирования значения кастомного поля при самообучении.
Описание кастомных полей:
В ESSO Консоли в настройках учетной записи SSO будут отображаться два дополнительных поля: “Сервер” и “База данных”.
Поле “Сервер” (идентификатор fldServer) является самообучаемым кастомным полем. Для этого поля в окне самообучения отображается поле, ширина которого соответствует 10 символам.
Поле “База данных” (идентификатор fldDB) имеет строковый тип. По умолчанию это поле имеет значение TestDB (если не было задано другое значение в ESSO Консоли). Обучение пользователем данного поля запрещено. Значение ширины поля для данного кастомного поля не учитывается.
Посмотреть работу примера можно с помощью готового шаблона (IndeedId.SSO.Test.App.CustomFields.Example1.app).
Пример 2
обучение кастомного поля в качестве альтернативного имени учетной записи SSO;
заполнение кастомных полей в целевом приложении, в том числе заполнение поля логина обученным значением кастомного поля.
Описание кастомных полей:
Описание команды заполнения поля логина значением кастомного поля в алгоритме заполнения:
В приведенном примере пользователю необходимо обучить имя учетно записи при первом входе в целевое приложение. При этом кастомное поле, используемое в качестве альтернативной учетной записи SSO (поле с идентификаторомfldUserName), будет обучено тем же значением. Обученное значение будет подставлено в поле логина при заполнении формы входа целевого приложения.
Посмотреть работу примера можно с помощью готового шаблона (IndeedId.SSO.Test.App.CustomFields.Example2.app).
Пример 3
определение порядка обучения кастомных полей.
Описание кастомных полей:
Описание порядка обучения кастомных полей:
В приведенном примере кастомные поля при обучении будут отображаться в следующей последовательности:
Сервер 1 (id=»fldServer1″)
Сервер 3 (id=»fldServer3″)
Сервер 2 (id=»fldServer2″)
Поле «База данных» отображаться при обучении не будет, т.к. оно не является самообучаемым полем.
В ESSO Консоли кастомные поля будут отображаться в следующей последовательности:
Формы и кастомные поля ввода в Angular 2+
Меня зовут Павел, я фронтенд-разработчик Tinkoff.ru. Наша команда занимается разработкой интернет-банка для юридических лиц. Фронтенд наших проектов был реализован с применением AngularJS, с которого мы перешли, частично с использованием Angular Upgrade, на новый Angular (ранее позиционировался как Angular 2).
Наш продукт предназначен для юридических лиц. Такая тематика требует множества форм со сложным поведением. Поля ввода включают в себя не только стандартные, реализованные в браузерах, но и поля с масками (например, для ввода телефона), поля для работы с тегами, ползунки для ввода числовых данных, различные выпадающие списки.
В этой статье мы заглянем «под капот» реализации форм в Angular и разберёмся, как создавать кастомные поля ввода.
Предполагается, что читатель знаком с основами Angular, в частности, со связыванием данных и внедрением зависимостей (ссылки на официальные гайды на английском языке). На русском языке со связыванием данных и основами Angular в целом, включая работу с формами, можно познакомиться здесь. На Хабрахабре уже была статья про внедрение зависимостей в Angular, но нужно учитывать, что написана она была задолго до выхода релизной версии.
Введение в формы
Работая с большим количеством форм, важно иметь мощные, гибкие и удобные инструменты для создания форм и управления ими.
Возможности работы с формами в Angular гораздо шире, чем в AngularJS. Определены два вида форм: шаблонные, то есть управляемые шаблоном (template-driven forms) и реактивные, управляемые моделью (model-driven/reactive forms).
Подробную информацию можно получить в официальном гайде (англ.). Здесь разберём основные моменты, за исключением валидации, которая будет рассмотрена в следующей статье.
Шаблонные формы
В шаблонных формах поведение поля управляется установленными в шаблоне атрибутами. В результате с формой можно взаимодействовать способами, знакомыми из AngularJS.
Чтобы использовать шаблонные формы, нужно импортировать модуль FormsModule:
Форма задаётся директивой NgForm. Эта директива создаётся, когда мы просто используем тег или атрибут ngForm внутри нашего шаблона (не забыв подключить FormsModule).
Поля ввода с директивами NgModel, находящиеся внутри формы, будут добавлены в форму и отражены в значении формы.
Директиву NgForm также можно назначить, используя конструкцию #formDir=»ngForm» — таким образом мы создадим локальную переменную шаблона formDir, в которой будет содержаться экземпляр директивы NgForm. Её свойство value, унаследованное от класса AbstractControlDirective, содержит значение формы. Это может быть нужно для получения значения формы (показано в живом примере).
Форму можно структурировать, добавляя группы (которые в значении формы будут представлены объектами) при помощи директивы ngModelGroup:
После назначения директивы NgForm любым способом можно обработать событие отправки по (ngSubmit) :
Реактивные формы
Реактивные формы заслужили своё название за то, что взаимодействие с ними построено на парадигме реактивного программирования.
Структурной единицей реактивной формы является контрол — модель поля ввода или группы полей, наследник базового класса AbstractControl. Контрол одного поля ввода (форм-контрол) представлен классом FormControl.
Компоновать значения полей шаблонной формы можно только в объекты. В реактивной нам доступны также массивы — FormArray. Группы представлены классом FormGroup. И у массивов, и у групп есть свойство controls, в котором контролы организованы в соответствующую структуру данных.
В отличие от шаблонной формы, для создания и управления реактивной не обязательно представлять её в шаблоне, что позволяет легко покрывать такие формы юнит-тестами.
Контролы создаются либо непосредственно через конструкторы, либо при помощи средства FormBuilder.
Метод this.formBuilder.group принимает объект, ключи которого станут именами контролов. Если значения не являются контролами, то они станут значениями новых форм-контролов, что и обуславливает удобство создания групп через FormBuilder. Если же являются, то будут просто добавлены в группу. Элементы массива в методе this.formBuilder.array обрабатываются таким же образом.
Чтобы связать контрол и поле ввода в шаблоне, нужно передать ссылку на контрол директивам formGroup, formArray, formControl. У этих директив есть «братья», которым достаточно передать строку с именем контрола: formGroupName, formArrayName, formControlName.
Для использования директив реактивных форм следует подключить модуль ReactiveFormsModule. Кстати, он не конфликтует с FormsModule, и директивы из них можно применять вместе.
Корневая директива (в данном случае formGroup) должна обязательно получить ссылку на контрол. Для вложенных контролов или даже групп у нас есть возможность обойтись именами:
Структуру формы в шаблоне повторять совсем не обязательно. Например, если поле ввода связано с контролом через директиву formControl, ему не требуется быть внутри элемента с директивой formGroup.
Директива formGroup обрабатывает submit и отправляет наружу (ngSubmit) точно так же, как и ngForm:
Свойство form — экземпляр класса FormGroup. Экземпляры этого же класса создаются при назначении директивы NgModelGroup. Директива NgModel создаёт FormControl.
Таким образом, все директивы, назначаемые полям ввода, как «шаблонные», так и «реактивные», служат вспомогательным механизмом для взаимодействия с основными сущностями форм в Angular — контролами.
При создании реактивной формы мы сами создаём контролы. Если мы работаем с шаблонной формой, эту работу берут на себя директивы. Мы можем получить доступ к контролам, но такой способ взаимодействия с ними не самый удобный. Кроме того, директивный подход шаблонной формы не даёт полного контроля над моделью: если мы возьмём управление структурой модели на себя, возникнут конфликты. Тем не менее, получать данные из контролов при необходимости можно, и это есть в живом примере.
Реактивная форма позволяет создать более сложную структуру данных, чем шаблонная, предоставляет больше способов взаимодействия с ней. Также реактивные формы можно проще и полнее покрывать юнит-тестами, чем шаблонные. Наша команда приняла решение использовать только реактивные формы.
Взаимодействие формы с полями
В Angular есть набор директив, обеспечивающих работу с большинством стандартных (браузерных) полей ввода. Они назначаются незаметно для разработчика, и именно благодаря им мы можем сразу связать с моделью любой элемент input.
Когда же возможности требуемого поля ввода выходят за рамки стандартных, или логика его работы требует переиспользования, мы можем создать кастомное поле ввода.
Сперва нам нужно познакомиться с особенностями взаимодействия поля ввода и контрола.
Контролы, как было сказано выше, сопоставляются каждому полю ввода явным или неявным образом. Каждый контрол взаимодействует со своим полем через его интерфейс ControlValueAccessor.
ControlValueAccessor
ControlValueAccessor (в этом тексте я буду называть его просто аксессором) — интерфейс, описывающий взаимодействие компонента поля с контролом. При инициализации каждая директива поля ввода (ngModel, formControl или formControlName) получает все зарегистрированные аксессоры. На одном поле ввода их может быть несколько — пользовательский и встроенные в Angular. Пользовательский аксессор имеет приоритет перед встроенными, но он может быть только один.
Для регистрации аксессора используется мультипровайдер с токеном NG_VALUE_ACCESSOR. Его следует добавить в список провайдеров нашего компонента:
В компоненте мы должны реализовать методы registerOnChange, registerOnTouched и writeValue, а также можем реализовать метод setDisabledState.
Методы registerOnChange, registerOnTouched регистрируют колбэки, используемые для отправки данных из поля ввода в контрол. Сами колбэки приходят в методы в качестве аргументов. Чтобы их не потерять, ссылки на колбэки записывают в свойства класса. Инициализация контрола может произойти позже создания поля ввода, поэтому в свойства нужно заранее записать функции-пустышки. Методы registerOnChange и registerOnTouched при вызове должны их перезаписать:
Функция onChange при вызове отправляет в контрол новое значение. Функцию onTouched вызывают, когда поле ввода теряет фокус.
Метод writeValue вызывается контролом при каждом изменении его значения. Основная задача метода — отобразить изменения в поле. Следует учитывать, что значением может быть null или undefined. Если внутри шаблона есть тег нативного поля, для этого используется Renderer (в Angular 4+ — Renderer2):
Метод setDisabledState вызывается контролом при каждом изменении состояния disabled, поэтому его тоже стоит реализовать.
Таким образом организована работа с полем ввода в директиве DefaultValueAccessor, которая применяется к любым, в том числе к обычным, текстовым полям ввода. Если вы захотите сделать компонент, работающий с нативным полем ввода внутри себя, это необходимый минимум.
В живом примере я создал простейшую реализацию компонента ввода рейтинга без встроенного нативного поля ввода:
Отмечу несколько моментов. Шаблон компонента состоит из одного повторяемого тега:
Массив values нужен для правильной работы директивы *ngFor и формируется в зависимости от параметра maxRate (по умолчанию — 5).
Поскольку компонент не имеет внутреннего поля ввода, значение хранится просто в свойстве класса:
Состояние disabled может быть присвоено как шаблонной, так и реактивной формой:
Кастомные (настраиваемые) поля проекта
В ПланФиксе есть возможность добавлять в проект дополнительные поля (реквизиты) различных типов. Такие поля мы называем кастомными. С кастомными полями можно работать как с обычными: вносить в них данные, использовать для отбора в фильтрах, отображать в отчетах и т.п.
Содержание
Создание кастомного поля
В открывшейся форме добавления нового кастомного поля необходимо выбрать его тип, задать название и настроить дополнительные параметры, зависящие от типа поля:
Тут же задается доступ к данному полю для сотрудников и клиентов.
Созданное поле попадает в раздел Скрытые поля, который находится в нижней части списка панелей и реквизитов. Добавить его на одну из панелей в форме проекта можно кликом на его названии в списке или простым перетаскиванием:
или 
Доступ к кастомным полям
Доступ к кастомным полям можно задать сразу при их создании или позже, в разделе Управление аккаунтом- Настраиваемые поля. Для каждого поля есть возможность настроить тех сотрудников и клиентов (внешние контакты с доступом в ПланФикс), кто может его видеть и редактировать:
При настройке доступа есть две основные возможности:
1. Можно указать роль в задаче/проекте, которая позволяет получить тот или иной доступ:
2. Можно указать список конкретных пользователей, которые будут иметь доступ к полю вне зависимости от их роли в задаче/проекте:
Отображение кастомных полей при просмотре проекта
По умолчанию, кастомные поля отображаются на вкладке Детали проекта:
В этой вкладке также доступно инлайн-редактирование или заполнение кастомных полей без перехода в полную форму редактирования Проекта:
Кастомные роли в проекте
Помимо стандартных ролей, в Проект можно добавить кастомные (то есть, добавляемые вами самостоятельно) роли проекта. Один из типов пользовательских полей, которые вы можете добавить в карточку проекта – это тип “Сотрудник”. Каждое добавленное в шаблон проекта поле такого типа становится доступным в шаблонах задач в списке исполнителей, участников и аудиторов.
Это позволяет вам придумать любую роль (или несколько), добавить их в шаблон проекта, а затем при создании по этому шаблону нового проекта выбрать конкретных сотрудников, которые будут в нем выполнять эти роли. Задачи автоматически наследуют эти установки и ставятся на выбранных для данного конкретного проекта сотрудников.
Как пользоваться Advanced Custom Fields
Advanced Custom Fields переводится как Продвинутые Кастомные (Произвольные) Поля.
То есть, кроме стандартных полей Заголовок, Редактор, Миниатюра и так далее, в редакторе Постов, Страниц и других типов записей, вы можете добавить свои собственные кастомные поля.
В этой статье вы узнаете, как настроить и как пользоваться плагином ACF.
Если вы уже знаете, что такое Кастомные поля, и для чего они используются, то переходите к настройке.
Стандартные поля редактора WordPress
Что такое кастомные поля. Что с их помощью можно делать.
Кастомные (Произвольные) поля позволяют добавлять, хранить и выводить дополнительную информацию о вашем контенте.
Например, WooCommerce использует свои собственные кастомные поля для хранения дополнительной информации о Товарах:
Если вы пользуетесь плагином событий, эти плагины используют кастомные поля для вывода информации:
Для сайта с недвижимостью вы можете выводить поля с типом недвижимости, арендой или продажей, количеством комнат, метражом, и так далее.
Для сайта о фильмах вы можете выводить информацию о режиссёре, студии, продолжительности, жанре фильма, и так далее.
Сайт аренды автомобилей выводит данные о типе кузова, объеме двигателя, типе трансмиссии и так далее.
Еще одна область применения плагина Advanced Custom Fields — на сайтах клиентов.
Например, вы сделали сайт, где на главной странице находится слайдер с несколькими строками текста.
Через некоторое время клиент хочет изменить текст в слайдере на какой-то другой. Чтобы он мог это сделать без вашей помощи, вы можете использовать кастомные поля.
Добавьте кастомные поля в админке той страницы, на которой находится слайдер, а вывод полей — на слайдере.
Тогда клиент может изменить текст на слайдере в бэк-энде сайта без использования пейдж-билдера. И нажать на кнопку Обновить.
Или, например, изменить цвет шрифта или фон секции.
Еще более продвинутая идея — вынести всю кастомную информацию на отдельную страницу в админке, например, текст в слайдере, вопросы и ответ FAQ / ЧаВо, контактную информацию, и так далее.
В бесплатной версии ACF вы можете использовать такие типы кастомных полей:
Основное
Содержание
Выбор
Отношение
jQuery
Блок
Когда использовать Кастомные Поля
Например, вы хотите опубликовать на сайте какое-то Мероприятие. Вы можете это сделать в виде простого текста в Статье или на Странице.
Если у вас только одно мероприятие, то можно и так, но если у вас много мероприятий, или сайт, посвященный каким-то мероприятиям, то лучше использовать кастомные поля.
Использовать кастомные поля лучше по нескольким причинам:
Если у вас на сайте десятки или сотни страниц с одинаковым выводом информации, лучше создать единый шаблон страницы и использовать Кастомные поля.
Количество ванных комнат, спален и гаражей — кастомные поля. Расположение — кастомное поле.
Встроенные Произвольные Поля
В Вордпрессе есть встроенный функционал произвольных полей:
Перейдите в Инструменты — Настройки — Произвольные поля.
Встроенные произвольные поля предполагают только текст, и их не так просто выводить во фронт-энде. Для вывода полей надо добавить код в шаблоны темы.
Обычно этим функционалом пользуются плагины, например SEO плагины.
Плагин Advanced Custom Fields
С плагином Advanced Custom Fields работать с полями гораздо проще. У плагина более понятный интерфейс с бóльшим числом функций и гораздо более простым выводом полей.
Current Version: 5.11.4
Last Updated: 02.12.2021
Плагин 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 одинаковые группы, которые отличаются только индексом имен полей, то есть:
Чтобы не создавать одни и те же Группы полей несколько раз, вы можете их продублировать.
Перейдите в Группы полей — Группы полей и продублируйте готовую группу:
Продублируйте группу
Переименуйте группу в Курс 2 и замените «1» в именах полей на «2», чтобы получилось так:
Таким же образом создайте третью Группу полей. Не забудьте добавить «3» к каждому имени поля. В итоге должно получиться так:
Перейдите на страницу Advanced Custom Fields, посмотрите что получилось:
ACF — Отображение полей в бэк-энде
В этом примере я дал полям Картинка Курса, Краткое описание Курса, Дата начала и Кнопка 50% ширины в Атрибутах поля.
Атрибуты поля — довольно мощный инструмент, с помощью которого вы можете настроить разные виды отображения ваших кастомных полей в бэк-энде.
Например, вы можете настроить отображение всех трех полей Название Курса в одной строке, если в Группе полей вы расположите все 3 поля Название Курса друг за другом и дадите каждому полю 33% ширины.
Картинки Курса будут во второй строке, каждое поле займет 33% ширины, и так далее.
Расположите в Группе полей каждое поле всех трёх Курсов друг за другом и дайте каждому полю 33% ширины.
В Настройках — Расположение меток выберите Вверху:
Так у вас получится 1 аккордеон со всеми тремя Курсами вместо трёх аккордеонов с 1 Курсом в каждом.
Еще один вариант расположения — с помощью Типов полей — Вкладка и Группа:
Чтобы сгруппировать Курсы по вкладкам, создайте Группу полей с типом Вкладка.
После этого добавьте поле с типом Группа. Внутри настроек поля Группа в разделе Вложенные поля добавьте нужные поля, в этом примере:
Если вы будете использовать такую группировку (Родительское поле — Дочерние поля), то вывод полей во фронт-энде будет немного другим.
ACF — Условная логика
Еще одна крутая функция ACF — Условная логика, которая позволяет показывать или скрывать поля в зависимости от условий, которые выполняются или не выполняются в других полях.
Например, вы можете отключить показ полей, если решите не проводить Курс и снимите галочку:
Добавьте поле Будет Курс? с Типом поля Да / Нет. Включите условную логику на всех полях каждого Курса. Настройте логику Показывать поле, если поставлена галочка в поле Будет Курс?
Как вывести поля Advanced Custom Fields
Вы узнали, как добавлять информацию в Произвольные поля, как связывать поля с типом контента на сайте и сохранять информацию в базу данных.
Если сейчас вы заполните поля в бэк-энде, сохраните страницу и перейдете во фронт-энд, то поля не будут отображаться.
Существует 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:
Например, такой шорткод выводит поле Название Курса:
Если вы используете Родительские и Дочерние поля, вам нужно указать оба шорткода:
То есть, если вы использовали поле Вкладка, а в нем дочернее поле Название Курса, то шорткод должен быть такой:
Как выводить Кастомные поля с помощью Elementor Pro
Elementor — один из самых популярных конструкторов страниц. Он позволяет создавать страницы просто перетаскивая виджеты.
С помощью Elementor Pro вы можете создавать шаблоны страниц, включая добавление в них кастомных полей Advanced Custom Fields.
По сути это визуальный редактор первого способа, который позволяет вам редактировать файлы шаблонов без работы с кодом.
В этом примере вы добавляете поля на странице Advanced Custom Fields. Откройте страницу в Элементоре и добавьте виджеты для вывода кастомных полей.
Чтобы выводить Изображение, сделайте так:
Остальные поля выводятся аналогично.
Если вы хотите выводить поля, например, на всех страницах Блога, вам нужно редактировать шаблон страницы.
Создайте или загрузите нужный шаблон страницы и добавьте в него вывод ACF полей в нужном месте.
Сообщество Advanced Custom Fields
У ACF есть большое сообщество, которое занимается разработкой дополнений для плагина:
ACF Free vs. Pro
У плагина ACF есть версия Pro, в которой есть:
Альтернативы Advanced Custom Fields
Скорее всего, вы хотите не только выводить кастомные поля, но и реализовать какой-то функционал, например, выбор автомобиля по параметрам и аренда.
Я рекомендую плагин JetEngine и вообще софт Crocoblock. У них есть готовые динамические шаблоны и другой готовый софт для реализации ваших идей.
Заключение
Как видите, даже бесплатная версия ACF предлагает большой функционал.
Если вы хотите выводить кастомные поля всего на нескольких страницах сайта, вы можете использовать шорткоды или использовать динамические теги в редакторе Elementor.
Если вы хотите выводить кастомные поля на многих страницах, например, на всех страницах Блога, используйте PHP или редактируйте шаблон страницы в Элементоре.
Используя дополнительные кастомные поля вы можете использовать WordPress не только в качестве блог-платформы, но и, например, создать сайт недвижимости.
Надеюсь, статья была полезна. Оставляйте комментарии.