Как создать динамическую галерею в WordPress с помощью шорткода

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

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

Стандартные галереи WordPress ограничены по функционалу и не всегда подходят для кастомных задач. Динамическая галерея:

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

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

Создаем базовый шорткод динамической галереи

Для начала создадим простой шорткод, который выводит все картинки из заданной папки в wp-content/uploads/my-gallery. Код добавляем в файл functions.php вашей темы или в отдельный плагин.

function wordpressy_dynamic_gallery_shortcode($atts) {
    $atts = shortcode_atts(array(
        'folder' => 'my-gallery',
        'columns' => 3
    ), $atts, 'wpdy_gallery');

    $upload_dir = wp_upload_dir();
    $gallery_path = trailingslashit($upload_dir['basedir']) . $atts['folder'];
    $gallery_url = trailingslashit($upload_dir['baseurl']) . $atts['folder'];

    if (!is_dir($gallery_path)) {
        return '<p>Папка галереи не найдена.</p>';
    }

    $images = array();
    $files = scandir($gallery_path);
    foreach ($files as $file) {
        if (preg_match('/\.(jpg|jpeg|png|gif)$/i', $file)) {
            $images[] = $gallery_url . '/' . $file;
        }
    }

    if (empty($images)) {
        return '<p>Изображения не найдены.</p>';
    }

    $output = '<div class="wpdy-gallery" style="display: grid; grid-template-columns: repeat(' . intval($atts['columns']) . ', 1fr); gap: 10px;">';
    foreach ($images as $img_url) {
        $output .= '<div class="wpdy-gallery-item"><img src="' . esc_url($img_url) . '" alt="" style="width: 100%; height: auto;" /></div>';
    }
    $output .= '</div>';

    return $output;
}
add_shortcode('wpdy_gallery', 'wordpressy_dynamic_gallery_shortcode');

После добавления этого кода вы сможете вставлять галерею на любую страницу или запись с помощью шорткода:

[wpdy_gallery folder="my-gallery" columns="4"]

Где folder — имя папки внутри uploads с картинками, а columns — количество колонок в сетке.

Добавляем поддержку категорий и фильтров

Чтобы сделать галерею более продвинутой, можно использовать стандартный тип записей WordPress — вложения (attachments) с определенной категорией или меткой. Это позволит управлять изображениями через админку, группировать их и применять фильтры.

Создаем шорткод с фильтрацией по категории

Добавим шорткод, который выводит изображения из медиа-библиотеки, прикрепленные к категории галереи.

function wordpressy_dynamic_gallery_by_category_shortcode($atts) {
    $atts = shortcode_atts(array(
        'category' => '',
        'columns' => 3
    ), $atts, 'wpdy_gallery_cat');

    if (empty($atts['category'])) {
        return '<p>Укажите категорию для галереи.</p>';
    }

    $args = array(
        'post_type' => 'attachment',
        'post_mime_type' => 'image',
        'posts_per_page' => -1,
        'tax_query' => array(
            array(
                'taxonomy' => 'category',
                'field' => 'slug',
                'terms' => sanitize_text_field($atts['category'])
            )
        )
    );

    $query = new WP_Query($args);
    if (!$query->have_posts()) {
        return '<p>Изображения в категории не найдены.</p>';
    }

    $output = '<div class="wpdy-gallery" style="display: grid; grid-template-columns: repeat(' . intval($atts['columns']) . ', 1fr); gap: 10px;">';
    while ($query->have_posts()) {
        $query->the_post();
        $img_url = wp_get_attachment_url(get_the_ID());
        $output .= '<div class="wpdy-gallery-item"><img src="' . esc_url($img_url) . '" alt="" style="width: 100%; height: auto;" /></div>';
    }
    $output .= '</div>';
    wp_reset_postdata();

    return $output;
}
add_shortcode('wpdy_gallery_cat', 'wordpressy_dynamic_gallery_by_category_shortcode');

Используйте шорткод так:

[wpdy_gallery_cat category="portfolio" columns="4"]

Для работы с этой галереей необходимо назначать изображениям категории через плагин, который позволяет добавлять таксономии к вложениям, например, Clearfy Pro.

Оптимизация загрузки и Lazy Load

Чтобы галерея не замедляла загрузку страницы, важно добавить поддержку отложенной загрузки изображений (Lazy Load). В WordPress 5.5+ это реализовано через атрибут loading="lazy".

Изменим вывод изображения в нашем шорткоде:

$output .= '<div class="wpdy-gallery-item"><img src="' . esc_url($img_url) . '" alt="" loading="lazy" style="width: 100%; height: auto;" /></div>';

Lazy Load улучшит скорость загрузки и положительно скажется на SEO.

Делаем галерею адаптивной с CSS Grid и плавным увеличением изображений

Для приятного отображения на любых устройствах используйте CSS Grid с auto-fit и minmax:

.wpdy-gallery {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
    gap: 15px;
}
.wpdy-gallery-item img {
    width: 100%;
    height: auto;
    border-radius: 8px;
    transition: transform 0.3s ease;
}
.wpdy-gallery-item img:hover {
    transform: scale(1.05);
}

Добавьте этот CSS в файл стилей темы или через кастомный CSS в админке.

Интеграция с плагинами для улучшения галереи

Для расширенного функционала можно использовать плагины, например:

• WPStories — создавайте интерактивные истории из ваших изображений.
• ABC Pagination — добавьте постраничную навигацию для галерей с большим количеством изображений.

Заключение

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

Используйте приведенные примеры кода как основу для своих проектов и адаптируйте под свои задачи.