
Встраивание iframe в WordPress позволяет разместить на сайте внешний контент: видео, карты, формы, презентации или даже целые страницы. Это удобно, когда стандартных инструментов редактора недостаточно, а подключение стороннего сервиса упрощает задачу.
WordPress по умолчанию не всегда пропускает iframe-код из соображений безопасности. Поэтому важно знать, какие способы доступны: от добавления кода напрямую в редактор до использования специальных плагинов. Каждый метод имеет ограничения и особенности, о которых стоит помнить заранее.
В этом руководстве будут рассмотрены практические шаги: где именно вставлять код, как избежать ошибок с фильтрацией HTML, а также какие настройки плагинов позволяют управлять безопасностью и адаптивностью встроенного содержимого.
Где найти HTML-код iframe для вставки

Код iframe чаще всего предоставляется самим сервисом, из которого вы хотите встроить контент. На видеохостингах, например YouTube или Vimeo, он находится в разделе «Поделиться» → «Встроить». Там можно скопировать готовый фрагмент кода с тегом
Карты Google Maps имеют кнопку «Поделиться» → «Код для вставки карты». Скопированный HTML-фрагмент содержит ссылку на конкретное место и может быть вставлен без изменений.
Онлайн-сервисы для презентаций, форм и таблиц (Google Docs, Yandex Forms, SlideShare) также предоставляют раздел «Embed» или «Встроить». Каждый из них генерирует уникальный iframe-код, где указывается ссылка на документ, его размер и дополнительные параметры.
Если код отсутствует, его можно создать вручную. Для этого используется стандартный синтаксис: <iframe src="URL" width="600" height="400"></iframe>, где src – это адрес страницы или виджета, доступного для публичного встраивания.
Как открыть редактор страницы или записи в WordPress

Для вставки iframe нужно сначала открыть редактор конкретной страницы или записи. Сделать это можно через админ-панель WordPress.
- Авторизуйтесь в админке по адресу ваш-сайт.ru/wp-admin.
- В меню слева выберите:
- Записи → Все записи, если нужно редактировать статью.
- Страницы → Все страницы, если требуется изменить страницу.
- Найдите нужный материал в списке.
- Наведите курсор на название и нажмите Изменить.
Откроется визуальный редактор Gutenberg. Если используется классический редактор, интерфейс будет отличаться, но кнопка «Изменить» всегда ведет к окну редактирования содержимого.
Добавление iframe через блок «HTML-код» в редакторе Gutenberg

Откройте страницу или запись в редакторе Gutenberg и нажмите на кнопку «+», чтобы добавить новый блок.
В списке блоков выберите «HTML-код» (Custom HTML). Перед вами появится поле для вставки произвольного HTML.
Вставьте тег iframe в формате:
<iframe src=»https://пример-сайта.ru» width=»600″ height=»400″ frameborder=»0″ allowfullscreen></iframe>
Проверьте результат с помощью кнопки «Предпросмотр» в блоке. Если отображение корректное, сохраните изменения.
Для адаптивности замените фиксированные размеры на стиль с CSS, например:
<iframe src=»https://пример-сайта.ru» style=»width:100%; height:400px;» frameborder=»0″></iframe>
Используйте только надежные источники для вставки iframe, чтобы избежать проблем с безопасностью и производительностью сайта.
Использование iframe в классическом редакторе WordPress

Откройте запись или страницу в классическом редакторе и переключитесь в режим «Текст». Только в этом режиме код iframe будет воспринят корректно, так как визуальный редактор часто удаляет или искажает встроенные теги.
Вставьте код iframe в нужное место. Пример:
<iframe src="https://example.com" width="600" height="400" frameborder="0" allowfullscreen></iframe>
Изменяйте параметры width и height для подгонки размеров под макет страницы. Атрибут frameborder="0" убирает рамку, а allowfullscreen позволяет разворачивать контент на весь экран.
Сохраните изменения и проверьте отображение в режиме предпросмотра. Если код обрезается, убедитесь, что не установлены плагины безопасности или фильтры, запрещающие использование iframe.
Как задать размеры и параметры отображения iframe

Размеры задаются атрибутами width и height в пикселях или процентах. Например: <iframe src="..." width="600" height="400"></iframe>.
Для адаптивности используйте значения в процентах: width="100%". Высоту лучше фиксировать, чтобы избежать искажения контента.
Атрибут frameborder="0" отключает рамку вокруг области. Современный вариант – использовать style="border:none;".
Свойство allowfullscreen позволяет открывать встроенное видео на весь экран. Атрибут loading="lazy" откладывает загрузку до момента появления элемента в зоне видимости.
Через атрибут allow можно ограничить или разрешить функции: allow="autoplay; clipboard-write; encrypted-media".
Если требуется управлять прокруткой, используйте scrolling="yes" или scrolling="no". Однако этот атрибут устарел, вместо него рекомендуется применять CSS-правила.
Проверка работы iframe на опубликованной странице

После вставки iframe в WordPress необходимо убедиться, что он корректно отображается и функционирует. Откройте опубликованную страницу в режиме обычного просмотра, а не редактора. Обратите внимание на размеры окна iframe: ширина должна соответствовать контейнеру темы, высота – не меньше 400px для удобства просмотра контента.
Проверьте загрузку внешнего ресурса внутри iframe. Если появляется пустое пространство, сообщение об ошибке или предупреждение безопасности, это может указывать на блокировку X-Frame-Options на стороне сервера источника.
Для детальной проверки используйте инструменты разработчика браузера (F12). Вкладка Console покажет ошибки загрузки, а вкладка Network – успешные или заблокированные запросы. Особое внимание уделите кросс-доменным ограничениям и протоколу (HTTP/HTTPS).
Тестирование на разных устройствах и браузерах гарантирует корректное отображение iframe. Минимальный набор: Chrome, Firefox, Safari, Edge на десктопе и мобильные браузеры Android/iOS.
Для системного контроля можно использовать таблицу проверки:
| Проверка | Метод | Ожидаемый результат |
|---|---|---|
| Загрузка iframe | Открыть страницу в браузере | Контент отображается полностью без ошибок |
| Размер и адаптивность | Изменить ширину окна, проверить мобильные версии | Контент масштабируется, горизонтальная прокрутка отсутствует |
| Кросс-доменные ограничения | Вкладка Console в DevTools | Нет сообщений об ошибках CORS или X-Frame-Options |
| Функциональность встроенного контента | Взаимодействие с кнопками, формами или видео внутри iframe | Все элементы работают корректно |
После проверки рекомендуется очистить кэш WordPress и браузера, чтобы убедиться, что изменения видны всем пользователям.
Вопрос-ответ:
Что такое iframe и зачем он нужен в WordPress?
Iframe — это HTML-элемент, который позволяет встроить на страницу содержимое с другого сайта, например видео, карту или форму. В WordPress iframe используют для интеграции сторонних сервисов без необходимости копировать весь контент на свой сайт. Это удобно, когда нужно добавить интерактивные элементы, такие как Google Maps или YouTube-видео.
Можно ли вставлять iframe через стандартный редактор WordPress?
Да, вставку можно выполнить через блок «HTML» в редакторе Gutenberg. Достаточно создать новый блок, выбрать «Пользовательский HTML» и вставить код iframe. После этого блок будет отображать содержимое с внешнего ресурса прямо на странице или в записи. Для классического редактора можно использовать вкладку «Текст», чтобы добавить код напрямую в нужное место.
Какие ограничения существуют при использовании iframe в WordPress?
Некоторые сайты запрещают показ своего содержимого через iframe, что приводит к ошибкам отображения. Кроме того, некоторые плагины безопасности и настройки хостинга могут блокировать подобные вставки. Также стоит учитывать, что iframe может замедлять загрузку страницы, особенно если встраивается большое количество внешних элементов или видео высокого разрешения.
Как настроить размеры и другие параметры iframe в WordPress?
Размеры iframe можно регулировать с помощью атрибутов width и height в коде. Для более гибкого контроля часто используют CSS: задают ширину и высоту через стиль, можно добавлять рамки, скролл или управление позиционированием. Например, чтобы iframe адаптировался под разные устройства, применяют CSS с максимальной шириной 100% и автоматической высотой.
Есть ли более безопасный способ вставки внешнего контента, чем iframe?
Вместо iframe можно использовать встроенные виджеты или плагины, предоставляемые сервисом, который вы хотите встроить. Например, YouTube и Vimeo предлагают собственные блоки для Gutenberg. Такие методы уменьшают риск проблем с безопасностью, совместимостью и ускоряют загрузку страницы, так как код оптимизирован под WordPress.
Можно ли вставлять iframe на страницу WordPress через стандартный редактор блоков?
Да, это возможно. В редакторе блоков (Gutenberg) есть специальный блок «HTML», куда можно вставить код iframe. После добавления блока нужно скопировать код iframe с внешнего ресурса и вставить его в поле блока. После этого можно сразу видеть, как встроенный контент отображается на странице, а при необходимости можно настроить размеры или свойства рамки напрямую в коде.
Какие ограничения существуют при использовании iframe в WordPress?
При вставке iframe есть несколько важных моментов. Во-первых, не все внешние сайты разрешают встраивание их контента, это зависит от настроек безопасности сервера. Во-вторых, многие темы и плагины WordPress могут ограничивать использование iframe, чтобы избежать потенциальных угроз. Кроме того, важно следить за размерами рамки и мобильной адаптацией, иначе контент может обрезаться или неправильно отображаться на устройствах с разными экранами. Иногда полезно использовать дополнительные атрибуты, например, для прокрутки или отключения границ.
