Статьи

Главная › Новости

Видеогалерея YouTube и Vimeo на WordPress

Опубликовано: 01.09.2018

WP YouTube Lyte плагин для WordPress, установка и настройка

В этом руководстве мы интегрируем YouTube и Vimeo плеер в страницу на WordPress сайте без необходимости изучения документации по API (то есть, и Vimeo API , если вам интересно). Используя инструменты, доступные нам в WordPress, и немножко PHP , мы можем сделать галерею, которая обходит проблему агрегации контента.

Например, мне нравится плеер Vimeo, но я не всегда загружаю туда видео. Кто-то может загрузить его на YouTube, а я не хочу устанавливать разные размеры на сайтах, чтобы получить встроенный плеер для каждого видео.

Если говорить про владельца сайта, это дает ему возможность выбрать видеопортал, который ему нравится, и при этом иметь возможность приспособиться, если кто-то разместит видео с другого сайта. Для разработчиков это значит, что они могут давать пользователю панель управления, и им не придется принимать звонки и давать советы по встроенным видео.

Как ВСТАВИТЬ ВИДЕО из YOUTUBE на сайт WORDPRESS и как выровнять видео по центру или по ширине сайта.

Скачать исходники | Демонстрация

Шаг 1. Решите вопрос с разметкой

Первая часть этого руководства будет очевидной для опытных разработчиков и дизайнеров. Но я все равно ее не пропущу. Сначала спланируйте ваш сайт, в данном случае, это страница галереи. Спроектируйте модель, решите, какую ширину и высоту видеоплеера вы хотите сделать. Когда это сделано, вы можете переходить к функционалу. Разметка с оглядкой назад – это кошмар.

Как вставить видео с YouTube в статью на сайт WordPress?

Я использовал систему разметки 960 grid и сделал плеер 300px  по ширине и 190px  по высоте.

Шаг 2. Используйте код встроенного плеера

Как вы, возможно, знаете, Vimeo и YouTube предоставляют код для вставки (embed code), который вы можете вставить на ваш сайт на WordPress. Это даст нам базовый плеер, так что давайте получим коды.

YouTube плеер

<iframe width="560" height="315" src="http://www.youtube.com/embed/WhBoR_tgXCI" frameborder="0" allowfullscreen></iframe>

Vimeo плеер

<iframe src="http://player.vimeo.com/video/29017795" width="400" height="225" frameborder="0" webkitAllowFullScreen mozallowfullscreen allowFullScreen></iframe><p><a href="http://vimeo.com/29017795">Experience Zero Gravity</a> from <a href="http://vimeo.com/bettywantsin">Betty Wants In</a> on <a href="http://vimeo.com">Vimeo</a>.</p>

Имея оба эти кода, мы можем настраивать плееры, изменяя ширину, цвета и т.д. Но это неудобно и нужно делать постоянно. Так что давайте сделаем код, который будет это делать каждый раз автоматически .

Шаг 3. Настройка WordPress

Мы можем использовать отличный плагин под названием Custom Fi eld Template . Через панель настроек мы можем ввести поля, которые будут нашими переменными.

Введите следующий код в поле как показано на картинке выше:

[Video ID] type = textfield [Video Site] type = select value = youtube # vimeo

И введите собственный тип поста для видео. Если вы не знаете, как сделать свой тип поста, обратите внимание на простой плагин Custom Post Types UI .

Когда это сделано, при добавлении нового видео-поста вы увидите опции для Video ID и Video Site .

Обычный параметр на видео-порталах — это  Video ID , в конце адреса YouTube он выглядит так:

http://www.youtube.com/watch?v= WhBoR_tgXCI

YouTube ID будет таким: WhBoR_tgXCI

В конце адреса видеоролика Vimeo этот код выглядит так:

http://vimeo.com/ 29017795

где 29017795 это и есть  Vimeo ID .

Мы можем добавить больше видео-сайтов, поскольку они используют такую же политику адресов. Пока мы остановимся на этих двух.

Так что теперь у нас есть легкий способ использовать видео в посте, — ввести ID и выбрать сайт .

Перед тем, как мы напишем вызов PHP -функции, нам нужно создать страницу и применить к ней отдельный файл шаблона, то есть галереи, затем мы сможем открыть нашу новую страницу и дать ей базовые свойства. Чтобы узнать больше о своих файлах шаблона, прочитайте запись Child Themes  на WordPress Codex.

<?php /* Template Name: gallery */ ?> <?php get_header() ?> <?php get_footer() ?>

Шаг 4. Установите переменные PHP

Теперь нам нужно использовать эту информацию, чтобы добавить цикл в наш файл шаблона и внедрить модель. Например:

<div id="galvidcontainer"> <h1>Videos</h1> <?php $args = array( 'post_type' => 'videos', 'posts_per_page' => 10 ); $loop = new WP_Query( $args ); while ( $loop->have_posts() ) : $loop->the_post(); ?> <div class="galvidpre"> <div class="galvidprevid"> </div> <div class="galvidpretext"> <h1><?php the_title() ?></h1> <p> <?php $words = explode(" ",strip_tags(get_the_content())); $content = implode(" ",array_splice($words,0,10)); echo $content; ?> </p> </div> </div> <?php endwhile; ?> </div>

Теперь наши видео-посты выводят свои заголовки и содержимое. Давайте создадим несколько переменных в слое .galvidprevid (это класс, потому что у нас их больше одного), чтобы мы могли с легкостью вызывать свои метаданные.

<?php $videosite = get_post_meta($post->ID, 'Video Site', single); $videoid = get_post_meta($post->ID, "Video ID", single); ?>

Теперь мы можем вызвать Video ID и Video Site с помощью $videosite и $videoid . Давайте возьмем код с наших двух сайтов с установленными нужными значениями высоты и ширины. В коде вы найдете ID  для видео и замените его нашей переменной.

<iframe src="http://player.vimeo.com/video/29017795" width="300" height="190" frameborder="0" webkitAllowFullScreen mozallowfullscreen allowFullScreen></iframe>

Все что нам нужно сделать, это вставить наш ID , заменив его переменной $videoid . Давайте выведем код.

echo '<iframe src="http://player.vimeo.com/video/'.$videoid.'" width="300" height="190" frameborder="0" webkitAllowFullScreen mozallowfullscreen allowFullScreen></iframe>';

Шаг 5. Создание условия "if"

Итак, у нас есть наш код  Video ID в нужном месте. Теперь мы можем создать условие, чтобы изменять код плеера в зависимости от выбранного видео-сайта.

<?php if ($videosite == 'vimeo') { echo '<iframe src="http://player.vimeo.com/video/'.$videoid.'" width="300" height="190" frameborder="0" webkitAllowFullScreen mozallowfullscreen allowFullScreen></iframe>'; } else if ($videosite == 'youtube') { echo '<iframe width="300" height="190" src="http://www.youtube.com/embed/'.$videoid.'" frameborder="0" allowfullscreen></iframe>'; } else { echo 'Please select a Video Site via the WordPress Admin'; } ?>

Проверьте, все ли правильно, добавьте видео и ВСЕ! Ниже показан фрагмент админки и самого сайта.

Шаг 6. Проверка и стиль CSS

Теперь, когда у нас все есть, я собираюсь добавить несколько моих любимых видео и немного CSS – и готово.

Вот CSS, который я использовал.

h1 {font-size:20px;} #galvidcontainer { width:940px; margin:0 auto; } .galvidpre { width:300px; height:325px; float:left; margin:5px; background-color:#ccc; } .galvidprevid { width:300px; } .galvidpretext { width:280px; padding:10px; }

В этом руководстве мы показали хороший и эффективный метод внедрения встроенных видео-плееров без большого количества кода. Было ли это вам полезным? Поделитесь впечатлениями в комментариях!

Источник: