Плагин Advanced Custom Fields (ACF) — это мощный инструмент для добавления пользовательских полей в WordPress. Однако многие разработчики используют его только для простых полей, таких как текст или выбор из списка. В этой статье мы рассмотрим, как с помощью ACF создавать комплексные, многоуровневые формы, которые позволят расширить функционал любых типов записей и страниц, а также обеспечить удобный ввод данных для администраторов и редакторов сайта.
Почему стоит выбрать Advanced Custom Fields для сложных форм в WordPress
ACF предлагает удобный интерфейс для добавления различных типов полей — от простых текстовых до галерей и повторяющихся групп. Но главная сила плагина — это возможность создавать вложенные структуры, такие как повторяющиеся группы и гибкие контенты, что позволяет строить действительно сложные формы без необходимости писать много кода.
Кроме того, ACF отлично интегрируется с темами и плагинами, и вы можете легко вывести данные из полей в шаблонах сайта.
Если вам нужны расширенные возможности, стоит рассмотреть версию ACF Pro, которая поддерживает повторяющиеся поля, гибкий контент, галереи и многое другое.
Создание многоуровневой формы с помощью повторяющихся групп
Один из самых востребованных вариантов — создание повторяющихся блоков, например, для добавления списка сотрудников, проектов или FAQ с несколькими пунктами.
Для начала создайте новую группу полей в админке ACF и добавьте поле типа "Повторитель" (Repeater). Внутри него можно добавить любые дочерние поля, например:
- Текстовое поле - имя сотрудника
- Текстовое поле - должность
- Изображение - фото сотрудника
- Текстовое поле - контактный телефон
Так вы получите список сотрудников с возможностью добавлять любое количество элементов.
Вывод повторяющихся полей в шаблоне
Чтобы вывести данные из повторяющегося поля в шаблоне темы, используйте следующий код:
if( have_rows('wppuzzle_sotrudniki') ):
echo '<ul>';
while ( have_rows('wppuzzle_sotrudniki') ) : the_row();
$name = get_sub_field('wppuzzle_name');
$position = get_sub_field('wppuzzle_position');
$photo = get_sub_field('wppuzzle_photo');
$phone = get_sub_field('wppuzzle_phone');
echo '<li>';
if( $photo ) {
echo '<img src="' . esc_url($photo['url']) . '" alt="' . esc_attr($photo['alt']) . '" />';
}
echo '<strong>' . esc_html($name) . '</strong> - ' . esc_html($position) . '<br>';
echo 'Телефон: ' . esc_html($phone);
echo '</li>';
endwhile;
echo '</ul>';
else :
echo 'Сотрудники не добавлены.';
endif;В этом коде мы проверяем наличие строк в повторителе, затем выводим каждое поле с безопасной экранировкой.
Использование гибкого контента для создания динамических блоков
Гибкий контент (Flexible Content) позволяет создавать формы с разными типами блоков, которые редактор может добавлять в любом порядке. Это удобно для построения сложных страниц с разнообразными элементами: тексты, изображения, слайдеры, таблицы и т.д.
Создайте поле типа "Гибкий контент" и добавьте несколько макетов. Например:
- Текстовый блок с заголовком и параграфом
- Галерея изображений
- Видео-блок с ссылкой на видео
Каждый макет содержит собственный набор полей.
Пример вывода гибкого контента в шаблоне
if( have_rows('wppuzzle_flexible_content') ):
while ( have_rows('wppuzzle_flexible_content') ) : the_row();
if( get_row_layout() == 'text_block' ):
$title = get_sub_field('wppuzzle_title');
$content = get_sub_field('wppuzzle_content');
echo '<h2>' . esc_html($title) . '</h2>';
echo '<p>' . esc_html($content) . '</p>';
elseif( get_row_layout() == 'gallery_block' ):
$images = get_sub_field('wppuzzle_gallery');
if( $images ) {
echo '<div class="gallery">';
foreach( $images as $image ) {
echo '<img src="' . esc_url($image['url']) . '" alt="' . esc_attr($image['alt']) . '" />';
}
echo '</div>';
}
elseif( get_row_layout() == 'video_block' ):
$video_url = get_sub_field('wppuzzle_video_url');
echo '<div class="video-container"><iframe src="' . esc_url($video_url) . '" frameborder="0" allowfullscreen></iframe></div>';
endif;
endwhile;
else :
echo 'Контент отсутствует.';
endif;Такой подход позволяет создавать гибкие и удобные для редактора интерфейсы без необходимости программирования сложного бекенда.
Автоматизация и расширение функционала с помощью пользовательских функций
Для удобства работы с ACF вы можете создать собственные функции с префиксом wppuzzle_ для получения и вывода полей. Это улучшит читаемость кода и позволит повторно использовать решения.
Пример пользовательской функции для вывода повторяющихся сотрудников
function wppuzzle_display_sotrudniki() {
if( have_rows('wppuzzle_sotrudniki') ) {
echo '<ul>';
while ( have_rows('wppuzzle_sotrudniki') ) : the_row();
$name = get_sub_field('wppuzzle_name');
$position = get_sub_field('wppuzzle_position');
$photo = get_sub_field('wppuzzle_photo');
$phone = get_sub_field('wppuzzle_phone');
echo '<li>';
if( $photo ) {
echo '<img src="' . esc_url($photo['url']) . '" alt="' . esc_attr($photo['alt']) . '" />';
}
echo '<strong>' . esc_html($name) . '</strong> - ' . esc_html($position) . '<br>';
echo 'Телефон: ' . esc_html($phone);
echo '</li>';
endwhile;
echo '</ul>';
} else {
echo 'Сотрудники не добавлены.';
}
}Используйте эту функцию в шаблонах для компактного и чистого кода.
Поддержка и интеграция с другими плагинами
ACF легко интегрируется с популярными плагинами, например с WPRemark для отзывов или с темой Reboot для удобного вывода данных. Это позволяет создавать мощные кастомные решения без лишних затрат времени на разработку.
Заключение по теме комплексных форм с ACF
Использование Advanced Custom Fields для создания многоуровневых и гибких форм — это простой и эффективный способ расширить функционал WordPress-сайта. Комбинируя повторяющиеся поля и гибкий контент, вы можете создавать любые структуры данных под задачи клиента или проекта. Добавление собственных функций с префиксом wppuzzle_ поможет организовать код и упростить поддержку.
Если вы хотите повысить качество и удобство администрирования сайта, обязательно попробуйте эти подходы и расширьте свои навыки работы с ACF.