Связаться с нами

wordpress

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

17 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 который будет запускать карусель со следующим содержимым:

(function($) {
   $(document).ready(function() {      
        $(".owl-carousel").owlCarousel({
            loop:true,
            margin:10,
            nav:false,
            responsiveClass:true,
            responsive:{
                0:{
                    items:1
                },
                1000:{
                    items:2,
                    loop:false
                }
            }
        });
   });
})(jQuery);

Теперь нам осталось только создать функцию, которая соберет вместе все наши предыдущие победы:

function generate_content_my() {
    register_carousel_assets();    
    $output = create_youtube_carousel();
    return $output;    
}

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

Для вызова карусели в шаблоне просто вызовите функцию generate_content_my():

<?php generate_content_my(); ?>

Для вызова внутри поста или страницы добавьте в functions.php шорткод, который можно будет использовать

add_shortcode('add_youtube_videos_carousel_my', 'generate_content_my');

И далее внутри поста просто используйте шорткод:

[add_youtube_videos_carousel_my]

Спасибо за внимание, друзья!
Вот что у вас должно получиться в итоге:


Оставить комментарий

Your email address will not be published.