Как встроить 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.

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

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