ЗАВАНТАЖИТИ ВИХІДНІ ФАЙЛИ

ПОДИВИТИСЯ ДЕМОНСТРАЦІЮ

Якщо ви так само, як і я використовуєте YouTube щоб завантажувати відеоролики, які публікуєте на своєму WordPress-сайті, то ви вибрали вірний шлях! Це дозволяє не турбуватися про сумісність з різними браузерами і пристроями, економить місце на сервері і є найбільш надійним методом зберігання відео.

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

Однак, при додавання відеороликів з YouTube виникають два недоліки:

  • За замовчуванням, вони не адаптивні. Відео, укладену в тег
  • Якщо ви розробляєте сайт для людей, що не є програмістами, то навряд чи варто очікувати, що вони легко зможуть відкрити редактор записів WordPress і скопіювати з YouTube код вставки відео – для них це може виявитися занадто складним. Що ще більш небезпечно, така можливість це прямий шлях порушити функціональність сайту невірними діями недосвідчених користувачів.

    • У даній статті ми розглянемо, як створити шорткод, який дає можливість вам або вашому клієнту вбудовувати відео з YouTube, використовуючи візуальні прийоми. Причому нове відео автоматично стає адаптивним.

    Примітка: замість додавання коду в файл функцій теми і/або файл стилів, я рекомендую створити плагін. Саме цим методом я й виконую. Це дозволяє зберігати все в одному місці і активувати плагін на декількох сайтах, використовуючи шорткоди.

    Вам знадобиться:

  • Встановлений WordPress;
  • Редактор коду;
  • FTP-клієнт для завантаження плагіна на сайт (він може бути вбудований в редактор коду).

    • Перші кроки

    Почніть зі створення нового файлу в редакторі коду і збережіть його з назвою wptutsplus-responsive-video-shortcode.php. Ім’я ви можете вибрати будь-який.

    У даний файл вставити наступний код:

    Даний код налаштовує плагін та повідомляє про нього WordPress.

    Додавання шорткода

    Далі, додайте функцію, яка буде створювати шорткод і вішати для нього хук на функцію add_shortcodeaction:

    »
    ), $atts ) );
    return’

    ‘;
    }
    add_shortcode (‘responsive-video’, ‘wptuts_responsive_video_shortcode’ );
    ?>

    Цей код створює шорткод. Давайте поглянемо на те, що він виведе:

    • Контейнер
      з класом wptuts-video-container, який буде використаний для додавання CSS-коду, який зробить відео адаптивним;
    • Елемент
    • Посилання на відео YouTube всередині коду вставки з унікальним ідентифікатором $identifier, щоб однозначно визначити відео;
    • Атрибут для $identifier, який визначить користувач при додаванні шорткода на сторінку або запис на сайті. Це означає, що йому ніколи не доведеться мати справу безпосередньо з кодом вставки.

    Додавання CSS-коду для реалізації чуйності

    Наступним кроком треба додати стилі, які зроблять контейнер чуйним. Створіть новий файл в редакторі коду і збережіть його під ім’ям style.css. Внесіть в нього наступні рядки:

    /*
    Файл стилів, що реалізує шорткод для створення чуйного контейнера з відео.
    Представлений CSS-код, який робить відео чуйним.
    */
    .wptuts-video-container {
    position: relative;
    padding-bottom: 56.25%;
    padding-top: 30px;
    height: 0;
    overflow: hidden;
    }
    .wptuts-video-container iframe {
    position: absolute;
    top:0;
    left: 0;
    width: 100%;
    height: 100%;
    }

    Ось що робить даний код:

    • Робить контейнер
      чуйним, використовуючи властивість padding-bottom, щоб визначити співвідношення сторін (в даному випадку 16:9);
    • Оголошення padding-top створює вільний простір у верхній частині контейнера;
    • Використання padding-bottom замість height означає, що
      буде змінювати свої розміри динамічно, зберігаючи співвідношення сторін;
    • Додає позиціонування на absolute для елемента

    Тепер збережіть ваш файл стилів.

    Реєстрація файлу стилів в плагіні

    Фінальним кроком буде реєстрація файлу стилів в плагіні, що додасть в нього тільки що створений CSS-код.

    Знову відкрийте файл плагіна. Вище коду нашого шорткода, додайте наступні рядки:

    Це дія зареєструє файл стилів за допомогою функції wp_enqueue_scripts, що є правильним способом додавання стилів і скриптів в WordPress.

    Використання шорткода

    Тепер збережіть всі файли в папку з плагіном. Я назвав її wptutsplus-responsive-video-shortcode. Після цього, активуйте плагін.

    Я збираюся використовувати в якості тестового ролика Lego Superheroes video. Його унікальний ідентифікатор — O56p5nOYNHo, скопіювати його можна з URL-адреси при перегляді відео на YouTube. У новій запису або сторінці, додайте наступний шорткод:

    [responsive-video identifier=»O56p5nOYNHo»]

    Збережіть запис і перегляньте її. Ви побачите, що відео транслюється, як показано на зображенні нижче:

    Тепер, спробуйте змінити розмір вікна браузера або переглянути запис з мобільного пристрою. Відео автоматично змінить свої розміри:

    Висновок

    Отже, тепер ви можете вбудовувати потокове відео з YouTube на свій сайт без використання візуального редактора і не турбуючись про сумісність з різними розмірами пристроїв відображення.

    Переклад статті «Creating a Shortcode for Responsive Video» був підготовлений дружною командою проекту Сайтостроение від А до Я.

    ЭТО МОЖЕТ БЫТЬ ИНТЕРЕСНОЕЩЕ ОТ АВТОРА