Как в WordPress сделать вложения адаптивными

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

Встроенные фреймы по умолчанию не реагируют на размер экрана. Однако есть простые стратегии для адаптации встраиваемых файлов в WordPress. Независимо от того, вы технически подкованы или новичок в WordPress, для вас найдется быстрое и простое решение.

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

Важность адаптивных встраиваний в WordPress

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

Веб-сайт с адаптивным дизайном обеспечивает положительный UX для пользователей, независимо от используемого устройства. Текст и картинки без труда адаптируются, что не скажешь про иные элементы. Сложнее работать с встроенным контентом.

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

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

Делая встраивания адаптивными, вы сводите к минимуму объем прокрутки и масштабирования, которые приходится делать посетителям, чтобы с комфортом просматривать и использовать содержимое на ваших смартфонах и планшетах. В таком случае веб-сайт будет эстетичным и удобным для пользователей.

Способы адаптации вложений в WordPress

Чтобы сделать встраивание в WordPress адаптивным, можете без проблем использовать два основных способа: использование плагина и ручное встраивание.

Способ 1. Используйте плагин

Если вам не желаете работать с кодом или редактировать файлы темы, используйте плагин EmbedPress. Есть и иные бесплатные плагины, мы остановимся на этом:

Как в WordPress сделать вложения адаптивными
Этот плагин прост в использовании. Он обеспечивает быстрый и простой метод встраивать разные типы контента, включая видео YouTube, записи из социальных сетей и Документы Google. Встраивая контент через этот плагин, он автоматом становится адаптивным.

Чтобы использовать его, установите и активируйте плагин на веб-сайте WordPress. Далее перейдите на страницу или запись, куда хотели бы добавить адаптивную встраиваемую версию.

В редакторе щелкните значок(+), далее найдите блок EmbedPress. Он отобразит раскрывающийся список поддерживаемых приложений и платформ, с которых вы можете без проблем встраивать контент:
Как в WordPress сделать вложения адаптивными
Выберите необходимый(в виде примера возьмем YouTube), вставьте URL-адрес содержимого в поле ввода ссылки, нажмите кнопку «Встроить»:

Как в WordPress сделать вложения адаптивными
Обратите внимание, что после установки 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, которое вы планируете встроить, далее нажмите кнопку «Поделиться». Выберите Вставить опцию из списка:

Как в WordPress сделать вложения адаптивными
Откроется панель, на которой выводится код внедрения iframe. Скопируйте это. Далее перейдите к записи WordPress, в которую вы хотели бы включить встроенный контент, и вставьте код встраивания в блок Custom HTML:
Как в WordPress сделать вложения адаптивными
Следующий шаг – заключите код в тег div с классом iframe-контейнера, который добавили в файл style.css темы. В нашем примере это будет выглядеть так:

<div class="iframe-container"><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></div>

После этого вы сможете легко предварительно просмотреть видео в редакторе:
Как в WordPress сделать вложения адаптивными
Сохраните запись.

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

В этом посте мы обсудили два метода, как в WordPress сделать вложения адаптивными:

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

Добавить комментарий

Ваш адрес email не будет опубликован. Обязательные поля помечены *