Июн

Вставка Youtube видео в wordpress шаблон

Как-то на днях в твиттере я говорил, что разобрал одну очень интересную «фишку» для wordpress блога. Речь шла о вставке youtube видео в wordpress шаблоне блога дабы в сайдбаре отображался перечень последних видео. Перед тем, как перейдем к делу, можно сказать лишь одно замечания – да, возможно, существует метод реализации этой фишки с помощью какого-то плагина wordpress, но я привык все делать через код:) Итак, поехали.

Данный вариант реализации вставки видео состоит из нескольких этапов.

1. Создаем пост в блоге, где в текст размещаем небольшое описание для видео и сам видео ролик с youtube. Для тех, кто не знает как это сделать, рассказываю – в каждом видеоролике на youtube есть кнопка «Встроить», при клике на которую вы получите некий html код. Его нужно будет скопировать в пост блога, при этом переключив текстовый редактор в режим HTML.

Для созданного поста блога выбираем категорию «Видео». Кстати, нужно будет запомнить ID этого раздела – чуть позже оно нам пригодится.

2. В настройках поста под текстом есть так называемые произвольные поля (custom fields). Там создаете новую запись с именем video (не менять, оно используется в коде ниже). В качестве значения указываете часть ссылки youtube после параметра watch?v. То есть для ссылки http://www.youtube.com/watch?v=gXo2nm2ODF0&feature=player_embedded нужно указать только gXo2nm2ODF0.

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

3. А теперь заходим в HTML шаблон нашего блога, например, в файл sidebar.php. Там находим место, где мы бы хотели выводить видео, и добавляем следующий код.

<div id="subbar">
<div id="featured-video">
<div class="h3title" id="fv">Последнее видео</div>
<div class="padd">
<?php $my_query = new WP_Query('cat=5&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>
</div>

Сохраняем и проверяем его работоспособность. Конечно, для этого у вас должны быть созданы посты в категории «Видео». Ну, а теперь немного пояснений. В статье про wordpress цикл (loop) я упоминал функцию query, которая выводит посты блога. Так вот, в нашем случае мы выбираем все посты из категории номер 5 (это у меня раздел «Видео»), причем оставляем только 2 последние записи. Далее в этих постах считываем значение произвольного поля video и подставляем в html код для отображения видео ролика с youtube. В этом же код есть параметры для высоты и ширины выводимого изображения, которые нужно менять под свой шаблон. После вывода видео с youtube, отображается также заголовок поста и ссылка на него, дабы пользователь мог зайти и почитать статью целиком.

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

P.S. Полезная услуги для оптимизаторов — регистрация в белых каталогах русскоязычный и англоязычных.
Блог Кирика — отличные статьи по теме раскрутка сайта, комплексное продвижение, контекстная реклама и поисковая оптимизация.

Оцените статью:

(голосов - 5, средний балл: 5,40 из 7)

Загрузка...

Категории: Хаки и секреты;

Теги: видео в блоге, вывод постов, правка шаблона, сайдбар, сниппеты, улучшаем блог.

комментариев 28 к статье “Вставка Youtube видео в wordpress шаблон”

Tanushka77 24.06.2010
Разнообразить блог добавкой видео не помешает))
Anton 25.06.2010
Отличные дизайны у вас на всех блогах, кто вам рисует и верстает?
Tod 25.06.2010
Anton, все сам делаю, как настоящий труевый вебмастер.
Риана 27.06.2010
Видео добавляет блогу интерактивности, создается ощущение, что сайт живет и развивается.
Алексей 28.06.2010
Вставка видео с ютуба это хорошо, а вот бы вставка видео с любого сайта. Во многих видео сайтах система вставки видео схожа. Вот и хотелось бы что-бы подхватывалось любое видео. А то так, надо его переливать на ютуб…. Конечно можно, но лишнее время…
Ler4ik 28.06.2010
Мне казалось что это легче. Спасибо за инструкцию буду пробовать дальше вставлять видео.
Виктор 09.07.2010
Здравствуйте!

Помогите пожалуйста.
Я хочу создать видео блог на подобие во этого сайта: judovision.org
Хочу чтоб сначала выводилось превью видео с небольшим описанием, кол-вом оценок и просмотров.

Буду безгранично благодарен за ответ.
overbag 17.07.2010
когда-то для своего нового сайта нашел классный шаблон в сети, и там по задумке сбоку должены были выводиться последние видюшки, но на практике там были вставлены пару картинок. Я удалил тот блок, но теперь вижу, что можно было чуть-чуть поправить и реализовать задумку!
Света 18.07.2010
Классный код для вывода. Все работает. Только хотелось бы в стилях немного изменить.

Мне нужно чтобы в сайдбаре выводилось 4 последних видео но не в 1 столбик, а в 2. Как это можно реализовать?
Tod 19.07.2010
Света, тут вы правильно заметили, нужно подправить стили CSS в шаблоне. К сожалению точный код сказать не могу, но принцип вроде как следующий — создаются блоки с выравниванием float: left и фиксированной шириной, получается первая строка заполнится и остальные будут отображаться снизу. Короче нужно поискать решение в гугле где-то и блогах.
Света 19.07.2010
Ок, поищу…
Вячеслав 24.08.2010
Здравствуйте, хочу поинтересоваться у вас, а есть ли возможность в этой штуке сделать так, чтобы видео отображалось не именно с последних постов, а выбиралось рандомно? То есть у нас есть скажем 10 постов с видео, и при открытии каждой новой странички или обновлении текущей отображалось 1 из 10 видео наугад, выбранные движком, по принчипу динамических опросов.
Tod 25.08.2010
Вячеслав, я думаю, возможность есть, точно не помню, но вроде должна быть «рандомная» выборка, а не только «последние записи» — читаем документацию по функциям из кода примера в посте.
Филин 31.01.2011
Присоединяюсь к вышестоящей просьбе Виктора про видеоблог. Tod если не сложно напиши как сделать так чтобы на главное выводились видеоролики с описаниями, потому что хочу сделать фан сайт одной группы с клипами а вот как выводить видео на главной что-то мало инфы! заранее спасибо
Tod 01.02.2011
Вячеслав, скорее всего можно сделать рандомную выборку, посмотрите параметры WP_Query — там должно что-то такое быть.
Филин, все очень просто — превью делается картинкой + текстовое описание тоже не проблема добавить, а после него можно спокойно добавлять ролики из Youtube или Vimeo. Для вставки видео с хостинга нужно поискать плагин, пока такой задачей не занимался.
alina 27.04.2011
в этом коде не хватает , поэтому у меня футер менялся.
а так спасибо, работает:)
Кроссовер 19.06.2011
Поставил этот код на главную страницу. Спасибо.
Алексей 10.11.2011
Помогла статья. Полезная информация. Как раз по этому поводу думал как и что сделать. Спасибо.
Григорий 07.12.2011
еще один плюс в копилку, спасибо…
Роман 09.04.2012
Спасибо за прекрасный пост! Очень нужно было подключить вывод последних добавленных видео с youtube в sidebar и благодаря этому посту все получилось. И огромнейшее спасибо автору за то, что показал и сделал вывод видеозаписей в две колонки. Приведу тут пример того, что у меня получилось в итоге, уверен что многим пригодится.

В sidebar вставляем:

have_posts()) : $my_query->the_post(); $do_not_duplicate = $post->ID; ?>
ID, ‘video’, true); ?>

<object data="http://www.youtube.com/v/» type=»application/x-shockwave-flash» width=»130″ height=»110″><param name="movie" value="http://www.youtube.com/v/» />

<a href="» >

А в CSS пишем:
.video {
float: left;
display: inline;

height: 160px;

margin: 5px 0px 5px 10px;
}
Tod 09.04.2012
Роман, возможно, часть кода не совсем корректно добавилась. Тут главная фишка в стилях — выравнивание влево float: left; и ширина видео указанная в основном html коде (130 пикселей), тогда все ролики будут просто идти друг за другом и когда не помещаются в текущей строке переходят на следующую.
Templatelab 14.04.2012
Есть еще один момент, который увеличивает функциональность данной «фишки». В наведенном хаке было ограничение — нужно было выделить отдельную рубрику для видео,также каждая запись в ней должна была содержать видео, иначе в блоке выводились только названия записей без ролика. Это легко решается добавлением к функции query_posts параметр meta_key=video, он выводит список постов с произвольным полем “video”. В итоге получается вот такой кусочек кода:
<?php $my_query = new WP_Query('meta_key=video&showposts=2');

И как результат, можно задать вывод последнего видео с сайдбаре для любого поста любой рубрики, вставив в произвольное поле “video” с описанным в статье значением.
Tod 14.04.2012
Templatelab, спасибо за дополнение.
Павел 18.05.2012
а Вы бы не могли записать видео и выложить сюда…я думаю помогли бы не только мне…
Tod 18.05.2012
Павел, к сожалению записывать видео просто нет времени. Если внимательно почитать и попробовать на практике применить пару раз написанное в статье, то все получится.
freehhhhh 25.10.2012
Привет
Можешь помочь сделать примерно тоже но чтобы не делать постов с видио
то есть хранить их где нит в папке и выводить на всех страницах постов (single.php) рандомом
Пожалуйста))
Tod 26.10.2012
freehhhhh, я бы сделал это как-то через плагин.. то есть нашел бы что-то подходящее по задачам, думаю, должно быть.
Виктор 18.01.2013
Классная тема. Я занимаюсь видеопродажниками. На сегодня это очень актуально: тема о том, как залить видео на сайт, тем более, что очень много сайтов на платформе WordPressa. А по поводу YouTube, надо быть с ним аккуратным, так как он очень много видео просто банит, считая его нарушением авторских прав. У меня, например, такое было. Залил часть мульта на YouTube, а он заблокировал его, сбросив максимальное количество минут до 15.