Ютуб плейлист в виде карусели видео на вашем wordpress сайте

от Евгений Мусиенко / 19.03.2018

43 0

Друзья, всем привет. Поговорим о том, как у вас на странице в удобном для вас месте показать плейлист ютуб видео так, что бы работало быстро и качественно.
первое, что нам необходимо сделать — добыть ваши видео с ютуба. Для этого мы может воспользоваться открытым апи ютуба а именно методом playlistItems
В первую очередь нам необходим ключ ютуб АПИ который вы можете получить в консоли гугл
Итак, пишем функцию, которая получает видео из плейлиста по ID айди интересующего вас плейлиста вы можете получить в из URL плейлиста. Например вот ссылка на Spring chess classic плейлиста канала посвященного шахматам
https://www.youtube.com/watch?v=fisWrVHGQOE&list=PLVWaFpMwtaGgr5tQXE1dLEaL_n2wj4_ia id плейлиста это выделенная часть ссылки после &list.
Что бы получить информацию о видео создайте новую функцию в functions.php:

function get_youtube_videos_my(){
$key = "ваш_апи_ключ";
$playlistID = "id_плейлиста";
$quantity = 30;

$request = wp_remote_get( 'https://www.googleapis.com/youtube/v3/playlistItems?key='.$key.'&playlistId='.$playlistID.'&part=snippet,id&type=video&order=date&maxResults='.$quantity ); // запрашиваем у Гугла информацию о плейлисте в виде JSON

if( is_wp_error( $request ) ) {
return false; // не идем дальше если получили ошибку
}
$data = json_decode(wp_remote_retrieve_body( $request )); // декодим JSON строку обратно в объект

return($data); // отдаем объект
}

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

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

function create_youtube_carousel(){
$data = get_youtube_videos_my(); // получаем объект из функции, которую мы создали выше
if( ! empty( $data ) ) {
$result .= "<div class='carouselVideo owl-carousel owl-theme' id='owlVideoCarousel'>"; // создаем блок который будет содержать карусель
foreach( $data->items as $item ) { // для каждого видео плейлиста создаем блок videoSingle с картинкой и подписью к видео
$result .= "<div class='videoSingle'>";
$result .= '<img class="videoClickable" alt="test" src="'.$item->snippet->thumbnails->medium->url.'" data-vid="'.$item->snippet->resourceId->videoId.'">';
$result .= '<p>'.$item->snippet->title.'</p>';
$result .= "</div>";
};
$result .= "</div>";
}
return $result; // результатом выполнения этой фукнции будет HTML разметка для нашей будущей карусели.
}

На этом этапе нам нужно подключить скрипты и стили карусели. Я буду использовать owl карусель. Вы можете использовать ту карусель, которая вам нравится но не забудьте изменить разметку в предыдущей функции что бы она соответствовала требования к HTML той карусели, которую вы выберите.
Первое, что вам нужно сделать это скачать файлы карусели и поместить в папку assets в папке вашей активной темы. Если папки assets нет ее нужно создать или поместить файлы карусели в любое другое место, но не забудьте изменить путь к файлам в следующей функции.
Далее создаем функцию в functions.php, которая подключает скрипты и стили owl карусели:

function register_carousel_assets() {
wp_enqueue_style( 'owl-carousel-style',
get_stylesheet_directory_uri() . '/assets/owl-carousel/assets/owl.carousel.min.css', // поместите файлы карусели в папку assets в папке активной темы или детской темы
array( 'your-theme-style' ) // указываем в зависимости стили вашей темы если хотите что бы стили карусели грузились после или оставьте пустым вот так: array()
);
wp_enqueue_style( 'owl-carousel-theme-style',
get_stylesheet_directory_uri() . '/assets/owl-carousel/assets/owl.theme.default.min.css',
array( 'your-theme-style' ) // указываем в зависимости стили вашей темы если хотите что бы стили карусели грузились после или оставьте пустым вот так: array()
);
wp_register_script(
'owl-my-js',
get_stylesheet_directory_uri() . '/assets/owl-carousel/owl.carousel.min.js',
array( 'jquery' )
);
wp_register_script(
'youtube-carousel-js',
get_stylesheet_directory_uri() . '/assets/youtubecarousel.js', // создайте файл youtubecarousel.js в папке assets активной темы. В этом файле будет JS код карусели
array( 'jquery' ),'1', true
);
wp_enqueue_script( 'owl-my-js' );
wp_enqueue_script( 'youtube-carousel-js' );
}

Далее в папке assets вам нужно будет создать файл youtubecarousel.js который будет запускать карусель со следующим содержимым: