Вставка 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. Полезная услуги для оптимизаторов — регистрация в белых каталогах русскоязычный и англоязычных.
Блог Кирика — отличные статьи по теме раскрутка сайта, комплексное продвижение, контекстная реклама и поисковая оптимизация.
комментариев 28 к статье “Вставка Youtube видео в wordpress шаблон”
Блог Wordpress Inside поможет вам научиться работать в вордпресс, закрепить и расширить имеющиеся знания. Плагины и шаблоны, разные хаки и функции wp, оптимизация и безопасность системы – все это и намного больше вы сможете найти на страницах нашего проекта!
Если хотите быстро и оперативно получать последние новости и статьи, то рекомендуем подписаться на обновления блога:
- Як сховати відсутні товари в Woocommerce шорткодах та схожих товарах
- Сервіс AdMaven + плагін для монетизації трафіка на WordPress сайтах
- Плагіни для створення стрічки новин з біжучим рядком в WordPress
- Як змінити розміщення кнопки оформлення замовлення в WooCommerce
- Плагін WHWS Display In Stock Products First – відображення товарів в наявності першими
- Підписка MonsterONE: чи варто використовувати цей сервіс у 2023 році? (+5 продуктів, які треба скачати в першу чергу)
- Онлайн генератор ссылок на мессенджеры для WordPress и не только
- WooCommerce (46)
- Безопасность (12)
- Видео (6)
- Виджеты (28)
- Возможности (141)
- Вопрос-ответ (6)
- Начинающим (52)
- Новости (46)
- Оптимизация (23)
- Плагины (246)
- Сервисы (87)
- Хаки и секреты (87)
- Шаблоны (45)
- Оптимизируем WordPress header и удаляем лишний код
(5,19 из 7, голосов - 43)
- Как создать пункт меню без ссылки в wordpress
(6,39 из 7, голосов - 23)
- Добавление кнопки Вконтакте, Facebook и Twitter в wordpress блог
(6,14 из 7, голосов - 21)
- Хаки для вариаций товаров в WooCommerce
(4,88 из 7, голосов - 24)
- Выполнение jQuery скриптов при выборе вариаций товаров в WooCommerce
(3,96 из 7, голосов - 26)
- Размеры изображений в WordPress — как изменить, добавить свои и удалить лишние
(3,61 из 7, голосов - 28)
- Вывод текста в блоге только на главной
(6,85 из 7, голосов - 13)

- Дизайн Мания - о веб-дизайне и не только.
- Tod's Blog - все про заработок онлайн.
- Вебдванольные заметки - обзоры веб-сервисов.
- Найбільш очікувані новинки MMORPG ігор в 2025 році
- Советы по выбору холодильника LG с технологией No Frost
- Зачем нужны Wi-Fi ретрансляторы и как выбрать подходящую модель
- Введение в онлайн-казино Slotor777: многообразие игр и привлекательные бонусы
- Необходимость использования облачного хранилища в наше время, что важно и как выгодно?
- Спрощення процесу звітності за допомогою програми BAS Бухгалтерія
- Технологія підключення інтернету GPON та її переваги
- За що гравці найбільше цінують Lineage 2
Разнообразить блог добавкой видео не помешает))
Отличные дизайны у вас на всех блогах, кто вам рисует и верстает?
Anton, все сам делаю, как настоящий труевый вебмастер.
Видео добавляет блогу интерактивности, создается ощущение, что сайт живет и развивается.
Вставка видео с ютуба это хорошо, а вот бы вставка видео с любого сайта. Во многих видео сайтах система вставки видео схожа. Вот и хотелось бы что-бы подхватывалось любое видео. А то так, надо его переливать на ютуб…. Конечно можно, но лишнее время…
Мне казалось что это легче. Спасибо за инструкцию буду пробовать дальше вставлять видео.
Здравствуйте!
Помогите пожалуйста.
Я хочу создать видео блог на подобие во этого сайта: judovision.org
Хочу чтоб сначала выводилось превью видео с небольшим описанием, кол-вом оценок и просмотров.
Буду безгранично благодарен за ответ.
когда-то для своего нового сайта нашел классный шаблон в сети, и там по задумке сбоку должены были выводиться последние видюшки, но на практике там были вставлены пару картинок. Я удалил тот блок, но теперь вижу, что можно было чуть-чуть поправить и реализовать задумку!
Классный код для вывода. Все работает. Только хотелось бы в стилях немного изменить.
Мне нужно чтобы в сайдбаре выводилось 4 последних видео но не в 1 столбик, а в 2. Как это можно реализовать?
Света, тут вы правильно заметили, нужно подправить стили CSS в шаблоне. К сожалению точный код сказать не могу, но принцип вроде как следующий — создаются блоки с выравниванием float: left и фиксированной шириной, получается первая строка заполнится и остальные будут отображаться снизу. Короче нужно поискать решение в гугле где-то и блогах.
Ок, поищу…
Здравствуйте, хочу поинтересоваться у вас, а есть ли возможность в этой штуке сделать так, чтобы видео отображалось не именно с последних постов, а выбиралось рандомно? То есть у нас есть скажем 10 постов с видео, и при открытии каждой новой странички или обновлении текущей отображалось 1 из 10 видео наугад, выбранные движком, по принчипу динамических опросов.
Вячеслав, я думаю, возможность есть, точно не помню, но вроде должна быть «рандомная» выборка, а не только «последние записи» — читаем документацию по функциям из кода примера в посте.
Присоединяюсь к вышестоящей просьбе Виктора про видеоблог. Tod если не сложно напиши как сделать так чтобы на главное выводились видеоролики с описаниями, потому что хочу сделать фан сайт одной группы с клипами а вот как выводить видео на главной что-то мало инфы! заранее спасибо
Вячеслав, скорее всего можно сделать рандомную выборку, посмотрите параметры WP_Query — там должно что-то такое быть.
Филин, все очень просто — превью делается картинкой + текстовое описание тоже не проблема добавить, а после него можно спокойно добавлять ролики из Youtube или Vimeo. Для вставки видео с хостинга нужно поискать плагин, пока такой задачей не занимался.
в этом коде не хватает , поэтому у меня футер менялся.
а так спасибо, работает:)
Поставил этот код на главную страницу. Спасибо.
Помогла статья. Полезная информация. Как раз по этому поводу думал как и что сделать. Спасибо.
еще один плюс в копилку, спасибо…
Спасибо за прекрасный пост! Очень нужно было подключить вывод последних добавленных видео с 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;
}
Роман, возможно, часть кода не совсем корректно добавилась. Тут главная фишка в стилях — выравнивание влево float: left; и ширина видео указанная в основном html коде (130 пикселей), тогда все ролики будут просто идти друг за другом и когда не помещаются в текущей строке переходят на следующую.
Есть еще один момент, который увеличивает функциональность данной «фишки». В наведенном хаке было ограничение — нужно было выделить отдельную рубрику для видео,также каждая запись в ней должна была содержать видео, иначе в блоке выводились только названия записей без ролика. Это легко решается добавлением к функции query_posts параметр meta_key=video, он выводит список постов с произвольным полем “video”. В итоге получается вот такой кусочек кода:
<?php $my_query = new WP_Query('meta_key=video&showposts=2');
И как результат, можно задать вывод последнего видео с сайдбаре для любого поста любой рубрики, вставив в произвольное поле “video” с описанным в статье значением.
Templatelab, спасибо за дополнение.
а Вы бы не могли записать видео и выложить сюда…я думаю помогли бы не только мне…
Павел, к сожалению записывать видео просто нет времени. Если внимательно почитать и попробовать на практике применить пару раз написанное в статье, то все получится.
Привет
Можешь помочь сделать примерно тоже но чтобы не делать постов с видио
то есть хранить их где нит в папке и выводить на всех страницах постов (single.php) рандомом
Пожалуйста))
freehhhhh, я бы сделал это как-то через плагин.. то есть нашел бы что-то подходящее по задачам, думаю, должно быть.
Классная тема. Я занимаюсь видеопродажниками. На сегодня это очень актуально: тема о том, как залить видео на сайт, тем более, что очень много сайтов на платформе WordPressa. А по поводу YouTube, надо быть с ним аккуратным, так как он очень много видео просто банит, считая его нарушением авторских прав. У меня, например, такое было. Залил часть мульта на YouTube, а он заблокировал его, сбросив максимальное количество минут до 15.