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

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

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

Якщо говорити про власника сайту, це дає можливість вибрати відеопортал, який йому подобається, і при цьому мати можливість пристосуватися, якщо хтось розмістить відео з іншого сайту. Для розробників це означає, що вони можуть давати користувачеві панель управління, і їм не доведеться приймати дзвінки та давати поради щодо вбудованого відео.

Завантажити вихідні | демонстрація

Крок 1. Вирішіть питання з розміткою

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

Я використав систему розмітки 960 grid та зробив плеєр 300px по ширині та 190px по висоті.

Крок 2. Використовуйте код вбудованого програвача

Як ви, можливо, знаєте, Vimeo и YouTube надають код для вставки (Embed code), який ви можете вставити на ваш сайт на WordPress. Це дасть нам базовий плеєр, тож давайте отримаємо коди.

YouTube плеєр

<code class="html plain"><</code><code class="html keyword">iframe</code> <code class="html color1">width</code><code class="html plain">=</code><code class="html string">"560"</code> <code class="html color1">height</code><code class="html plain">=</code><code class="html string">"315"</code> <code class="html color1">src</code><code class="html plain">=</code><code class="html string">"<a href="http://www.youtube.com/embed/WhBoR_tgXCI">http://www.youtube.com/embed/WhBoR_tgXCI</a>"</code> <code class="html color1">frameborder</code><code class="html plain">=</code><code class="html string">"0"</code> <code class="html plain">allowfullscreen></</code><code class="html keyword">iframe</code><code class="html plain">></code> 

Vimeo плеєр

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

Маючи обидва ці коди, ми можемо налаштовувати плеєри, змінюючи ширину, кольори і т.д. Але це незручно і треба робити постійно. Так що давайте зробимо код, який це робитиме щоразу автоматично.

Крок 3. Налаштування WordPress

Ми можемо використовувати відмінний плагін під назвою Шаблон спеціального поля. Через панель налаштувань ми можемо ввести поля, які будуть змінними.

Введіть наступний код у поле як показано на зображенні вище:

[Video ID]
type = textfield

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

І введіть свій тип посту для відео. Якщо ви не знаєте, як зробити свій тип посту, зверніть увагу на простий плагін Спеціальні користувацькі типи повідомлень.

Коли це зроблено, при додаванні нового відео посту ви побачите опції для Ідентифікатор відео и Відео сайт.

Звичайний параметр на відео-порталах – це Ідентифікатор відео, наприкінці адреси YouTube він виглядає так:

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

Ідентифікатор YouTube буде таким: WhBoR_tgXCI

Наприкінці адреси відеоролика Vimeo цей код виглядає так:

http://vimeo.com/29017795

де 29017795 це і є Vimeo ID.

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

Отже, тепер у нас є легкий спосіб використовувати відео в пості, — ввести ID та вибрати сайт.

Перед тим, як ми напишемо виклик PHP-Функції, нам потрібно створити сторінку і застосувати до неї окремий файл шаблону, тобто галереї, потім ми зможемо відкрити нашу нову сторінку і дати їй базові властивості. Щоб дізнатися більше про свої файли шаблону, прочитайте запис Теми для дітей на 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);
?>

Тепер ми можемо викликати Ідентифікатор відео и Відео сайт за допомогою $videosite и $відео. Давайте візьмемо код із наших двох сайтів із встановленими потрібними значеннями висоти та ширини. У коді ви знайдете ID для відео та замініть його нашою змінною.

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

Все, що нам потрібно зробити, це вставити наш IDзамінивши його змінною $відео. Давайте виведемо код.

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

Крок 5. Створення умови "if"

Отже, у нас є наш код Ідентифікатор відео у потрібному місці. Тепер ми можемо створити умову, щоб змінювати код програвача в залежності від вибраного відео-сайту.

<?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;
}

У цьому посібнику ми показали хороший та ефективний метод впровадження вбудованих відео-плеєрів без великої кількості коду. Чи це вам було корисним? Поділіться враженнями у коментарях!

Джерело: WP.tutsplus.com

Олексій Шевченко

редактор wpcafe

Вивчає сайтобудування з 2008 року. Практикуючий вебмайстер, що спеціалізується на створенні сайтів WordPress. Задати питання Олексію можна на https://profiles.wordpress.org/wpthemeus/