Группа полей — это коллекция полей, которые отображаются вместе при редактировании записи или страницы. В этом разделе мы пройдемся по созданию полной, реальной группы полей от начала до конца. Вместо игрушечного примера вы создадите профиль «Члена команды», который может использовать консалтинговая фирма — с фотографией, именем, должностью, биографией, специальностями и URL на LinkedIn. К концу вы поймете каждую часть редактора группы полей и будете готовы создать свои собственные пользовательские конфигурации.
Сценарий
Представьте, что вы управляете консалтинговой фирмой под названием Apex Partners. Вы хотите, чтобы у каждого консультанта была отдельная страница профиля на вашем сайте, показывающая их фотографию, полное имя, должность, профессиональную биографию, список специальностей и ссылку на их профиль в LinkedIn. У вас есть пользовательский тип записи под названием «Члены команды» (ваш разработчик это настроил), и вам нужны поля для заполнения редакторами.
Шаг 1: Создание группы полей
- Перейдите в Field Forge > Новая группа полей
- В поле заголовка вверху введите: Профиль члена команды
- Этот заголовок видят редакторы как заголовок метабокса при редактировании записи Члена команды
![Скриншот: редактор группы полей с введенным заголовком «Профиль члена команды» и пустым списком полей ниже]
Шаг 2: Добавление поля для фотографии
- Нажмите кнопку Добавить поле — появится сетка доступных типов полей
- Выберите Изображение из сетки
- Настройте поле:
— Имя: profile_photo (автоматически сгенерировано из метки — оставьте как есть)
— Инструкции: Загрузите профессиональное фото. Рекомендуемый размер: 400×400 пикселей, квадратная обрезка.
— Обязательно: Да (включите это — у каждого члена команды должна быть фотография)
— Формат возврата: Массив изображений (дает вашему разработчику доступ к нескольким размерам изображений)
— Размер превью: Средний (это контролирует миниатюру превью, отображаемую в редакторе)
— Ширина обертки: 30% (мы разместим фотографию слева, а имя и должность справа)
Шаг 3: Добавление поля для имени
- Нажмите Добавить поле снова, выберите Текст
- Настройте:
— Имя: full_name
— Инструкции: Введите полное имя консультанта, как оно должно отображаться на сайте.
— Обязательно: Да
— Заполнитель: «Джейн Доу»
— Лимит символов: 100 (предотвращает случайное вставление абзаца)
— Ширина обертки: 35%
Шаг 4: Добавление поля для должности
- Нажмите Добавить поле, выберите Текст
- Настройте:
— Имя: job_title
— Инструкции: Их роль в фирме (например, Старший консультант, Управляющий партнер).
— Обязательно: Да
— Заполнитель: «Старший консультант»
— Ширина обертки: 35%
Шаг 5: Добавление поля для биографии
- Нажмите Добавить поле, выберите Текстовая область
- Настройте:
— Имя: professional_bio
— Инструкции: Напишите 2-3 абзаца о фоне, опыте и подходе консультанта. Это отображается на их странице профиля.
— Обязательно: Да
— Строки: 6 (делает текстовую область достаточно высокой для нескольких абзацев без прокрутки)
— Ширина обертки: 100% (полная ширина — биографиям нужно пространство)
Шаг 6: Добавление поля для специальностей
- Нажмите Добавить поле, выберите Флажок
- Настройте:
— Имя: specialties
— Инструкции: Выберите все области экспертизы, которые применимы.
— Варианты: Добавьте каждую специальность на отдельной строке:
— Стратегия
— Операции
— Цифровая трансформация
— Финансовый консалтинг
— Человеческий капитал
— Управление рисками
— Технологии
— Устойчивое развитие
— Макет: Горизонтальный (отображает флажки в строку вместо вертикального списка, экономя место)
— Ширина обертки: 100%
Шаг 7: Добавление поля для URL LinkedIn
- Нажмите Добавить поле, выберите URL
- Настройте:
— Имя: linkedin_profile
— Инструкции: Вставьте полный URL профиля LinkedIn (например, https://linkedin.com/in/janedoe).
— Обязательно: Нет (не у каждого члена команды может быть профиль)
— Заполнитель: «https://linkedin.com/in/username»
— Ширина обертки: 50%
Шаг 8: Установите правила расположения
- Прокрутите вниз под полями до раздела Правила расположения
- Установите первый выпадающий список на Тип записи
- Установите оператор на равно
- Установите значение на Член команды (или как называется ваш тип записи команды)
- Это означает, что каждая запись Члена команды на вашем сайте будет отображать метабокс «Профиль члена команды»
Шаг 9: Сохраните и протестируйте
- Нажмите Сохранить группу полей (или нажмите Cmd+S / Ctrl+S)
- Перейдите к вашему типу записи Члены команды в боковой панели администратора
- Откройте существующую запись члена команды или создайте новую
- Прокрутите вниз под редактором контента — вы увидите метабокс «Профиль члена команды»
- Обратите внимание, что поле Фотография профиля (ширина 30%) находится слева, а Полное имя (35%) и Должность (35%) справа на одной строке
- Заполните тестовые данные: загрузите фотографию, введите имя, должность и биографию, отметьте несколько специальностей, вставьте URL LinkedIn
- Нажмите Опубликовать или Обновить, чтобы сохранить
- Снова откройте запись, чтобы подтвердить, что все данные сохранены
![Скриншот: запись Члена команды в редакторе, показывающая метабокс «Профиль члена команды» со всеми заполненными полями — фотография слева, имя и должность справа, биография ниже, флажки для специальностей и поле для URL LinkedIn]
Больше примеров групп полей, которые вы могли бы создать
| Группа полей | Поля | Правило расположения | Случай использования |
|---|---|---|---|
| Герой секции | Заголовок (текст), Подзаголовок (текст), Фоновое изображение (изображение), Текст кнопки (текст), URL кнопки (url) | Тип записи = Страница | Большинство страниц на маркетинговом сайте нуждаются в герое |
| Подробности продукта | Цена (число), SKU (текст), Вес (число), Доступность (выбор), Галерея (галерея) | Тип записи = Продукт | Информация о продукте для электронной коммерции |
| Подробности события | Дата события (выбор даты), Время начала (выбор времени), Место (текст), Адрес (текстовая область), URL билета (url), Встраивание карты (текстовая область) | Тип записи = Событие | Сайт с объявлениями событий |
| Отзыв | Цитата (текстовая область), Имя автора (текст), Фото автора (изображение), Компания (текст), Оценка (диапазон 1-5) | Тип записи = Отзыв | Раздел отзывов клиентов |
| Проект портфолио | Имя клиента (текст), URL проекта (url), Галерея (галерея), Категория (выбор), Описание (wysiwyg) | Тип записи = Портфолио | Портфолио креативного агентства |
Советы по организации полей
- Перетаскивайте поля для изменения их порядка — порядок в редакторе соответствует порядку, который видят редакторы на записях
- Дважды щелкните по метке поля, чтобы переименовать ее на месте, не открывая полную панель настроек
- Используйте Ширину обертки, чтобы создать макеты с несколькими колонками. Два поля по 50% располагаются рядом. Три по 33% создают трехколоночную строку
- Добавьте поле Вкладка (в разделе типов макета), чтобы разделить большую группу полей на вкладки. Поместите поля контента в одну вкладку, поля SEO в другую, а настройки в третью
- Используйте поле Сообщение, чтобы добавить инструкции, предупреждения или заметки, которые редакторы увидят при заполнении полей. Например: «Изображения должны быть не менее 1920×1080 пикселей для секции героя.»
- Держите имена полей короткими и описательными —
hero_titleлучше, чемthe_title_for_the_hero_section_at_the_top
> Полезно знать: Имя поля (например, full_name) — это то, что ваш разработчик использует в коде темы для отображения данных. Как только группа полей используется в производстве, избегайте изменения имен полей — это нарушает связь между сохраненными данными и темой. Изменение метки (то, что видят редакторы) всегда безопасно и не влияет на данные или код.
> Распространенная ошибка: Новые пользователи иногда создают группу полей, но забывают установить правила расположения. Поля существуют, но никогда не появляются нигде. Всегда прокручивайте вниз до Правил расположения перед сохранением и убедитесь, что хотя бы одно правило настроено.