Flexible Content в теме WordPress: макеты и секции

Обзор

Поля ACF’s Flexible Content позволяют создавать несколько групп полей, известных как макеты. Затем вы можете использовать их, чтобы дать редакторам больше контроля над тем, как отображаются данные.

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

Представьте Flexible Content как способ создавать шаблоны макетов WordPress, но с полями и подполями ACF PRO. Обычно идея состоит в том, чтобы создавать атомарные блоки, элементы, модули — или как вам удобнее называть более мелкие части интерфейса — и собирать их в цельные гибкие шаблоны. В идеале такие шаблоны служат отправной точкой для редакторов и помогают им быстрее начать работу над контентом.

Я создал вымышленный сайт компании, чтобы показать, как собирать макеты с помощью полей Flexible Content. Qorp — новая технологическая компания, которой нужен сайт для их модной новой технологии.

Что это за технология? Этого не знает никто 🤪.

Qorp хочет иметь возможность добавлять и удалять секции под записями блога. Кроме того, им нужно, чтобы эти секции можно было располагать в любом порядке. Это один из примеров, где поля Flexible Content действительно раскрывают себя. Ниже я добавил изображение, показывающее визуальное сочетание и перестановку секций, которые требовались Qorp для отдельных записей блога.

Здесь три секции: Призыв к действию, Сигналы доверия и Похожие записи — все они собраны на основе макетов, созданных внутри поля Flexible Content. ACF упрощает для команды контента Qorp перестановку этих секций, добавление большего числа блоков одного типа или полное удаление, если это нужно для конкретной записи.

Настройка нашего поля Flexible Content

Первое, что мы хотим сделать, — создать новую группу полей с полем Flexible Content и задать ей имя. Я назвал свою группу полей: «Одиночная запись: итоговые секции», а своё поле — «Секции».

Далее убедитесь, что для Правила отображения задано Тип записи — равно — Запись. Это гарантирует, что наши поля будут отображаться только тогда, когда Qorp редактирует тип записи «Запись». Обязательно выберите Flexible Content в качестве родительского типа поля. Я также рекомендую добавлять префикс к имени поля Flexible Content, например, qorp_post_sections.

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

Новая группа полей Flexible Content с Тип записи = Запись в правилах отображения.

На этом этапе наше поле Flexible Content уже отображается для контент-команды Qorp, но на фронтенде пока ничего нет.

Поле Flexible Content не принесёт клиенту особой пользы, пока мы не добавим ему макеты в следующем разделе.

Создание подполей внутри поля Flexible Content

Теперь, когда мы настроили поле Flexible Content, нужно создать макеты. Помните: макеты — это вложенные группы полей внутри поля Flexible Content, которые можно использовать, чтобы по-разному представлять данные для каждого макета.

Согласно нашему дизайну, нам нужно учесть следующие секции: Призыв к действию, Сигналы доверия и Похожие записи.

Призыв к действию: Здесь используется короткий описательный текст, часто называемый eyebrow, затем заголовок и кнопка.
- Метка: Призыв к действию
- Имя: call_to_action
- Макет: Block
- Поля:
  - Метка: Надзаголовок / Имя: eyebrow / Тип: Text
  - Метка: Заголовок / Имя: heading / Тип: Text
  - Метка: Кнопка / Имя: button / Тип: Group
  - Подполя кнопки:
    - Метка: Текст кнопки / Имя: button_text / Тип: Text
    - Метка: Ссылка кнопки / Имя: button_link / Тип: URL

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

Сигналы доверия: Заголовок с логотипами связанных компаний под ним.
- Метка: Сигналы доверия
- Имя: trust_signals
- Макет: Block
- Поля:
  - Метка: Логотип / Имя: logo / Тип: Repeater
  - Подполя повторителя:
    - Метка: Логотип / Имя: logo / Тип: Image

Теперь, когда мы добавили подполе для секции «Сигналы доверия», оно появилось в записях клиента под их CTA.

Похожие записи: Вручную подобранные записи, связанные с текущей записью, которые может задать редакция Qorp.
- Метка: Похожие записи
- Имя: related_posts
- Макет: Block
- Поля:
  - Метка: Записи / Имя: posts / Тип: Relationship

Когда мы смотрим на фронтенд, видно, что поле «Похожие записи» отображается как надо.

Когда все макеты на месте, наши клиенты в Qorp могут легко переставлять их так, как это нужно для записи.

Вывод полей Flexible Content в блочной теме

Далее мы разберём, как выводить данные поля Flexible Content в блочной теме. Если вы только начинаете работать с блочными темами, рекомендую посмотреть «Введение в разработку блочных тем». WordPress замечателен тем, что даже блочные темы позволяют нам использовать классическую иерархию шаблонов и функциональность. Мы воспользуемся этим, чтобы вывести метаданные записи. Мы можем добавить шаблонный файл single.php (полный исходный код) со следующей логикой:

single.php

get_header();

/* Начало цикла */
while ( have_posts() ) :
    the_post();

    get_template_part( 'template-parts/content/content-single' );

    // ACF — поля Flexible Content.
    $sections = get_field( 'qorp_post_sections' );

    if ( $sections ) :
        foreach ( $sections as $section ) :
            $template = str_replace( '_', '-', $section['acf_fc_layout'] );
            get_template_part( 'flexible-content/sections/' . $template, '', $section );
        endforeach;
    endif;

endwhile; // Конец цикла.

get_footer();

Основная часть этой логики ссылается на другие файлы шаблонов, но мы получаем наш qorp_post_sections, затем проходим по ним в цикле и подключаем отдельные файлы шаблонов в зависимости от того, какой макет Flexible Content возвращается.

Вот файлы шаблонов:

qorp-theme/flexible-content/sections/call-to-action.php
qorp-theme/flexible-content/sections/related-posts.php
qorp-theme/flexible-content/sections/trust-signals.php

Весь исходный код сайта Qorp опубликован на GitHub. Также вы можете посмотреть пример итогового результата на сайте Qorp. Не забудьте также посмотреть финальные поля (layouts.json) в qorp-plugin.

Поля Flexible Content в ACF дают вам возможность предлагать клиентам гибкость в работе с контентом, при этом не позволяя им слишком сильно уходить от того, как должен выглядеть сайт.

Ниже 👇 — видео, демонстрирующее редакторский процесс работы с этими полями Flexible Content.

Тип поля Flexible Content, пожалуй, один из самых мощных типов полей в ACF PRO. Мы уже видели, насколько он мощен, когда разбирали, как агентство Rareloop использует его для создания опыта конструктора страниц для своих клиентов.

Обновлено: 01.06.2026

Создание макетов с Flexible Content в теме WordPress

Обзор

Настройка нашего поля Flexible Content

Создание подполей внутри поля Flexible Content

Вывод полей Flexible Content в блочной теме

single.php

Смотрите также