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

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

Содержание

Что такое iFrame?

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

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

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

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

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

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

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

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

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

Недостатки

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

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

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

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

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

Здесь можно установить ширину, высоту, границы и вид прокрутки 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 без помощи плагина демонстрирует практически аналогичные показатели скорости.

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

Заключение

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

Данная публикация представляет собой перевод статьи «How to Embed WordPress iFrame With Or Without a Plugin» , подготовленной дружной командой проекта Интернет-технологии.ру

Меню