Что такое видео подсказки и зачем они нужны в WordPress
Видео подсказки — это небольшие всплывающие окна с видео, которые появляются при наведении мыши или клике на определённый элемент на сайте. Они отлично подходят для обучения пользователей, раскрытия дополнительной информации и увеличения вовлечённости посетителей. В контексте WordPress такие подсказки могут использоваться для демонстрации функционала продуктов, пояснения сложных терминов или показа кратких обучающих роликов.
Добавление видео подсказок помогает сделать сайт более интерактивным и современным. Особенно это актуально для сайтов, связанных с видеоконтентом, например, wpvideo.ru, где пользователи ожидают динамичные и удобные решения.
Реализовать видео подсказки можно разными способами: с помощью специализированных плагинов или самостоятельно через кастомный код. В этой статье рассмотрим оба варианта.
Реализация видео подсказок с помощью плагинов WordPress
Плагин Tooltip Pro для WordPress
Tooltip Pro — мощный плагин для создания многофункциональных подсказок, включая поддержку видео. Он позволяет вставлять видео из YouTube, Vimeo или загружать свои файлы прямо в подсказки. Для сайта с видеоконтентом это отличный вариант, так как плагин поддерживает автоматическую оптимизацию и адаптивность.
Основные возможности Tooltip Pro:
- Поддержка HTML и видео в подсказках
- Настраиваемые триггеры (hover, click)
- Отложенная загрузка видео для ускорения сайта
- Гибкие стили и позиционирование подсказок
Для установки просто найдите плагин в репозитории WordPress, активируйте и настройте через Настройки > Tooltip Pro. Затем создайте подсказку с видео, вставив ссылку на видео или HTML-код видео в поле содержимого подсказки.
Плагин WP Video Tooltip
Этот плагин специально разработан для создания подсказок с видео. Он позволяет легко привязывать видео к любым элементам на странице с помощью шорткодов. Например, чтобы добавить видео подсказку к тексту, используйте следующий шорткод:
[wp_video_tooltip video_url="https://www.youtube.com/watch?v=example"]Наведи на меня[/wp_video_tooltip]Плагин автоматически создаст всплывающее окно с видео при наведении на текст "Наведи на меня". Настройки плагина позволяют выбирать размер видео, задержку появления и другие параметры.
Кастомная реализация видео подсказок с помощью JavaScript и PHP
Создание шорткода для видео подсказки
Если вы хотите полностью контролировать функционал и избавиться от лишних плагинов, можно создать собственный шорткод с видео подсказкой. Ниже приведён пример, как это сделать в файле functions.php вашей темы или в отдельном плагине.
function wpvideo_add_video_tooltip_shortcode($atts, $content = null) {
$atts = shortcode_atts(
array(
'video_url' => '',
'width' => '320',
'height' => '180',
), $atts, 'wpvideo_tooltip'
);
if (empty($atts['video_url']) || empty($content)) {
return $content;
}
$id = 'wpvideo-tooltip-' . uniqid();
$html = '<span class="wpvideo-tooltip" id="' . esc_attr($id) . '" style="position: relative; cursor: pointer; border-bottom: 1px dotted #000;">' . esc_html($content);
$html .= '<div class="wpvideo-tooltip-content" style="display:none; position: absolute; top: 100%; left: 0; z-index: 999; border: 1px solid #ccc; background: #fff; padding: 5px;">';
$html .= '<iframe width="' . esc_attr($atts['width']) . '" height="' . esc_attr($atts['height']) . '" src="' . esc_url($atts['video_url']) . '" frameborder="0" allowfullscreen></iframe>';
$html .= '</div></span>';
return $html;
}
add_shortcode('wpvideo_tooltip', 'wpvideo_add_video_tooltip_shortcode');Этот шорткод создает текст с подчёркиванием, при наведении на который появляется блок с видео. Чтобы активировать появление подсказки, добавим скрипт:
function wpvideo_tooltip_scripts() {
?><script>
document.addEventListener('DOMContentLoaded', function() {
const tooltips = document.querySelectorAll('.wpvideo-tooltip');
tooltips.forEach(function(tooltip) {
const content = tooltip.querySelector('.wpvideo-tooltip-content');
tooltip.addEventListener('mouseenter', function() {
content.style.display = 'block';
});
tooltip.addEventListener('mouseleave', function() {
content.style.display = 'none';
});
});
});
</script>
<?php
}
add_action('wp_footer', 'wpvideo_tooltip_scripts');Использование шорткода
Пример использования в редакторе WordPress:
[wpvideo_tooltip video_url="https://www.youtube.com/embed/dQw4w9WgXcQ"]Наведи на меня[/wpvideo_tooltip]Обратите внимание, что для корректной работы iframe видео URL должен быть в формате https://www.youtube.com/embed/ID_видео.
Советы по оптимизации видео подсказок для быстродействия и удобства
Видео подсказки могут замедлять загрузку страницы, если видео загружаются сразу. Чтобы избежать этого, используйте отложенную загрузку (lazy loading) видео внутри подсказок. Для плагинов это обычно доступно в настройках. Для кастомного кода можно реализовать динамическую подгрузку iframe только при первом наведении:
- Вместо вставки iframe сразу, храните URL в атрибуте
data-video-url. - При наведении создавайте iframe динамически и вставляйте в DOM.
Также важно сделать подсказки адаптивными, чтобы они корректно отображались на мобильных устройствах. Используйте медиазапросы CSS и проверяйте поведение на разных экранах.
Пример доработки скрипта для динамической загрузки видео
function wpvideo_tooltip_scripts() {
?><script>
document.addEventListener('DOMContentLoaded', function() {
const tooltips = document.querySelectorAll('.wpvideo-tooltip');
tooltips.forEach(function(tooltip) {
const content = tooltip.querySelector('.wpvideo-tooltip-content');
const videoUrl = content.getAttribute('data-video-url');
let iframeLoaded = false;
tooltip.addEventListener('mouseenter', function() {
if (!iframeLoaded) {
const iframe = document.createElement('iframe');
iframe.width = content.getAttribute('data-width') || 320;
iframe.height = content.getAttribute('data-height') || 180;
iframe.src = videoUrl;
iframe.frameBorder = 0;
iframe.allowFullscreen = true;
content.appendChild(iframe);
iframeLoaded = true;
}
content.style.display = 'block';
});
tooltip.addEventListener('mouseleave', function() {
content.style.display = 'none';
});
});
});
</script>
<?php
}
add_action('wp_footer', 'wpvideo_tooltip_scripts');В этом случае в шорткод нужно немного изменить разметку, чтобы видео URL и размеры передавались в атрибуты data-*, а iframe создавался только при необходимости.
Заключение
Видео подсказки — полезный инструмент для улучшения взаимодействия с пользователями, особенно на видеотематических сайтах, таких как wpvideo.ru. Выбор между плагинами и кастомной реализацией зависит от ваших целей и навыков. Плагины позволяют быстро получить готовый функционал, а собственный код — гибко настроить и оптимизировать под свои задачи.
Если хотите расширить возможности сайта, рекомендуем обратить внимание на плагин OmniVideo от WPSHOP — он отлично подходит для интеграции видео с расширенными настройками и адаптивным плеером.