Как вставить 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 и его влияние на скорость работы сайта.