Как создать собственный шорткод для видео в WordPress

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

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

Собственный шорткод позволяет вам создавать единый формат вставки видео, который легко поддерживать и менять централизованно. Это особенно полезно для сайтов с большим количеством видео-контента, таких как omni-video.ru.

Кроме того, написание шорткода помогает оптимизировать загрузку страниц, внедрять lazy loading, добавлять пользовательские плейлисты и интегрироваться с внешними сервисами.

Основы создания шорткода для видео в WordPress

Для начала разберемся, как создать простой шорткод, который вставляет видео с заданным URL и дополнительными параметрами.

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

function omni_video_shortcode_video($atts) {
    $atts = shortcode_atts(array(
        'src' => '',
        'width' => '640',
        'height' => '360',
        'poster' => '',
        'autoplay' => 'false'
    ), $atts, 'omni_video');

    if (empty($atts['src'])) {
        return '<p>Ошибка: не указан URL видео.</p>';
    }

    $autoplay = ($atts['autoplay'] === 'true') ? 'autoplay' : '';

    $poster = $atts['poster'] ? 'poster="' . esc_attr($atts['poster']) . '"' : '';

    $html = '<video width="' . esc_attr($atts['width']) . '" height="' . esc_attr($atts['height']) . '" controls ' . $autoplay . ' ' . $poster . '>';
    $html .= '<source src="' . esc_url($atts['src']) . '" type="video/mp4">';
    $html .= 'Ваш браузер не поддерживает видео тег.'</video>;

    return $html;
}
add_shortcode('omni_video', 'omni_video_shortcode_video');

Этот шорткод можно использовать в постах и страницах так:

[omni_video src="https://example.com/video.mp4" width="800" height="450" poster="https://example.com/poster.jpg" autoplay="true"]

Вы получите HTML5 видео с заданными атрибутами. Такой код легко расширяется.

Расширение функционала: добавляем lazy loading и поддержку YouTube

Для улучшения производительности сайта с видео важно внедрить ленивую загрузку (lazy loading), которая откладывает загрузку видео, пока оно не понадобится пользователю.

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

Расширим функцию:

function omni_video_shortcode_video_extended($atts) {
    $atts = shortcode_atts(array(
        'src' => '',
        'width' => '640',
        'height' => '360',
        'poster' => '',
        'autoplay' => 'false',
        'lazy' => 'true'
    ), $atts, 'omni_video');

    if (empty($atts['src'])) {
        return '<p>Ошибка: не указан URL видео.</p>';
    }

    // Проверяем, это YouTube ссылка или локальный файл
    if (strpos($atts['src'], 'youtube.com') !== false || strpos($atts['src'], 'youtu.be') !== false) {
        // Преобразуем URL в embed формат
        preg_match('/(youtu\.be\/|v=)([\w-]+)/', $atts['src'], $matches);
        $video_id = $matches[2] ?? '';
        if (!$video_id) {
            return '<p>Ошибка: неверный URL YouTube.</p>';
        }

        $iframe_src = 'https://www.youtube.com/embed/' . esc_attr($video_id);

        $html = '<iframe width="' . esc_attr($atts['width']) . '" height="' . esc_attr($atts['height']) . '" src="' . $iframe_src . '" frameborder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture" allowfullscreen';
        if ($atts['lazy'] === 'true') {
            $html .= ' loading="lazy"';
        }
        $html .= '></iframe>';

        return $html;
    }

    // Для локального видео
    $autoplay = ($atts['autoplay'] === 'true') ? 'autoplay' : '';
    $poster = $atts['poster'] ? 'poster="' . esc_attr($atts['poster']) . '"' : '';
    $loading = ($atts['lazy'] === 'true') ? 'loading="lazy"' : '';

    $html = '<video width="' . esc_attr($atts['width']) . '" height="' . esc_attr($atts['height']) . '" controls ' . $autoplay . ' ' . $poster . ' ' . $loading . '>';
    $html .= '<source src="' . esc_url($atts['src']) . '" type="video/mp4">';
    $html .= 'Ваш браузер не поддерживает видео тег.'</video>;

    return $html;
}
remove_shortcode('omni_video');
add_shortcode('omni_video', 'omni_video_shortcode_video_extended');

Теперь вы можете использовать шорткод для YouTube видео или локальных файлов, с опцией lazy loading:

[omni_video src="https://youtu.be/dQw4w9WgXcQ" width="560" height="315" lazy="true"]

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

Если на вашем сайте уже используются плагины для видео, например, Video.js HTML5 Player или YouTube Embed Plus, можно интегрировать собственные шорткоды с их функционалом.

Например, для Video.js можно добавить необходимые классы и атрибуты, чтобы плеер применялся автоматически:

function omni_video_shortcode_with_videojs($atts) {
    $atts = shortcode_atts(array(
        'src' => '',
        'width' => '640',
        'height' => '360',
        'poster' => '',
        'autoplay' => 'false'
    ), $atts, 'omni_video');

    if (empty($atts['src'])) {
        return '<p>Ошибка: не указан URL видео.</p>';
    }

    $autoplay = ($atts['autoplay'] === 'true') ? 'autoplay' : '';
    $poster = $atts['poster'] ? 'poster="' . esc_attr($atts['poster']) . '"' : '';

    $html = '<video id="omni-videojs-player" class="video-js vjs-default-skin" width="' . esc_attr($atts['width']) . '" height="' . esc_attr($atts['height']) . '" controls ' . $autoplay . ' ' . $poster . '>';
    $html .= '<source src="' . esc_url($atts['src']) . '" type="video/mp4">';
    $html .= 'Ваш браузер не поддерживает видео тег.'</video>;

    return $html;
}
remove_shortcode('omni_video');
add_shortcode('omni_video', 'omni_video_shortcode_with_videojs');

После этого подключите скрипты и стили Video.js через functions.php или плагин, и видеоплеер будет работать с вашим шорткодом.

Отладка и советы по безопасности

При работе с собственными шорткодами важно учитывать безопасность. Все входящие данные должны быть обработаны с помощью функций esc_url и esc_attr, чтобы избежать XSS-уязвимостей.

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

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

Выводы и дальнейшее развитие шорткода

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

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