Створення шорткода для чуйного відео

От

21.04.2020

809

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

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

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

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

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

За замовчуванням, вони не адаптивні. Відео, укладену в тег
‘;
}
add_shortcode (‘responsive-video’, ‘wptuts_responsive_video_shortcode’ );
?>

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

Контейнер
з класом wptuts-video-container, який буде використаний для додавання CSS-коду, який зробить відео адаптивним;
Елемент містить<br /> ;</li> <li>Посилання на відео YouTube всередині коду вставки з унікальним ідентифікатором <b>$identifier</b>, щоб однозначно визначити відео;</li> <li>Атрибут для <b>$identifier</b>, який визначить користувач при додаванні шорткода на сторінку або запис на сайті. Це означає, що йому ніколи не доведеться мати справу безпосередньо з кодом вставки.</li> </ul> <h3>Додавання CSS-коду для реалізації чуйності</h3> <p>Наступним кроком треба додати стилі, які зроблять контейнер чуйним. Створіть новий файл в редакторі коду і збережіть його під ім’ям style.css. Внесіть в нього наступні рядки:</p> <p>/*<br /> Файл стилів, що реалізує шорткод для створення чуйного контейнера з відео.<br /> Представлений CSS-код, який робить відео чуйним.<br /> */<br /> .wptuts-video-container {<br /> position: relative;<br /> padding-bottom: 56.25%;<br /> padding-top: 30px;<br /> height: 0;<br /> overflow: hidden;<br /> }<br /> .wptuts-video-container iframe {<br /> position: absolute;<br /> top:0;<br /> left: 0;<br /> width: 100%;<br /> height: 100%;<br /> }</p> <p>Ось що робить даний код:</p> <ul> <li>Робить контейнер<br /> чуйним, використовуючи властивість <b>padding-bottom</b>, щоб визначити співвідношення сторін (в даному випадку 16:9);</li> <li>Оголошення <b>padding-top</b> створює вільний простір у верхній частині контейнера;</li> <li>Використання <b>padding-bottom</b> замість <b>height</b> означає, що<br /> буде змінювати свої розміри динамічно, зберігаючи співвідношення сторін;</li> <li>Додає позиціонування на absolute для елемента <iframe>, переконавшись, що він заповнив місце, звільнений контейнером<br /> . Це робить відео чуйним.</li> </ul> <p>Тепер збережіть ваш файл стилів.</p> <h3>Реєстрація файлу стилів в плагіні</h3> <p>Фінальним кроком буде реєстрація файлу стилів в плагіні, що додасть в нього тільки що створений CSS-код.</p> <p>Знову відкрийте файл плагіна. Вище коду нашого шорткода, додайте наступні рядки:</p> <p>Це дія зареєструє файл стилів за допомогою функції <span data-href="aHR0cDovL2NvZGV4LndvcmRwcmVzcy5vcmcvUGx1Z2luX0FQSS9BY3Rpb25fUmVmZXJlbmNlL3dwX2VucXVldWVfc2NyaXB0cw==">wp_enqueue_scripts</span>, що є правильним способом додавання стилів і скриптів в WordPress.</p> <h3>Використання шорткода</h3> <p>Тепер збережіть всі файли в папку з плагіном. Я назвав її <b>wptutsplus-responsive-video-shortcode</b>. Після цього, активуйте плагін.</p> <p>Я збираюся використовувати в якості тестового ролика <span data-href="aHR0cDovL3d3dy55b3V0dWJlLmNvbS93YXRjaD92PU81NnA1bk9ZTkhv">Lego Superheroes video</span>. Його унікальний ідентифікатор — O56p5nOYNHo, скопіювати його можна з URL-адреси при перегляді відео на YouTube. У новій запису або сторінці, додайте наступний шорткод:</p> <p>[responsive-video identifier=»O56p5nOYNHo»]</p> <p>Збережіть запис і перегляньте її. Ви побачите, що відео транслюється, як показано на зображенні нижче:</p> <p></p> <p>Тепер, спробуйте змінити розмір вікна браузера або переглянути запис з мобільного пристрою. Відео автоматично змінить свої розміри:</p> <p><img decoding="async" src="data:image/svg+xml,%3Csvg%20xmlns='http://www.w3.org/2000/svg'%20viewBox='0%200%200%200'%3E%3C/svg%3E" title="Створення шорткода для чуйного відео" alt="Створення шорткода для чуйного відео" data-lazy-src="http://estdomain.com.ua/images/video-060547.png"><noscript><img decoding="async" src="http://estdomain.com.ua/images/video-060547.png" title="Створення шорткода для чуйного відео" alt="Створення шорткода для чуйного відео"></noscript></p> <h2>Висновок</h2> <p>Отже, тепер ви можете вбудовувати потокове відео з YouTube на свій сайт без використання візуального редактора і не турбуючись про сумісність з різними розмірами пристроїв відображення.</p> <p>Переклад статті «<span data-href="aHR0cDovL3dwLnR1dHNwbHVzLmNvbS90dXRvcmlhbHMvcGx1Z2lucy9jcmVhdGluZy1hLXNob3J0Y29kZS1mb3ItcmVzcG9uc2l2ZS12aWRlby8=">Creating a Shortcode for Responsive Video</span>» був підготовлений дружною командою проекту Сайтостроение від А до Я.</p> </div> <footer> <div class="td-post-source-tags"> </div> <div class="td-post-sharing-bottom"><div class="td-post-sharing-classic"><iframe loading="lazy" title="bottomFacebookLike" frameBorder="0" src="about:blank" style="border:none; overflow:hidden; width:auto; height:21px; background-color:transparent;" data-rocket-lazyload="fitvidscompatible" data-lazy-src="http://www.facebook.com/plugins/like.php?href=http://estdomain.com.ua/stvorennya-shortkoda-dlya-chujnogo-video/&layout=button_count&show_faces=false&width=105&action=like&colorscheme=light&height=21">