• Главная
  • Карта сайта
Не найдено

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

Опубликовано: 01.09.2018

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

YouTube video parser плагин Wordpress

Для интеграции 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

Новости
Провайдеры:
  • 08.09.2015

    Batyevka.NET предоставляет услуги доступа к сети Интернет на территории Соломенского района г. Киева.Наша миссия —... 
    Читать полностью

  • 08.09.2015
    IPNET

    Компания IPNET — это крупнейший оператор и технологический лидер на рынке телекоммуникаций Киева. Мы предоставляем... 
    Читать полностью

  • 08.09.2015
    Boryspil.Net

    Интернет-провайдер «Boryspil.net» начал свою работу в 2008 году и на данный момент является одним из крупнейших поставщиков... 
    Читать полностью

  • 08.09.2015
    4OKNET

    Наша компания работает в сфере телекоммуникационных услуг, а именно — предоставлении доступа в сеть интернет.Уже... 
    Читать полностью

  • 08.09.2015
    Телегруп

    ДП «Телегруп-Украина» – IT-компания с 15-летним опытом работы на рынке телекоммуникационных услуг, а также официальный... 
    Читать полностью

  • 08.09.2015
    Софтлинк

    Высокая скоростьМы являемся участником Украинского центра обмена трафиком (UA — IX) с включением 10 Гбит / сек... 
    Читать полностью

rss