Как вставить iFrame на WordPress-сайт

Не секрет, что статическая веб-страница с меньшим количеством контента загружается намного быстрее, чем динамическая страница с изображениями и видео. Но эту проблему можно решить с помощью iFrame.

Что такое iFrame?

Что такое iFrame?

iFrame – элемент HTML для отображения контента с другого сайта на своем собственном. Он выглядит как дополнительное окно, через которое пользователь может взаимодействовать с контентом, размещенном на другом сайте.

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

Например, если транслировать видео с YouTube на своем сайте, то пользователи смогут просматривать его без дополнительной нагрузки на сервер.

Примеры использования iFrame

Рассмотрим несколько примеров iFrame, которые используются для отображения информации.

Примеры использования iFrame
Примеры использования iFrame - 2

Преимущества и недостатки iFrame

В использовании iFrame на WordPress-сайте есть и преимущества, и недостатки.

Преимущества

  • Позволяет вставлять визуальный контент.
  • Может отображать несколько рекламных объявлений.
  • Удобный способ отображения контента из внешнего источника в любом месте сайта.
  • Безопасно, поскольку у пользователей нет доступа к исходному коду контента.

Недостатки

  • iFrame могут замедлять веб-страницу.
  • Могут быть источником опасности, если ведут на вредоносные сайты.
  • Не все типы устройств поддерживают iFrame.
  • Ухудшают показатели SEO сайта.

Как вставить iFrame на WordPress-сайт, используя плагин

Существует довольно много подобных плагинов. Мы рассмотрим один из них –Advanced iFrame.

Чтобы установить плагин, просто войдите в панель администрирования WordPress и перейдите в раздел «Плагины» → «Добавить новый» и найдите плагин Advanced iFrame.

Как вставить iFrame на WordPress-сайт, используя плагин

После установки и активации плагина перейдите в раздел меню «Advanced iFrame», вкладка «Basic Settings».

Как вставить iFrame на WordPress-сайт, используя плагин - 2

Здесь можно установить ширину, высоту, границы и вид прокрутки iFrame.

Чтобы сохранить необходимые настройки и создать шорткод, нажмите кнопку «Generate a shortcode for the current settings».

Скопируйте код и вставьте его на страницу сайта, на которой необходимо разместить iFrame.

Ширина и высота iFrame определены внутри шорткода. При необходимости их можно менять вручную.

Вот пример размещения фрейма с помощью шорткода на одной из страниц сайта.

Чтобы изменить ширину или высоту фрейма, поменяйте значения размеров в шорткоде.

[advanced_iframe use_shortcode_attributes_only="true" src="https://www.wpblog.com/" width="100%" height="600" id="advanced_iframe"]

Проведем быстрый тест скорости работы WordPress-сайта до и после использования плагина для встраивания iFrame.

До

После

Разница в производительности огромна. После использования плагина количество запросов увеличилось с 8 до 98, а показатели производительности снизились с 96 до 86.

Как вручную вставить iFrame на WordPress-сайт

Синтаксис тега iFrame:

<iFrame src =”your_webpage_url”>

Чтобы установить необходимую ширину и высоту фрейма, добавьте в HTML-код соответствующие атрибуты и значения:

<iFrame src = “https://cloudways.com/ “ width= “100%” height=”300px” frameborder =”1” scrolling = “yes” align = “left”></iFrame>

Проведем еще один тест скорости работы сайта, чтобы проанализировать производительность сайта до и после встраивания iFrame без помощи плагина.

До

Как вручную вставить iFrame на WordPress-сайт

После

Как вручную вставить iFrame на WordPress-сайт - 2

Встраивание iFrame без помощи плагина демонстрирует практически аналогичные показатели скорости.

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

Заключение

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

Ангелина Писанюкавтор-переводчик статьи «How to Embed WordPress iFrame With Or Without a Plugin»