Как создать popup с поддержкой мультимедиа в WordPress

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

Выбор плагина для мультимедийных popup в WordPress

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

Popup Maker

Один из самых популярных плагинов для создания popup. Он поддерживает вставку любого HTML, что позволяет легко интегрировать видео и аудио через iframe, embed-код или HTML5-теги.

• В редакторе popup вставьте видео с YouTube или Vimeo через iframe.
• Для аудио можно использовать тег <audio> с указанием источника файла.

Преимущества: гибкость, бесплатная версия с широким функционалом, интеграция с формами.

WP Video Popup

Специализированный плагин для создания видеопopup. Позволяет показывать видео из YouTube, Vimeo и локальные видеофайлы в всплывающем окне с настройками автозапуска, зацикливания и адаптивности.

Минусы — меньше возможностей по кастомизации внешнего вида popup, чем в универсальных решениях.

Создание кастомного popup с мультимедиа через код

Если вы хотите максимально контролировать поведение и внешний вид popup, можно написать свой скрипт с использованием WordPress API и JavaScript.

Регистрация скриптов и стилей

Добавьте следующий код в файл functions.php вашей темы или в отдельный плагин:

function wppopup_enqueue_scripts() {
    wp_enqueue_style('wppopup-style', get_template_directory_uri() . '/css/wppopup.css');
    wp_enqueue_script('wppopup-script', get_template_directory_uri() . '/js/wppopup.js', array('jquery'), null, true);
}
add_action('wp_enqueue_scripts', 'wppopup_enqueue_scripts');

Создайте файлы wppopup.css и wppopup.js в папках css и js соответственно.

HTML-разметка popup

Добавьте в нужное место шаблона следующий HTML-код:

<div id="wppopup-media" class="wppopup-hidden">
    <div class="wppopup-overlay"></div>
    <div class="wppopup-content">
        <button class="wppopup-close">×</button>
        <video width="100%" controls>
            <source src="https://example.com/video.mp4" type="video/mp4">
            Ваш браузер не поддерживает видео.
        </video>
        <audio controls>
            <source src="https://example.com/audio.mp3" type="audio/mpeg">
            Ваш браузер не поддерживает аудио.
        </audio>
    </div>
</div>

Замените ссылки на видео и аудио на свои файлы или URL.

CSS для popup

.wppopup-hidden {
    display: none;
}
#wppopup-media {
    position: fixed;
    top: 0; left: 0; right: 0; bottom: 0;
    background: rgba(0,0,0,0.7);
    display: flex;
    justify-content: center;
    align-items: center;
    z-index: 10000;
}
.wppopup-content {
    background: #fff;
    padding: 20px;
    border-radius: 8px;
    max-width: 800px;
    width: 90%;
    position: relative;
}
.wppopup-close {
    position: absolute;
    top: 10px;
    right: 10px;
    background: transparent;
    border: none;
    font-size: 24px;
    cursor: pointer;
}

JavaScript для управления popup

jQuery(document).ready(function($) {
    function wppopup_show() {
        $('#wppopup-media').fadeIn();
    }
    function wppopup_hide() {
        $('#wppopup-media').fadeOut();
        // Остановить воспроизведение видео и аудио при закрытии
        $('#wppopup-media video, #wppopup-media audio').each(function() {
            this.pause();
            this.currentTime = 0;
        });
    }

    // Показываем popup через 5 секунд после загрузки страницы
    setTimeout(wppopup_show, 5000);

    // Закрытие по кнопке
    $('.wppopup-close, .wppopup-overlay').on('click', wppopup_hide);
});

Как интегрировать мультимедийный popup с плагином My Popup от WpShop

Плагин My Popup из каталога WpShop позволяет создавать разнообразные popup, включая с мультимедиа. Запустите плагин, создайте новый popup и в контенте вставьте iframe с видео или HTML5 аудио.

Для автоматического запуска через заданное время и условий показов используйте встроенные настройки плагина. Если нужны дополнительные возможности, можно добавить кастомный JavaScript в настройках popup.

Советы по оптимизации и UX мультимедийных popup

1. Не перегружайте пользователя. Частое появление popup с видео или аудио раздражает и приводит к оттоку.

2. Добавьте возможность легко закрыть окно — кнопка закрытия, клик по затемнённой области.

3. Автоматически приостанавливайте или останавливайте мультимедиа при закрытии popup, чтобы не было фонового звука.

4. Проверяйте адаптивность — popup должен корректно отображаться на мобильных устройствах.

5. Оптимизируйте размер видео и аудио файлов для быстрой загрузки и меньшего потребления трафика.

Заключение

Добавление мультимедийных popup в WordPress — эффективный способ повысить вовлечённость аудитории. Выбор между готовыми плагинами и кастомным кодом зависит от ваших требований к дизайну и функциональности. Использование плагинов, таких как Popup Maker или My Popup с WpShop, ускорит разработку и упростит управление. Если нужна максимальная гибкость — создайте собственный скрипт, как показано в примерах. Следуйте рекомендациям по UX, чтобы popup приносил пользу, а не раздражал посетителей.