Несколько интересных настроек, для видео из YouTube на вашем сайте

В статье Как вставить видео на сайт я подробно показал весь процесс, как вставить youtube ролик (например, сделанный самостоятельно скринкаст) на свой блог. Сегодня продолжим эту тему и сделаем несколько небольших оригинальных настроек, которые разнообразят ваш блог.

Как вставить YouTube превью?

Иногда бывает такая необходимость — добавить на страничку не само видео, а превью картинку, как, например, это сделано на самом ютубе при просмотре чьего-нибудь канала.

Сделать это очень просто — будет использовать шорткод. Для его создания добавим в файл functions.php шаблона код:

function wp_youtube_video_thumbnail($atts) {
     extract(shortcode_atts(array(
          'id' => '',
          'img' => '0',
          'align'=>'left'
     ), $atts));
    $align_class='align'.$align;
    return '<img src="<a href="http://img.youtube.com/vi/'.$id.'/'.$img.'.jpg&quot" rel="nofollow">http://img.youtube.com/vi/'.$id.'/'.$img.'.jpg&quot</a>; alt="" class="'.$align_class.'" />';
}
add_shortcode('youtube_thumb', 'wp_youtube_video_thumbnail');

В данном примере реализуется функционал, при котором мы можем задать несколько параметров для отображения превью youtube — собственно, его ID, размер и позиционирование.

Для вставки на страницу будем использовать такой код:

[youtube_thumb id="rNWeBVBqo2c" img="0" align="center"]

ID — сюда вы вставляете идентификатор видеоролика, который находится после слов «watch?v=» в адресе страницы видео
IMG — это размер миниатюры. Доступны следующие значения: 0 — полная картинка (480×360), 1 — 120×90, 2 — 120×90
ALIGN — позиционирование. Значения «right», «center» или «left». Также вышеприведенный код можно легко добавить в виде кнопки в ваш html-редактор в админке для удобства работы. Как это сделать описано в статье про редактор WordPress.

Список превью YouTube в сайдбаре

Еще одна полезная настройка для блогов, регулярно размещающих видеоконтент на своих страницах — выводить ссылки на видеопосты с превьюшками в боковой колонке сайта. Это будет немного сложнее, но справиться сможет любой. Задача состоит в том, что мы отфильтруем все записи из конкретной категории и покажем из них только миниатюру youtube, заголовок и ссылку на полную новость.

Прежде всего создайте рубрику для новостей, в которой будете публиковать видеоролики. После этого надо узнать ее ID (как это сделать я подробно объяснил в статье про Иконки для категорий. У меня получилась цифра «3».





Далее открываем редактор, вставляем видео из YouTube на сайт.

После чего открываем выпадающую верхнюю вкладку «Настройки экрана» и ставим флажок на пункте «Произвольные поля».

Теперь прокручиваем вниз страницы и под полем ввода новости видим новый блок с произвольными полями. Добавляем новое поле с названием «video» и задаем ему в качестве значения ID видеоролика (тот, который после слов «watch?v=» — помните?).

То же самое делаем со всеми записями, которые будут находиться в данной рубрике «Видео».

Последний шаг — в файл sidebar.php или напрямую в виджет через админку (при установленном плагине Exec-PHP) добавляем код, который будет выводить список наших роликов:

<div id="featured-video">
<div class="h3title" id="fv">Последнее видео</div>
<div class="padd">
<?php $my_query = new WP_Query('cat=3&showposts=2');
while ($my_query->have_posts()) : $my_query->the_post(); $do_not_duplicate = $post->ID; ?>
<?php $fvideo = get_post_meta($post->ID, 'video', true); ?>
<object data="http://www.youtube.com/v/<?php echo stripcslashes($fvideo); ?>" type="application/x-shockwave-flash" width="330" height="205"><param name="movie" value="http://www.youtube.com/v/<?php echo stripcslashes($fvideo); ?>" /><param name="wmode" value="transparent" /></object>
<p style="text-align: center; margin: 3px 0px 7px 0px;"><a href="<?php the_permalink() ?>" ><?php the_title(); ?></a></p>
<?php endwhile; ?>
</div>

Обратите внимание на строку «cat=3&showposts=2». В ней указаны ID категории рубрики, в которой вы публикуете видеозаписями (у меня это «3») и количество выводимых превью YouTube.

В итогу получаем типа того, что реализовано на самом ютубе:

И на закуску — видео о том, как можно добавить на сайт не весь ролик целиком, а только самую интересную его часть. Смотрим!

Поделись этой статьей с друзьями!

Это будет интересно прочитать:

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