Для интеграции 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-ленты. Подробнее можете ознакомиться по . Изначально поток настроен по умолчанию и должен работать со всеми доступными фидами, только укажите ник пользователя необходимого вам 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