Как создать динамические галереи в GeneratePress с подгрузкой изображений

Динамические галереи с подгрузкой изображений — отличное решение для сайтов на WordPress с темой GeneratePress, особенно если нужно показывать много фотографий без потери скорости загрузки страницы. В этой статье разберём, как создать такую галерею с плавной подгрузкой (lazy load) и бесконечной прокруткой, используя стандартные возможности GeneratePress и минимальное количество дополнительных плагинов.

Почему стоит использовать динамические галереи с подгрузкой

При загрузке большого количества изображений страница может тормозить, что негативно влияет на пользовательский опыт и SEO. Подгрузка изображений по мере прокрутки (lazy load) значительно снижает нагрузку на сервер и улучшает время отклика сайта. Кроме того, динамическая подгрузка позволяет создавать бесконечные галереи, которые удобно просматривать без перезагрузки страниц.

GeneratePress по умолчанию оптимизирован под скорость, но для реализации динамических галерей нам потребуется добавить немного кастомного кода и воспользоваться плагинами, которые дополнят функционал.

Создание кастомного типа записи для галерей

Для удобного управления изображениями создадим отдельный тип записи — "Галерея". Это позволит легко добавлять и редактировать галереи через админку.

<?php
// generatepress_ru_register_gallery_post_type
add_action('init', function() {
    $labels = [
        'name'               => 'Галереи',
        'singular_name'      => 'Галерея',
        'menu_name'          => 'Галереи',
        'add_new'            => 'Добавить новую',
        'add_new_item'       => 'Добавить новую галерею',
        'edit_item'          => 'Редактировать галерею',
        'new_item'           => 'Новая галерея',
        'view_item'          => 'Просмотреть галерею',
        'search_items'       => 'Поиск галерей',
        'not_found'          => 'Галерей не найдено',
        'not_found_in_trash' => 'В корзине галерей не найдено',
    ];

    $args = [
        'labels'             => $labels,
        'public'             => true,
        'has_archive'        => true,
        'supports'           => ['title', 'editor', 'thumbnail'],
        'show_in_rest'       => true,
        'menu_position'      => 20,
        'menu_icon'          => 'dashicons-format-gallery',
    ];

    register_post_type('generatepress_ru_gallery', $args);
});
?>

Этот код добавляем в файл functions.php дочерней темы GeneratePress или в отдельный плагин.

Использование Advanced Custom Fields для добавления изображений

Для удобного добавления нескольких изображений в галерею рекомендуем использовать плагин Advanced Custom Fields. Создайте поле типа "Галерея" и привяжите его к созданному типу записи "Галерея".

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

Вывод галереи с динамической подгрузкой в шаблоне GeneratePress

Создадим кастомный шаблон для вывода галереи с поддержкой подгрузки изображений по мере прокрутки (infinite scroll). Для подгрузки будем использовать плагин ABC Pagination, который отлично интегрируется с GeneratePress.

Шаг 1. Получение изображений галереи

<?php
// generatepress_ru_get_gallery_images
$images = get_field('gallery', get_the_ID()); // ACF галерея
if (!$images) {
    echo '<p>Изображения не найдены</p>';
    return;
}
?>

Шаг 2. Вывод изображений с lazy load

<div class="generatepress-ru-gallery">
    <ul>
        <?php foreach ($images as $image): ?>
            <li>
                <img loading="lazy" src="<?php echo esc_url($image['sizes']['medium']); ?>" alt="<?php echo esc_attr($image['alt']); ?>" />
            </li>
        <?php endforeach; ?>
    </ul>
</div>

Атрибут loading="lazy" обеспечивает нативную отложенную загрузку в современных браузерах.

Шаг 3. Подключение бесконечной прокрутки

Плагин ABC Pagination позволяет реализовать AJAX-подгрузку постов. Чтобы подгружать изображения галерей постранично, нужно разбить галерею на страницы или отдельные записи. Если галерей много, можно выводить их списком с подгрузкой. Если же нужно подгружать изображения внутри одной галереи, понадобится дополнительный JS-код, реализующий AJAX-запросы на бекенд.

Пример AJAX-подгрузки изображений в GeneratePress

Ниже пример упрощённого AJAX-запроса для подгрузки следующей порции изображений галереи:

jQuery(document).ready(function($) {
    var page = 1;
    var loading = false;

    function generatepress_ru_load_more_images() {
        if (loading) return;
        loading = true;
        page++;

        $.ajax({
            url: generatepress_ru_ajax.ajax_url,
            method: 'POST',
            data: {
                action: 'generatepress_ru_load_gallery_images',
                page: page,
                post_id: generatepress_ru_ajax.post_id
            },
            success: function(response) {
                if (response.success && response.data.html) {
                    $('.generatepress-ru-gallery ul').append(response.data.html);
                    loading = false;
                } else {
                    // Нет больше изображений
                    $(window).off('scroll', scrollHandler);
                }
            }
        });
    }

    function scrollHandler() {
        if ($(window).scrollTop() + $(window).height() >= $(document).height() - 100) {
            generatepress_ru_load_more_images();
        }
    }

    $(window).on('scroll', scrollHandler);
});

PHP-обработчик AJAX-запроса:

add_action('wp_ajax_generatepress_ru_load_gallery_images', 'generatepress_ru_load_gallery_images');
add_action('wp_ajax_nopriv_generatepress_ru_load_gallery_images', 'generatepress_ru_load_gallery_images');

function generatepress_ru_load_gallery_images() {
    $page = isset($_POST['page']) ? intval($_POST['page']) : 1;
    $post_id = isset($_POST['post_id']) ? intval($_POST['post_id']) : 0;
    $images_per_page = 10;

    $images = get_field('gallery', $post_id);
    if (!$images) {
        wp_send_json_error();
    }

    $offset = ($page - 1) * $images_per_page;
    $paged_images = array_slice($images, $offset, $images_per_page);

    if (empty($paged_images)) {
        wp_send_json_error();
    }

    ob_start();
    foreach ($paged_images as $image) {
        echo '<li><img loading="lazy" src="' . esc_url($image['sizes']['medium']) . '" alt="' . esc_attr($image['alt']) . '" /></li>';
    }
    $html = ob_get_clean();

    wp_send_json_success(['html' => $html]);
}

Дополнительные советы по оптимизации галерей в GeneratePress

• Используйте WebP — в GeneratePress уже описано, как добавить поддержку формата WebP для ускорения загрузки изображений.
• Минимизируйте размер изображений — загружайте изображения оптимального размера, используйте инструменты сжатия.
• Кэширование и CDN — подключите к сайту кэширование и CDN для быстрой доставки контента.
• Плагины оптимизации — например, Clearfy Pro поможет дополнительно ускорить загрузку и убрать лишний код.

Заключение

Создание динамических галерей с подгрузкой изображений в GeneratePress — это мощный способ улучшить UX и производительность сайта. Комбинируя кастомные типы записей, ACF для удобного добавления фото и плагин для пагинации или AJAX подгрузки, вы получите современную, быструю и удобную галерею, которая не будет тормозить даже при большом количестве изображений.