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

Автор: Юлия Игнатьева | Опубликовано: 08.11.2025

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

Почему стоит создавать видео галерею через шорткоды в WordPress

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

Кроме того, создание своей системы вывода видео галереи помогает избежать проблем с производительностью и излишней зависимости от сторонних плагинов, которые могут конфликтовать с другими элементами сайта.

Если же вы хотите использовать готовые решения, мы рассмотрим несколько популярных плагинов, которые можно дополнительно настроить.

Создаем шорткод для видео галереи: пошаговое руководство

1. Регистрация кастомного шорткода

Для начала нам нужно зарегистрировать шорткод в файле functions.php вашей темы или в отдельном плагине. Ниже пример функции, которая выводит видео галерею из списка URL видео:

function wpvideo_create_video_gallery_shortcode($atts) {
    $atts = shortcode_atts(array(
        'videos' => '', // Список URL видео через запятую
        'width' => '320',
        'height' => '240'
    ), $atts, 'wpvideo_gallery');

    if (empty($atts['videos'])) {
        return '<p>Видео не найдены.</p>';
    }

    $videos = explode(',', $atts['videos']);
    $output = '<div class="wpvideo-gallery" style="display:flex; flex-wrap: wrap; gap: 15px;">';

    foreach ($videos as $video_url) {
        $video_url = trim($video_url);
        $output .= '<video width="' . esc_attr($atts['width']) . '" height="' . esc_attr($atts['height']) . '" controls><source src="' . esc_url($video_url) . '" type="video/mp4">Ваш браузер не поддерживает видео.</video>';
    }

    $output .= '</div>';
    return $output;
}
add_shortcode('wpvideo_gallery', 'wpvideo_create_video_gallery_shortcode');

Теперь, чтобы вывести видео галерею, в редакторе достаточно вставить:

[wpvideo_gallery videos="https://example.com/video1.mp4, https://example.com/video2.mp4" width="480" height="270"]

Это выведет два видео с заданными размерами рядом друг с другом.

2. Добавляем стили для адаптивности

Чтобы галерея выглядела красиво на мобильных устройствах, добавим CSS:

function wpvideo_enqueue_gallery_styles() {
    wp_add_inline_style('wp-block-library', '
        .wpvideo-gallery video {
            max-width: 100%;
            height: auto;
            border-radius: 8px;
            box-shadow: 0 2px 8px rgba(0,0,0,0.2);
        }
        @media (max-width: 600px) {
            .wpvideo-gallery {
                flex-direction: column;
            }
        }
    ');
}
add_action('wp_enqueue_scripts', 'wpvideo_enqueue_gallery_styles');

Этот код добавит плавную адаптацию и небольшой стиль для видео.

Обзор полезных плагинов для видео галерей в WordPress

1. Video Gallery – YouTube Gallery

Если ваш сайт в основном работает с видео с YouTube, этот плагин позволяет создавать красивые галереи с множеством настроек: от сеток до каруселей. Поддерживает шорткоды и виджеты, что удобно для размещения видео в разных местах сайта.

2. WP Video Lightbox

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

3. FV Flowplayer Video Player

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

Пример расширения шорткода: добавляем ленивую загрузку видео

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

function wpvideo_create_video_gallery_lazy_shortcode($atts) {
    $atts = shortcode_atts(array(
        'videos' => '',
        'width' => '320',
        'height' => '240'
    ), $atts, 'wpvideo_gallery_lazy');

    if (empty($atts['videos'])) {
        return '<p>Видео не найдены.</p>';
    }

    $videos = explode(',', $atts['videos']);
    $output = '<div class="wpvideo-gallery-lazy" style="display:flex; flex-wrap: wrap; gap: 15px;">';

    foreach ($videos as $index => $video_url) {
        $video_url = trim($video_url);
        $output .= '<div class="wpvideo-lazy-wrapper" style="position: relative; width: ' . esc_attr($atts['width']) . 'px; height: ' . esc_attr($atts['height']) . 'px; cursor: pointer; background: #000;" data-video-src="' . esc_url($video_url) . '">';
        $output .= '<div style="position:absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); color: #fff; font-size: 48px;">►</div>';
        $output .= '</div>';
    }

    $output .= '</div>';

    $output .= '<script>
    document.addEventListener("DOMContentLoaded", function() {
        const wrappers = document.querySelectorAll(".wpvideo-lazy-wrapper");
        wrappers.forEach(wrapper => {
            wrapper.addEventListener("click", function() {
                if (this.querySelector("video")) return; // Видео уже загружено
                const src = this.getAttribute("data-video-src");
                const video = document.createElement("video");
                video.setAttribute("width", this.style.width.replace("px", ""));
                video.setAttribute("height", this.style.height.replace("px", ""));
                video.setAttribute("controls", "");
                const source = document.createElement("source");
                source.src = src;
                source.type = "video/mp4";
                video.appendChild(source);
                this.innerHTML = "";
                this.appendChild(video);
                video.play();
            });
        });
    });
    </script>';

    return $output;
}
add_shortcode('wpvideo_gallery_lazy', 'wpvideo_create_video_gallery_lazy_shortcode');

Теперь видео загружается только при нажатии на превью, что существенно снижает нагрузку на страницу.