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

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

Что такое iFrame?

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

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

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

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

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

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

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

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

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

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

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

Недостатки

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

До

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

После

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

Разница в производительности огромна. После использования плагина число запросов увеличилось с 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-сайт

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

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

Заключение

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

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

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