Как встроить iFrame на WordPres-сайт вручную и с помощью плагинов

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

Что такое iFrames?

Как встроить iFrame на WordPres-сайт вручную и с помощью плагинов

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

Чаще всего iFrames используется для вывода чужого контента на сайте. Встраивание контента с помощью iFrame не считается нарушением авторских прав.

Кроме этого iFrames позволяет реализовать массовый открытый доступ к содержимому больших файлов видео, аудио или изображения. YouTube является ярким примером применения данной технологии.

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

Как использовать iFrames в WordPress

Рассмотрим три наиболее распространенных способа добавления iFrames на WordPress- сайт.

1. Вручную

Чтобы самостоятельно добавить iFrame на страницу сайта, используется следующий HTML-тег. Например:

<iframe src="example.com"></iframe>

Но следует учитывать, что с помощью  iFrames может отображать контент только с сайтов, использующих ту же версию протокола HTTP. Например, если сайт использует протокол HTTPS, то получится встраивать контент только с площадок на HTTPS.

Кроме этого некоторые сайты (в том числе Facebook и YouTube) отключают возможность ручного встраивания iFrame. Попытка отобразить на своем сайте страницу с такого ресурса приведет к выводу сообщения об ошибке.

Как встроить iFrame на WordPres-сайт вручную и с помощью плагинов

Поддержка iFrame отключена.

Вы также можете настроить параметры отображения iFrame:

  • Width — устанавливает ширину области iFrame (в пикселях).
  • Height — определяет размер окна iFrame на веб-странице (в пикселях).
  • Allow – устанавливает определенное поведение или функции по умолчанию для iFrame, такие как полноэкранный просмотр или обработка платежей.
  • Importance – установка приоритета загрузки iFrame браузером.

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

<iframe src="example.com" width="900" height="700" allow="fullscreen"></iframe>

Как встроить iFrame на WordPres-сайт вручную и с помощью плагинов

Как выглядит iFrame на веб-странице.

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

2. Использование специализированного кода для встраивания iFrames

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

В качестве примера рассмотрим, как это работает в YouTube. Перейдите к видео, которое вы хотите отобразить. Под окном видеоплеера найдите кнопку «Поделиться» и нажмите на нее.

Как встроить iFrame на WordPres-сайт вручную и с помощью плагинов

Функция YouTube «Поделиться»

Выберите вариант «Встроить».

Как встроить iFrame на WordPres-сайт вручную и с помощью плагинов

Функция встраивания в YouTube

После этого YouTube отобразит HTML-код для добавления видео в iFrame с заданными параметрами. Также можно использовать только исходный URL-адрес.

Как встроить iFrame на WordPres-сайт вручную и с помощью плагинов

Код для встраивания YouTube

Чтобы добавить ролик в WordPress-сайта, вставьте скопированный код iFrame c с помощью блока пользовательского HTML:

Как встроить iFrame на WordPres-сайт вручную и с помощью плагинов

Встраивание iframe в качестве блока пользовательского HTML

В классическом редакторе WordPress необходимо переключиться в текстовый режим и добавить код в нужное место.

Как встроить iFrame на WordPres-сайт вручную и с помощью плагинов

Встраивание iframe в классическом редакторе.

В результате вы должны получить работающий iFrame.

Как встроить iFrame на WordPres-сайт вручную и с помощью плагинов

iFrame правильно добавлен в WordPress

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

Как встроить iFrame на WordPres-сайт вручную и с помощью плагинов

Функция встраивания в Facebook

Затем выберите вариант «Вставить на сайт».

Как встроить iFrame на WordPres-сайт вручную и с помощью плагинов

Выберите функцию встраивания Facebook

После этого будет отображен фрагмент HTML. Исходный URL-адрес является наиболее важной частью кода. Хотя можно использовать дополнительные параметры.

Как встроить iFrame на WordPres-сайт вручную и с помощью плагинов

Код iframe Facebook

Добавьте этот код на страницу сайта.

Как встроить iFrame на WordPres-сайт вручную и с помощью плагинов

Iframe Facebook встроен в WordPress

3. Добавление iFrame в WordPress с помощью плагина

Наиболее популярным решением является плагин iFrame:

Как встроить iFrame на WordPres-сайт вручную и с помощью плагинов

Плагин iframe для WordPress

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

Также можно попробовать плагин Advanced iFrame:

Как встроить iFrame на WordPres-сайт вручную и с помощью плагинов

Плагин WordPress Advanced iFrame

Он позволяет добавлять iFrame на сайт, используя шорткоды. Плагин также включает в себя несколько дополнительных функций: коды безопасности для предотвращения встраивания iFrame другими пользователями, а также параметры пользовательского стиля и многое другое.

Заключение

В этой статье мы рассмотрели три метода встраивания iFrame в WordPress:

  1. Вручную.
  2. С помощью специального кода для встраивания.
  3. С помощью плагинов WordPress.

Источник

Просмотров:

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