Як у WordPress зробити вкладення адаптивними

Адаптивний веб-дизайн необхідний для забезпечення на мобільних пристроях зручного досвіду користувача (UX). Коли ви вбудовуєте певні типи контенту на сайт WordPress, особливо відео та кадри YouTube, вони не завжди добре демонструються.

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

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

Важливість адаптивних вбудов в WordPress

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

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

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

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

Роблячи свої вбудовування адаптивними, ви зводите до мінімуму обсяг прокручування та масштабування, які доводиться робити користувачам, щоб з комфортом переглядати та використовувати ваш контент на своїх смартфонах та планшетах. У такому разі ваш сайт буде естетичним та зручним для відвідувачів.

Методи адаптації вкладень у WordPress

Щоб зробити вбудовування WordPress адаптивним, можете використовувати два основних методи: використання плагіна і ручне вбудовування.

Метод 1. Використовуйте плагін

Якщо ви не бажаєте працювати з кодом або редагувати файли вашої теми, використовуйте плагін EmbedPress. Є й інші безкоштовні плагіни, ми зупинимося на цьому:

Цей плагін простий у використанні. Він забезпечує швидкий і простий спосіб вбудовувати різні типи контенту, включаючи відео YouTube, пости із соціальних мереж та Документи Google. Вбудовуючи контент через цей плагін, він автоматично стає адаптивним.

Щоб використовувати його, встановіть та активуйте плагін на своєму сайті WordPress. Потім перейдіть на сторінку або запис, куди хочете додати адаптивну версію, що вбудовується.

У редакторі клацніть значок (+), а потім знайдіть блок EmbedPress. Він відобразить список підтримуваних додатків і платформ, з яких ви можете вбудовувати контент:

Виберіть необхідний (як приклад візьмемо YouTube), вставте URL-адресу вмісту в поле посилання, натисніть кнопку «Вбудувати»:

Зверніть увагу, що після встановлення EmbedPress на свій сайт WordPress, ви можете додавати інші медіа, такі як пости Instagram, просто вставивши URL-адресу свого редактора. Плагін автоматично перетворює це посилання адаптивний вбудований контент.

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

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

Дивіться також:

Добірку найкращих YouTube плагінів для WordPress 2020

Метод 2: вручну відредагуйте файли вашої теми

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

Перед використанням цього методу створіть резервну копію свого сайту. Щоб змінити ваші зміни під час інсталяції оновлень, подумайте про дочірню тему.

Коли ви будете готові розпочати роботу, увійдіть до диспетчера файлів або по FTP і відкрийте файл style.css вашої поточної теми WordPress. Потім скопіюйте та вставте у файл наступний фрагмент коду:

.iframe-container {
  overflow: hidden;
  padding-top: 56.25%;
  position: relative;
}
.iframe-container iframe {
  border: 0;
  height: 100%;
  left: 0;
  position: absolute;
  top: 0;
  width: 100%;
}

Тепер, коли ви захочете зробити iframe, що вбудовується, чуйним, оберніть його тегом DIV із класом iframe-container. Допустимо, потрібно вбудувати відео з YouTube у записі WordPress.

Перший крок – отримайте код для вбудовування з YouTube. Перейдіть до відео YouTube, яке потрібно вбудувати, а потім натисніть кнопку «Поділитися». Виберіть Вставити опцію з списку:

Відкриється панель, де відображається код впровадження iframe. Скопіюйте це. Потім перейдіть до запису WordPress, в який ви хочете включити вбудований контент, і вставте код вбудовування в блок Custom HTML:

Наступний крок – укласти код у тег div із класом iframe-контейнера, який додали у файл style.css вашої теми. У нашому прикладі це виглядатиме так:

<iframe width="560" height="315" src="https://www.youtube.com/embed/qnretr_0cRA" frameborder="0" allow="accelerometer; autoplay; encrypted-media; gyroscope; picture-in-picture" allowfullscreen></iframe>

Після цього ви зможете попередньо переглянути відео в редакторі:

Збережіть запис.

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

У цьому пості ми обговорили два способи, як зробити WordPress вкладення адаптивними:

1. Плагін EmbedPress або подібні. Вони автоматично зроблять вбудований контент YouTube, Instagram та Google адаптивним.
2. Вручну відредагувати файли вашої теми та обернути код вбудовування у тег div із класом iframe-container.

Джерело: torquemag.io

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

редактор wpcafe

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