Июн

24

19

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

Tweet

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

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

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. Полезная услуги для оптимизаторов – регистрация в белых каталогах русскоязычный и англоязычных.
Блог Кирика — отличные статьи по теме раскрутка сайта, комплексное продвижение, контекстная реклама и поисковая оптимизация.
Обзор и рецензия книги Виктор Пелевин t для любителей современной прозы.

Понравился пост? Подпишись на обновления блога по RSS, Email или twitter!

А еще можно опубликовать статью в своем блоге:
       

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

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

 Loading ...

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

Еще интересно почитать:

• Функция wp_get_archives для вывода архива блога
• Улучшаем страницу с результатами поиска в wordpress
• Разное количество записей на страницах блога
• Плагин WP-PostRatings рейтинга постов в WordPress
• Ссылка читать далее в wordpress – тег more

Заработай на своих сайтах!

Комментариев - 19 к статье “Вставка 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

  еще один плюс в копилку, спасибо…