Ютуб плейлист в виде карусели видео на вашем wordpress сайте
Друзья, всем привет. Поговорим о том, как у вас на странице в удобном для вас месте показать плейлист ютуб видео так, что бы работало быстро и качественно.
первое, что нам необходимо сделать — добыть ваши видео с ютуба. Для этого мы может воспользоваться открытым апи ютуба а именно методом playlistItems
В первую очередь нам необходим ключ ютуб АПИ который вы можете получить в консоли гугл
Итак, пишем функцию, которая получает видео из плейлиста по ID айди интересующего вас плейлиста вы можете получить в из URL плейлиста. Например вот ссылка на Spring chess classic плейлиста канала посвященного шахматам
https://www.youtube.com/watch?v=fisWrVHGQOE&list=PLVWaFpMwtaGgr5tQXE1dLEaL_n2wj4_ia id плейлиста это выделенная часть ссылки после &list.
Что бы получить информацию о видео создайте новую функцию в functions.php:
$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); // отдаем объект
}
результатом выполнения этой функции будет объект, содержащий в себе все данные о видео что-то вроде этого:
Вы уже можете использовать эти данные для того, что бы вывести видео в формате, который вам понравился бы. Ну а мы пойдем дальше и выведем видео в формате, который вам нужен, ну а мы пойдем дальше и отформатируем полученную информацию в пригодный для карусели вид
$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 карусели:
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 который будет запускать карусель со следующим содержимым:
$(document).ready(function() {
$(".owl-carousel").owlCarousel({
loop:true,
margin:10,
nav:false,
responsiveClass:true,
responsive:{
0:{
items:1
},
1000:{
items:2,
loop:false
}
}
});
});
})(jQuery);
Теперь нам осталось только создать функцию, которая соберет вместе все наши предыдущие победы:
register_carousel_assets();
$output = create_youtube_carousel();
return $output;
}
Результатом выполнения этой функции будет карусель, которая выглядит в точности как эта:
2018 Spring Chess Classic: Round 1
2018 Spring Chess Classic: Round 2
2018 Spring Chess Classic: Round 3
2018 Spring Chess Classic: Round 4
2018 Spring Chess Classic: Round 5
2018 Spring Chess Classic: Round 6
2018 Spring Chess Classic: Round 7
2018 Spring Chess Classic: Round 8
2018 Spring Chess Classic: Round 9
Для вызова карусели в шаблоне просто вызовите функцию generate_content_my():
Для вызова внутри поста или страницы добавьте в functions.php шорткод, который можно будет использовать
И далее внутри поста просто используйте шорткод:
Спасибо за внимание, друзья!
Вот что у вас должно получиться в итоге:
2018 Spring Chess Classic: Round 1
2018 Spring Chess Classic: Round 2
2018 Spring Chess Classic: Round 3
2018 Spring Chess Classic: Round 4
2018 Spring Chess Classic: Round 5
2018 Spring Chess Classic: Round 6
2018 Spring Chess Classic: Round 7
2018 Spring Chess Classic: Round 8
2018 Spring Chess Classic: Round 9