Уроки по программированию

Слайдер (Slider) youtube для сайта (wordpress)

Очень часто бывает сложно найти решения под задачи которые нужно решить в кратчайшие сроки, а еще сложнее найти что-то готовое и просто установить копированием кода на свой сайт. Одной из такой задачей была установка слайдера youtube канала для движка wordpress. Я нашел несколько плагинов, но мне не понравилось, то что в них не было возможности поменять структуру дизайна. И тогда я попытался создать свой слайдер.

Для того чтобы создать свой слайдер youtube канала вам понадобится готовый слайдер, которые можно найти в интернете прописав строчку в google «free jquery slider». Я скачал вот этот .

Я написал не большой код для вывода миниатюр и ссылок (на видео) и заменил код слайдера выделены красным прямоугольником на свой:

slider-youtube-channel

Замена кода:

<ul id="carousel" class="elastislide-list">
<? 
//Настройки 
$channel_name='XFactor2Ukraine';//Название канала
$count=15;//Количество видео 
//Получить данные с Youtube
$sxml=simplexml_load_file("http://gdata.youtube.com/feeds/api/users/$channel_name/uploads?max-results=$count");
foreach ($sxml->entry as $entry) {//Разбиваем данные
  $vidKey = substr(strrchr($entry->id,'/'),1);
  $linktube="http://www.youtube.com/watch?feature=player_embedded&v=".$vidKey;//Получить ссылку
  $vidID = $vidKey;
  $url="http://gdata.youtube.com/feeds/api/videos/". $vidID;
  $doc=new DOMDocument;
  $doc->load($url);
  $title=$doc->getElementsByTagName("title")->item(0)->nodeValue;//Получить заголовок ссылки
  echo "
	<li>
		<a target='_blank' class='miniature' href='".$linktube."'>
			<img title='".$title."' src='".getVideoThumbUrl('http://www.youtube.com/embed/'.$vidKey)."'>
		</a>
		<h2>".$title."</h2>
	</li>
  ";
}
?>
</ul>

В комментариях обозначено для чего нужна каждая переменная.
Не стал подробно объяснять выкладываю готовое решение.

Скачать

Результат:

slider-youtube

Для того чтобы установить слайдер youtube в шаблоне wordpress вам необходимо будет прописать пути к библиотекам

Комментарии к статье

Добавить комментарий

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