Обзор
Поле Clone помогает создавать повторно используемые компоненты структуры данных, которые можно добавлять в другие группы полей с помощью ACF PRO.
Оно позволяет создавать небольшие компонуемые группы полей и добавлять их в более крупные и сложные группы. Это незаменимый инструмент для организации и повторного использования полей при создании сложных сайтов.
В этом руководстве мы покажем, как использовать поле Clone для добавления параметров из существующей группы полей — в данном случае группы, настроенной для работы с кнопкой.
Кнопки — отличный пример ситуации, в которой следует использовать поле Clone. Вместо создания отдельной кнопки каждый раз, когда она нужна, вы создаёте одну группу полей со всеми параметрами кнопки, а затем используете поле Clone в различных контекстах, чтобы добавлять эти параметры из существующей группы полей.
Несмотря на название, поле Clone фактически не дублирует поля в базе данных. Вместо этого оно загружает и отображает выбранные поля во время выполнения: либо заменяет себя клонированными полями, либо отображает их как группу подполей. Посмотреть, как работает этот процесс, можно в видео ниже.
Создание первой кнопки
Для нашей простой кнопки мы создадим новую группу полей и зададим основные параметры кнопки:
- Поле Text, чтобы редакторы сайта понимали назначение кнопки.
- Поле URL, чтобы кнопка выполняла действие.
- Поле Radio Button, позволяющее редакторам сайта выбрать, должна ли кнопка отображаться залитой или контурной.
- Поле Color Picker, позволяющее редакторам сайта выбрать цвет из заданной палитры темы.
Назовём эту группу полей «Component: Button».
Использование поля Clone для кнопок
Теперь, когда мы создали группу полей компонента кнопки, можно добавлять её в любые другие группы полей с помощью поля Clone.
В предыдущем руководстве мы показали, как использовать поле Flexible Content для создания различных секций, которые редакторы могут добавлять в запись. В некоторых из этих секций использовались кнопки, но все они были уникальными и по-разному организованными в каждой области Flexible Content. Теперь мы можем вернуться к этим секциям и заменить отдельные поля кнопок новым компонентом кнопки с помощью поля Clone. Это помогает поддерживать порядок в группах полей и создаёт единый источник данных для постоянного редактирования и изменения компонента кнопки.
Если вы следовали тому руководству, откройте ранее созданные секции Flexible Content, удалите старые поля кнопок и замените их полем Clone.
Настройки поля Clone
Некоторым полям достаточно имени и метки, но поле Clone работает немного иначе. Сначала нужно указать, что именно оно должно клонировать. После выбора поля Clone можно использовать раскрывающийся список «Fields», чтобы найти группу полей Component: Button. Начните вводить название нужного поля — оно должно появиться в списке. Затем выберите остальные настройки, начиная с параметра «Display».
Seamless
Выбор «Seamless» полностью заменяет поле Clone содержащимися в нём полями. Чаще всего этот режим используется для повторного использования полей внутри полей Repeater или Flexible Content.
Group
Режим «Group» загружает само поле Clone и передаёт все значения в виде массива. Значения не сохраняются как массив — в таком виде они только отображаются. Значение каждого отдельного поля сохраняется как обычно.
Наиболее типичный вариант использования настройки «Group» — повторное использование существующих групп полей. При переключении на этот режим появляется селектор «Layout», в котором по умолчанию выбран вариант «Block». Он отображает поля с метками, выровненными по верхнему краю, но его можно изменить на «Table» или «Row», чтобы отображать выбранные поля в другом формате.
Добавление префиксов к меткам и именам полей
Включение параметра «Prefix Field Labels» изменяет метки, добавляя к ним метку поля Clone: например, «Button Component: Button Text», «Button Component: Button URL» и так далее. Это в первую очередь улучшает читаемость и помогает идентифицировать используемые поля, когда для поля Clone выбран режим «Seamless».
Параметр «Prefix Field Names» работает аналогично, но фактически изменяет имя поля, добавляя имя поля Clone к именам добавляемых полей. Именно имена полей используются для сохранения и загрузки значений, поэтому эта настройка очень полезна для предотвращения конфликтов данных при клонировании поля с именем, которое уже используется в группе. Чаще всего это требуется при использовании режима отображения «Group».
Конечная цель должна определять выбор настроек. В целом при использовании режима отображения «Seamless» лучше включать «Prefix Field Labels», а при выборе отображения «Group» — «Prefix Field Names». Мы собираемся использовать новое поле Clone кнопки внутри поля Repeater, поэтому выбрали «Seamless» и «Prefix Field Names».
Нажимаем Save Changes — и наша клонированная группа полей «Component: Button» готова.
Теперь можно создать поле Repeater с именем Buttons и вложить в него поле Clone, указывающее на нашу группу полей кнопки.
Это позволяет поддерживать более чистую кодовую базу (DRY, то есть «не повторяйся») и аккуратно организовать поля.
Добавление поля Clone в шаблоны
Ниже приведены примеры вспомогательных функций шаблона, которые можно использовать для вывода кнопок Repeater с вложенными полями Clone кнопки.
/**
* Использует поле ACF Component: Button для
* имитации блоков FSE Buttons.
*
* @param array $buttons Поля ACF.
* @return void
*/
function qorp_render_buttons( $buttons = array() ) {
// Убедимся, что $buttons — массив.
if ( empty( $buttons ) ) {
return;
}
?>
<div class="wp-block-buttons is-layout-flex">
<?php
foreach ( $buttons as $button ) {
qorp_render_button( $button );
}
?>
</div><!-- .wp-block-buttons .is-layout-flex -->
<?php
}
/**
* Использует поле ACF Component: Button для
* имитации блоков FSE Button.
*
* @param array $button Поля ACF.
* @return void
*/
function qorp_render_button( $button = array() ) {
if ( empty( $button ) ) {
return;
}
$button = $button['button'];
$button_text = $button['text'];
$button_url = $button['link'];
$button_class = $button['style'] ? 'is-style-' . $button['style'] : 'is-style-fill';
$button_color = $button['color'];
$button_styles = '';
if ( 'is-style-fill' === $button_class ) {
$button_styles .= 'style="background-color:' . $button_color . '"';
} else {
$button_styles .= 'style="color:' . $button_color . '"';
}
?>
<div class="wp-block-button <?php echo esc_attr( $button_class ); ?>">
<a class="wp-block-button__link wp-element-button" href="<?php echo esc_url( $button_url ); ?>" <?php echo $button_styles; // phpcs:ignore ?>><?php echo esc_html( $button_text ); ?></a>
</div>
<?php
}
Теперь в шаблонах можно просто передать данные поля Clone кнопки в qorp_render_buttons( $buttons );. Полные примеры кода доступны здесь:
- Product CTA: themes/qorp-theme/flexible-content/sections/product-cta.php
- Render Buttons: themes/qorp-theme/functions.php#L68
Отключение групп полей
Часто после создания группы полей и её клонирования в другую группу нужно отключить исходную группу, чтобы она не отображалась при редактировании записи. При этом группа полей продолжит отображаться во всех местах, где она клонируется, но не будет отображаться как отдельная самостоятельная группа.
Заключение
В этом руководстве мы сосредоточились на кнопках, но поле Clone отлично подходит для любых ситуаций, когда нужно создавать повторно используемые компоненты и добавлять их в несколько групп полей. Вместо того чтобы создавать их снова и снова, можно создать компонент один раз и клонировать его везде, где он нужен. Как отметил Джо Ламберт из Rareloop в нашем тематическом исследовании, такой компонентный подход делает рабочий процесс более плавным и быстрым и повышает удовлетворённость как клиентов, так и разработчиков.
«Например, клиент может захотеть немного изменить поле заголовка — скажем, добавить над ним небольшую строку текста. Мы не хотим писать такой код каждый раз, — говорит Джо. — Но благодаря полю ACF Clone можно просто написать нужную логику в одном месте и подключать её там, где требуется».
В этом руководстве рассмотрены основы использования поля Clone, но изучить можно ещё много интересного. Напишите нам в Twitter и расскажите, как вы используете поле Clone в своих проектах.
Чтобы узнать больше о том, как максимально эффективно использовать поля PRO, ознакомьтесь с нашими руководствами о том, как использовать поле Repeater, как создавать макеты с помощью поля Flexible Content и как использовать поле Gallery.
Обновлено: 30.09.2026