Динамические видео плейлисты — отличный способ структурировать и представить видео контент на сайте WordPress, особенно если речь идет о большом количестве материалов, которые регулярно обновляются. В этой статье мы разберем, как создать такой плейлист, используя как готовые плагины, так и собственный код, чтобы обеспечить максимальную гибкость и удобство управления видео.
Почему нужен динамический видео плейлист в WordPress
Статичные видео галереи или плейлисты требуют ручного добавления и обновления каждого элемента, что неудобно при частом обновлении контента. Динамический плейлист автоматически подтягивает видео из определенной категории, метки или пользовательского типа записи, что существенно облегчает управление.
Кроме того, динамический подход позволяет:
- Автоматически обновлять список при добавлении новых видео;
- Фильтровать видео по категориям, тегам или другим параметрам;
- Интегрировать видео с различными плеерами и адаптировать под мобильные устройства.
Выбор плагина для динамического видео плейлиста
Существует несколько популярных плагинов, которые позволяют создавать динамические видео плейлисты без глубоких знаний программирования. Рассмотрим два наиболее подходящих:
1. WP Video Gallery
Этот плагин предлагает удобный интерфейс для создания видео плейлистов с поддержкой YouTube, Vimeo и локальных видеофайлов. Он позволяет создавать категории и автоматически выводить видео по категориям.
Особенности:
- Управление видео через кастомный тип записи;
- Шорткоды для вставки плейлистов на страницы и в записи;
- Автоматическое обновление плейлиста при добавлении видео в категорию.
2. Video Gallery – YouTube Playlist, Channel Gallery by YotuWP
Этот плагин ориентирован на интеграцию с YouTube, позволяя автоматически подтягивать плейлисты и каналы на ваш сайт WordPress.
Преимущества:
- Автоматическая синхронизация с YouTube плейлистами;
- Настраиваемый дизайн и адаптивность под мобильные устройства;
- Поддержка нескольких источников видео.
Создание собственного динамического видео плейлиста на PHP и WP_Query
Для большей кастомизации и контроля можно создать динамический видео плейлист самостоятельно, используя возможности WordPress и PHP. Для этого удобно использовать кастомный тип записи wpvideo_video и таксономии для категорий.
Регистрация кастомного типа записи и таксономии
В файле functions.php вашей темы добавьте следующий код для регистрации типа записи и таксономии:
function wpvideo_register_video_post_type() {
$labels = array(
'name' => 'Видео',
'singular_name' => 'Видео',
'add_new' => 'Добавить Видео',
'add_new_item' => 'Добавить новое видео',
'edit_item' => 'Редактировать видео',
'new_item' => 'Новое видео',
'all_items' => 'Все видео',
'view_item' => 'Просмотреть видео',
'search_items' => 'Поиск видео',
'not_found' => 'Видео не найдено',
'not_found_in_trash' => 'Видео не найдено в корзине',
);
$args = array(
'labels' => $labels,
'public' => true,
'has_archive' => true,
'supports' => array('title', 'editor', 'thumbnail', 'custom-fields'),
'rewrite' => array('slug' => 'video'),
'show_in_rest' => true,
);
register_post_type('wpvideo_video', $args);
register_taxonomy('wpvideo_category', 'wpvideo_video', array(
'label' => 'Категории видео',
'hierarchical' => true,
'show_in_rest' => true,
'rewrite' => array('slug' => 'video-category'),
));
}
add_action('init', 'wpvideo_register_video_post_type');Этот код создаст новый тип записи для видео и таксономию для удобной категоризации.
Вывод динамического видео плейлиста с помощью WP_Query
Теперь можно написать функцию, которая будет выводить плейлист из видео определенной категории.
function wpvideo_display_video_playlist($category_slug = '') {
$args = array(
'post_type' => 'wpvideo_video',
'posts_per_page' => 10,
'tax_query' => array(),
);
if (!empty($category_slug)) {
$args['tax_query'][] = array(
'taxonomy' => 'wpvideo_category',
'field' => 'slug',
'terms' => $category_slug,
);
}
$query = new WP_Query($args);
if ($query->have_posts()) {
echo '<div class="wpvideo-playlist">';
while ($query->have_posts()) {
$query->the_post();
$video_url = get_post_meta(get_the_ID(), 'video_url', true);
$title = get_the_title();
echo '<div class="wpvideo-item">';
echo '<h3>' . esc_html($title) . '</h3>';
if ($video_url) {
echo '<video controls width="320"><source src="' . esc_url($video_url) . '" type="video/mp4">Ваш браузер не поддерживает видео.</video>';
} else {
echo '<p>Видео не задано</p>';
}
echo '</div>';
}
echo '</div>';
wp_reset_postdata();
} else {
echo '<p>Видео не найдены.</p>';
}
}После добавления видео и указания ссылки на видеофайл в метаполе video_url, вызов функции wpvideo_display_video_playlist('my-category') выведет плейлист из видео категории с ярлыком my-category.
Оптимизация загрузки видео и UX для динамических плейлистов
При работе с видео на сайте важно оптимизировать загрузку, чтобы не перегружать сервер и не замедлять работу страницы. Вот несколько рекомендаций:
- Используйте ленивую загрузку (lazy loading) для видео — видео загружается только при прокрутке до него.
- Сжимайте видео перед загрузкой на сервер, чтобы уменьшить размер файлов.
- Рассмотрите использование CDN для хранения и доставки видео.
- Для кастомного плеера можно подключить популярные решения, например, Plyr или Video.js, которые поддерживают адаптивность и расширенные функции.
Пример реализации ленивой загрузки для видео в плейлисте
Ниже пример, как можно добавить ленивую загрузку в вывод видео:
function wpvideo_display_video_playlist_lazy($category_slug = '') {
$args = array(
'post_type' => 'wpvideo_video',
'posts_per_page' => 10,
'tax_query' => array(),
);
if (!empty($category_slug)) {
$args['tax_query'][] = array(
'taxonomy' => 'wpvideo_category',
'field' => 'slug',
'terms' => $category_slug,
);
}
$query = new WP_Query($args);
if ($query->have_posts()) {
echo '<div class="wpvideo-playlist">';
while ($query->have_posts()) {
$query->the_post();
$video_url = get_post_meta(get_the_ID(), 'video_url', true);
$title = get_the_title();
echo '<div class="wpvideo-item">';
echo '<h3>' . esc_html($title) . '</h3>';
if ($video_url) {
echo '<video controls width="320" preload="none"><source data-src="' . esc_url($video_url) . '" type="video/mp4">Ваш браузер не поддерживает видео.</video>';
} else {
echo '<p>Видео не задано</p>';
}
echo '</div>';
}
echo '</div>';
wp_reset_postdata();
} else {
echo '<p>Видео не найдены.</p>';
}
}
// Для ленивой загрузки нужно добавить JS, который подставит src при прокрутке:
function wpvideo_lazy_load_script() {
?>
<script>
document.addEventListener('DOMContentLoaded', function() {
const videos = document.querySelectorAll('video source[data-src]');
const lazyLoad = function() {
videos.forEach(video => {
if (video.getAttribute('src')) return;
const rect = video.getBoundingClientRect();
if (rect.top < window.innerHeight + 100) {
video.setAttribute('src', video.getAttribute('data-src'));
video.parentElement.load();
}
});
};
lazyLoad();
window.addEventListener('scroll', lazyLoad);
});
</script>
<?php
}
add_action('wp_footer', 'wpvideo_lazy_load_script');Этот скрипт отслеживает появление видео в области видимости и подставляет источник, что экономит трафик и ускоряет загрузку страниц.
Заключение по созданию динамических видео плейлистов на wpvideo.ru
Создание динамического видео плейлиста в WordPress — задача вполне выполнимая как с помощью готовых решений, так и на базе собственного кода. Использование кастомных типов записей и таксономий дает максимальную гибкость, а внедрение оптимизаций по загрузке улучшит пользовательский опыт. Выбирайте подходящий подход под свои нужды и не забывайте про безопасность и производительность сайта.