Для интеграции YouTube видео на WordPress имеется много плагинов, которые доступны из репозитория WordPress.org или из других платных мест. Но можно пойти в обход, использовав функцию fetch_feed()
и создать страницу вывода YouTube видео на WordPress. Эта функция позволит парсить фиды (RSS), а с помощью дополнительных параметров возможно настроить количество видео, какой именно RSS-канал и т.д.
Создаем шаблон-страницу для YouTube видео.
Первым делом скопируем файл page.php если такой не существует, то файл single.php. Главным момент, убедитесь чтобы в файле имелись вызовы get_header()
и get_footer()
. Переименуйте скопируемый файл, к примеру, video.php и верхней части добавьте комментарий:
<?php /** * Template Name: Videos Page */ ?>
После чего закиньте этот файл обратно в папку с вашей темой и перейдите в панель управления сайта на вкладку Страницы – Добавить новую. В атрибутах страницы выберите шаблон «Videos Page» дайте название странице и жмите кнопку «Опубликовать».
Превращаем 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-ленты. Подробнее можете ознакомиться по
Пример.
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