Парсер YouTube видео на WordPress

Для интеграции 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» дайте название странице и жмите кнопку «Опубликовать».

Парсер YouTube видео на 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 );
    });
});

Результат.

Парсер YouTube видео на WordPress

Практически действия минимальны, создание/копирование в итоге все работает.

Источник: http://code.tutsplus.com/tutorials/create-a-youtube-videos-page-template-from-an-rss-feed--wp-30319

Оставить ответ

Ваш адрес email не будет опубликован. Обязательные поля помечены *