Обзор
Поле Gallery дает вам гибкость для отображения изображений в самых разных вариантах, таких как карусели, слайдеры и лайтбоксы. Однако главная сила поля Gallery, возможно, в том, что оно позволяет предложить авторам контента: простой интерфейс для загрузки, упорядочивания и маркировки изображений, с заданными вами правилами, которые гарантируют, что каждое изображение всегда соответствует требованиям и редакционным стандартам.
В этом руководстве мы покажем, как зарегистрировать и настроить поля Gallery, обеспечить соответствие изображениям по спецификациям и редакционному процессу с помощью правил, управляющих проверкой, размещением и отображением, а также добавить эти поля в шаблоны. Мы также рассмотрим, как использовать ThickBox WordPress вместе с полями Gallery, чтобы еще больше улучшить процесс редактирования контента.
Поле Gallery — одна из возможностей ACF PRO, который также включает другие сложные типы полей, поддержку страницы настроек и ACF Blocks.
Регистрация полей и настройка поля
Поле Gallery — это простой способ прикрепить набор изображений и отобразить их как вам нужно. Обычно это отлично подходит для вывода галереи на фронтенде вашего сайта.
Чтобы зарегистрировать поле Gallery, почти ничего делать не нужно. Просто создайте новую группу полей Gallery в ACF, добавьте поле Gallery, задайте метку поля, выберите формат возврата и решите, должны ли изображения загружаться в запись или их можно брать из всей медиабиблиотеки.
Видео ниже показывает весь процесс создания поля Gallery, включая заполнение его контентом, а также файлы шаблона, которые используются для его вывода.
Как показывает видео, поле Gallery — отличный способ быстро и легко создавать впечатляющие подборки изображений в самых разных форматах. Оно практически гарантированно сэкономит вам время, но главное преимущество поля Gallery, возможно, в том, что оно позволяет предложить владельцам сайта и редакторам.
Обеспечение редакционного качества и стандартов
Первоначальная настройка дает вам лишь базовую галерею. Если задать ограничения проверки, например разрешенные типы файлов и минимальные и максимальные значения для размеров и количества изображений, вы получите гораздо больший контроль над тем, какие изображения действительно используются.
Параметры проверки — как и похожие настройки в поле Image — невероятно полезны для соблюдения редакционных стандартов. У многих сайтов есть редакционная политика, касающаяся размера изображений, количества изображений, разрешенных в галерее, и так далее. Если настроить это на вкладке проверки, такие правила будут применяться автоматически.
Владельцам сайтов и редакторам контента это нравится. Владелец сайта может установить политику, но следить за ее соблюдением должны редакторы контента. Правильно настроенное поле Gallery в ACF снимает эту нагрузку и гарантирует, что они никогда не загрузят фотографии, которые не соответствуют требованиям.
У небольших клиентов — или у тех, кто меньше ориентирован на контент, — может вообще не быть редакционных правил в отношении изображений. Покажите им преимущества, например единообразный размер и качество изображений, и дайте понять, что вы можете обеспечить соблюдение любых стандартов, которые они решат установить… с небольшой помощью ACF PRO.
Местоположение и отображение
Раздел настроек в редакторе группы полей позволяет задавать правила, которые управляют всей группой полей. Типы правил, которые можно задать, одинаковы для любой группы полей, независимо от используемых полей: правила размещения, отображение и настройки группы. При правильной конфигурации эти параметры помогают соблюдать редакционные стандарты и позволяют редакторам контента сосредоточиться на выборе лучших изображений.
Например, вы можете легко задать правило размещения, чтобы показывать группу полей только тогда, когда тип записи равен «Gallery» — пользовательскому типу записи, созданному специально для фотогалерей. В этом случае у редактора контента не будет возможности добавить фотогалерею в запись, которая этого не допускает, потому что группа полей просто не будет отображаться.
Редактирование и ввод данных
Поле Gallery еще больше улучшает работу редакторов контента, потому что позволяет очень просто загружать изображения, располагать их в нужном порядке и назначать им правильные метаданные.
Когда редактор контента нажимает Добавить в галерею, открывается модальное окно с выбором между загрузкой новых изображений и выбором существующих из медиабиблиотеки. Как уже упоминалось ранее, поле Gallery можно настроить так, чтобы галереи можно было создавать только из изображений, загруженных в запись.
После того как редактор контента выбрал нужные изображения, ACF проверяет их по правилам валидации, которые вы настроили при создании поля Gallery. Все изображения, которые не соответствуют спецификациям, будут отклонены, а уведомление покажет, почему это изображение нельзя использовать.
Наконец, редактор контента нажимает Выбрать, чтобы закрыть модальное окно и вернуться к экрану редактирования записи. После этого он может вручную переставлять фотографии, перетаскивая их мышью, или использовать массовые действия для сортировки по дате, заголовку и т. д. Редактор может нажать на любое изображение, чтобы изменить его alt-текст, описание и подпись.
Логика вывода для шаблонов
К этому моменту на стороне админки уже все настроено, чтобы наши редакторы контента могли легко создавать впечатляющие галереи изображений, соответствующие стандартам владельца сайта и требованиям к изображениям. На фронтенде они не появятся, пока мы не создадим новый шаблон или не изменим существующий.
Мы включили пример файла page-gallery.php на GitHub, который отображает поле Gallery, созданное для нашей вымышленной технологической компании Qorp.
Разберем некоторые фрагменты этого файла. Начнем с обычного набора служебных элементов, которые находятся в верхней части файла шаблона WordPress.
<?php
/**
* Страница: Gallery
*
* @package WordPress
* @subpackage QORP
*/
get_header();
Почти все остальное, что нам нужно добавить, находится внутри Цикл. Мы используем get_template_part, чтобы вызвать content-single.php и взять его за основу наших записей. Затем мы используем тег style, чтобы задать цвета, отступы и другую информацию для отображения.
/* Запускаем Цикл */
while ( have_posts() ) :
the_post();
get_template_part( 'template-parts/content/content-single' );
?>
<style>
.acf-gallery {
display:grid;
grid-gap:1.5rem;
grid-template-columns:repeat(auto-fill, minmax(8ch, 1fr));
margin:var(--wp--preset--spacing--lg) auto;
max-width:var(--wp--style--global--content-size);
}
.acf-gallery a img {
display: block;
filter: grayscale(100%);
height: auto;
transition: filter 0.7s ease;
width: 100%;
}
.acf-gallery a:hover img {
filter: grayscale(0);
}
</style>
Теперь нам нужно подключить логику, которая будет получать и выводить метаданные записи. Мы можем использовать функцию get_field() от ACF для получения данных поля, пройтись по каждому полю и взять его нужные атрибуты ($image[‘ID’], $image[‘url’]), чтобы добавить их в итоговую разметку.
<div class="acf-gallery">
<?php
// ACF — поля Gallery.
$images = get_field( 'gallery' );
if ( $images ) :
// Получаем каждое изображение.
foreach ( $images as $image ) :
$image_id = $image['ID'];
$image_src = $image['url'];
$image_caption = $image['caption'];
?>
<a href="<?php echo esc_url( $image_src ); ?>" title="<?php echo esc_html( $image_caption ); ?>" class="thickbox">
<?php echo wp_get_attachment_image( $image_id, 'thumbnail' ); ?>
</a>
<?php
endforeach;
endif;
?>
</div><!-- .acf-gallery -->
Наконец, наш шаблон завершает Цикл и подключает подвал для нашей страницы.
<?php
endwhile; // Конец цикла.
get_footer();
Использование WordPress ThickBox с полями Gallery
Для простоты мы воспользуемся существующей зависимостью ThickBox из ядра WordPress, чтобы предоставить пользователям модальное всплывающее окно. Однако возможности вывода изображений практически безграничны. Если вы предпочитаете слайдер, посмотрите Swiper.js.
Добавьте приведенный ниже блок кода в файл functions.php вашей темы, если хотите использовать ThickBox WordPress вместе с полями Gallery. При желании вы можете подключить и другую стороннюю библиотеку (например, Swiper.js), заменив вызовы wp_enqueue_script() и wp_enqueue_style() на предпочитаемую вами библиотеку для отображения.
Это код, который используется для создания модального окна, показанного в видео-демонстрации. Полный файл можно посмотреть на GitHub и как создавать макеты с помощью поля Flexible Content, воспринимайте это руководство как отправную точку для работы с полем Gallery, а не как исчерпывающее руководство. Это связано с тем, что любое поле в ACF — включая поле Gallery и другие поля в ACF PRO — можно комбинировать практически бесконечным количеством способов.
Не стесняйтесь написать нам в Twitter и рассказать, как вы использовали поле Gallery. Мы уверены, что вы нас удивите.
Обновлено: 01.06.2026