Создание динамической галереи ACF с поддержкой Lightbox в WordPress: Руководство для разработчиков

21 Окт 2024

142 Просмотров

1 минута чтения

Оглавление

Работа с Advanced Custom Fields (ACF) предоставляет разработчикам WordPress неограниченные возможности для кастомизации контента. В этом руководстве я покажу, как с помощью ACF можно создать динамическую галерею изображений, вывести её через редактор Гутенберга и добавить поддержку Lightbox для удобного просмотра.

Шаг 1: Регистрация кастомного блока для галереи

Для того чтобы вывести галерею через редактор Гутенберга, нам нужно зарегистрировать кастомный блок в WordPress.

1.1 Установка и настройка ACF Pro

Создание кастомных блоков доступно в ACF Pro, который позволяет интегрировать произвольные поля в блоки Гутенберга.

Установите и активируйте плагин ACF Pro.
Перейдите в файл functions.php вашей темы и добавьте следующий код для регистрации нового блока:

function register_acf_gallery_block() {
    if( function_exists('acf_register_block_type') ) {
        acf_register_block_type(array(
            'name'              => 'acf-gallery',
            'title'             => __('Галерея ACF'),
            'description'       => __('Блок для отображения галереи с использованием ACF.'),
            'render_callback'   => 'render_acf_gallery_block',
            'category'          => 'common',
            'icon'              => 'images-alt2',
            'keywords'          => array( 'acf', 'gallery', 'галерея' ),
        ));
    }
}
add_action('acf/init', 'register_acf_gallery_block');

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

Создание динамической галереи ACF с поддержкой Lightbox в WordPress: Руководство для разработчиков

1.2 Рендеринг блока

Добавим функцию для рендеринга блока, которая будет выводить галерею:

function render_acf_gallery_block( $block, $content = '', $is_preview = false ) {
    $images = get_field('rgallery'); // Получаем изображения из галереи ACF
    if( $images ): ?>
        <div class="acf-gallery-block">
            <?php foreach( $images as $image ): ?>
                <a href="<?php echo esc_url($image['url']); ?>" data-rel="lightbox-gallery">
                    <img src="<?php echo esc_url($image['sizes']['thumbnail']); ?>" alt="<?php echo esc_attr($image['alt']); ?>" />
                </a>
            <?php endforeach; ?>
        </div>
    <?php endif;
}

Шаг 2: Создание поля галереи в ACF

Теперь, когда блок готов, нам нужно добавить динамическое поле для галереи через интерфейс ACF.

Перейдите в админку WordPress и выберите Custom Fields → Add New.
Создайте новую группу полей и добавьте поле типа Gallery (Галерея), задав ему имя, например, rgallery.
В разделе Location (Местонахождение) укажите:

Block → is equal to → acf-gallery.

Теперь данное поле будет отображаться только для блока Галерея ACF.

Шаг 3: Использование блока в Гутенберге

Откройте или создайте новую запись.
В редакторе блоков Гутенберга выберите блок Галерея ACF.
Добавьте изображения в галерею через ACF.
Сохраните запись, и галерея будет автоматически выведена на фронтенде.

Шаг 4: Стилизация галереи

Для того чтобы галерея выглядела красиво и была адаптивной, добавим стили:

.acf-gallery-block {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(150px, 1fr));
    gap: 10px;
    justify-items: center;
}

.acf-gallery-block img {
    width: 100%;
    height: auto;
    border-radius: 8px;
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
    transition: transform 0.3s ease;
}

.acf-gallery-block img:hover {
    transform: scale(1.05);
}

Шаг 5: Подключение Lightbox

Для удобного просмотра изображений в галерее добавим поддержку Lightbox.

Установите и активируйте плагин Responsive Lightbox & Gallery.
Убедитесь, что Lightbox включен для изображений в настройках плагина.
Измените ссылки на изображения в блоке, добавив атрибут data-rel="lightbox-gallery".

Заключение

Теперь у вас есть гибкий инструмент для работы с динамической галереей изображений через ACF, интегрированной в редактор Гутенберга. Вы можете легко добавлять галереи в записи, а с помощью Lightbox — улучшить пользовательский опыт.

Создание кастомных блоков для ACF открывает массу возможностей для кастомизации WordPress. Если у вас возникнут вопросы или идеи по улучшению, дайте знать в комментариях!

Свежие записи

Категории