Июн
24
28

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

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

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

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

вставка youtube видео в блоге

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

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

youtube видео

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

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

рейтинг Оцените статью:
Ужасная статьяНичего интересногоТак себеНормальноХорошоКлассный постВ закладки!
(голосов - 4, средний балл: 6,50 из 7)
Загрузка...

категория Категории: Хаки и секреты;
теги Теги: , , , , , .
Заработай на сайте
заработок в GoGetLinks

комментариев 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.

Оставить комментарий


Блог Wordpress Inside поможет вам научиться работать в вордпресс, закрепить и расширить имеющиеся знания. Плагины и шаблоны, разные хаки и функции wp, оптимизация и безопасность системы – все это и намного больше вы сможете найти на страницах нашего проекта!

Если хотите быстро и оперативно получать последние новости и статьи, то рекомендуем подписаться на обновления блога:

Последние посты
Полезные заметки
Лучшее в категории
Облако тегов
Скажи свое мнение!

В чем основные плюсы Wordpress?

Посмотреть результаты

Загрузка ... Загрузка ...
Друзья проекта
Последние новости