Парсер YouTube видео на WordPress
Опубликовано: 01.09.2018
Для интеграции YouTube видео на WordPress имеется много плагинов, которые доступны из репозитория WordPress.org или из других платных мест. Но можно пойти в обход, использовав функцию fetch_feed() и создать страницу вывода YouTube видео на WordPress. Эта функция позволит парсить фиды (RSS), а с помощью дополнительных параметров возможно настроить количество видео, какой именно RSS-канал и т.д.
Создаем шаблон-страницу для YouTube видео.
Первым делом скопируем файл page.php если такой не существует, то файл single.php . Главным момент, убедитесь чтобы в файле имелись вызовы get_header() и get_footer(). Переименуйте скопируемый файл, к примеру, video.php и верхней части добавьте комментарий:
Парсер видео YouTube для Wordpress - Добавление видео к записям
<?php /** * Template Name: Videos Page */ ?>
После чего закиньте этот файл обратно в папку с вашей темой и перейдите в панель управления сайта на вкладку Страницы – Добавить новую. В атрибутах страницы выберите шаблон « Videos Page » дайте название странице и жмите кнопку «Опубликовать».
Парсим статьи на свой блог WordPress бесплатно!
Превращаем RSS-ленту в переменные данные с функцией fetch_feed ()
WordPress дает небольшой способ превратить RSS-ленту в объект, который может использоваться для образования петли с переменными данными. Это делается с помощью функции fetch_feed(). В начале использования мы настроем пару параметров и несколько ошибочных условий. Поместите ниже представленный фрагмент кода в ранее созданный файл video.php .
<?php $uri = 'http://gdata.youtube.com/feeds/api/videos?alt=rss&q=piano cat'; $feed = fetch_feed( $uri ); if ( is_wp_error( $feed ) ) { return false; } else { $maxitems = $feed->get_item_quantity( 10 ); $rss_items = $feed->get_items( 0, $maxitems ); if ( $maxitems == 0 ) : return false; else : if ( is_array( $rss_items ) ) : ?> Проверка... <?php endif; endif; } ?>Первым параметром настраиваем URL RSS-ленты. Подробнее можете ознакомиться по . Изначально поток настроен по умолчанию и должен работать со всеми доступными фидами, только укажите ник пользователя необходимого вам RSS-канала.
Пример.
http://gdata.youtube.com/feeds/api/videos?alt=rss&q=user http://gdata.youtube.com/feeds/api/videos?alt=rss&q=evgeniypopovDOTcomВо втором параметре указываем количество вывода видео.
$maxitems = $feed->get_item_quantity( 10 );Как только вы настроите URL ленты, количество видео, преобразуем ее в объект с переменными и запустим для проверки. Убедимся что нет ошибок и функция fetch_feed() работает должным образом. В результате вы должны увидеть надпись «Проверка…» значит все нормально работает и идем дальше.
Разметка вывода видео.
В начале разметки идет один большой видеоплеер iframe, а ниже под ним будут располагаться в две колонки миниатюры видео. Поместите этот код в файл video.php :
<div id="videos"> <div class="video_player"> <?php $i = 0; foreach ( $rss_items as $item ) : if ( $i++ > 0 ) break; $id = wptuts_get_yt_ID( $item->get_permalink() ); ?> <iframe width="610" height="344" src="http://www.youtube.com/embed/<?php echo $id; ?>" frameborder="0" allowfullscreen></iframe> <?php endforeach; ?> </div> <ul class="video_thumbs"> <?php foreach ( $rss_items as $item ) : $id = wptuts_get_yt_ID( $item->get_permalink() ); $enclosure = $item->get_enclosure(); ?> <li> <p><a href="http://www.youtube.com/embed/<?php echo $id; ?>"><img src="<?php echo esc_url( $enclosure->get_thumbnail() ); ?>" width="290" height="164" /></a></p> <p><a href="http://www.youtube.com/embed/<?php echo $id; ?>"><?php esc_html_e( $item->get_title() ); ?></a></p> </li> <?php endforeach; ?> </ul> </div>Пояснение: В содержании кода присутствуют два основных блока div. Первый-включает в себя основной видеоплеер. Другой выводит список с видеороликами и названиями.
Стили для оформления видео.
Чтобы все корректно отображалось зададим стили в файл style.css :
#videos { width: 640px; display: inline-block; } .video_player { padding: 15px; } .video_thumbs { margin: 0; } .video_thumbs li { list-style: none; padding: 15px; margin: 0; float: left; width: 290px; } .video_thumbs p { margin: 10px 0; } .video_thumbs li:hover img, .video_thumbs li.active img { opacity: .5; }Получаем идентификатор (ID) видео
Очередной шаг, в нем нужно создать функцию для поиска ID видео из RSS-ленты. Просто скопируй фрагмент кода в файл functions.php :
function wptuts_get_yt_ID( $uri ) { // how long YT ID's are $id_len = 11; // where to start looking $id_begin = strpos( $uri, '?v=' ); // if the id isn't at the beginning of the uri for some reason if( $id_begin === FALSE ) $id_begin = strpos( $uri, "&v=" ); // all else fails if( $id_begin === FALSE ) wp_die( 'YouTube video ID not found. Please double-check your URL.' ); // now go to the proper start $id_begin +=3; // get the ID $yt_ID = substr( $uri, $id_begin, $id_len); return $yt_ID; }Воспроизведение миниатюр видео
Мы подошли к заключению, последний шаг – место воспроизведения миниатюр по умолчанию, изменим ссылку на главный видеоплеер, то есть при нажатии на видео оно будет подгружаться в основной плеере, а не открываться в отдельности. Подключим для этого JavaScript в очередь в файл functions.php :
add_action( 'wp_enqueue_scripts', 'wptuts_enqueue_video_js' ); function wptuts_enqueue_video_js() { if ( is_page_template( 'page-cats.php' ) ) wp_enqueue_script( 'video_js', get_template_directory_uri() . '/js/video.js', array( 'jquery' ) ); }Это функция проверяет, действительно вы находитесь на странице с именем video.php . Если это так, то скрипт будет работать. И обратите внимание на директорию скрипта, при необходимости измените на свой. Теперь создайте файл с именем video.js и добавьте следующее содержимое:
jQuery( function($) { $( '#videos .video_thumbs li:first-child' ).addClass( 'active' ); $( '#videos .video_thumbs a' ).on( 'click', function(e) { e.preventDefault(); $( '#videos .video_thumbs li' ).removeClass( 'active' ); $( this ).parentsUntil( 'ul' ).addClass( 'active' ); var video = $( this ).attr( 'href' ); $( '#videos .video_player iframe' ).attr( 'src', video ); }); });Результат.
Практически действия минимальны, создание/копирование в итоге все работает.
Источник: http://code.tutsplus.com/tutorials/create-a-youtube-videos-page-template-from-an-rss-feed--wp-30319
