Как вставить iframe в wordpress

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

Для вставки iframe откройте редактор страницы, нажмите «Добавить блок» и выберите «Пользовательский HTML». Вставьте код вида:

<iframe src="https://example.com" width="600" height="400" frameborder="0" allowfullscreen></iframe>

После этого переключитесь в режим предварительного просмотра, чтобы убедиться, что содержимое корректно отображается. Некоторые темы могут применять ограничения через фильтры безопасности, такие как wp_kses(). В этом случае потребуется изменить функции темы или использовать фильтр allowed_html через файл functions.php.

Также важно убедиться, что источник iframe поддерживает встраивание – многие сайты ограничивают это через заголовки X-Frame-Options и Content-Security-Policy. Если контент не загружается, проверьте консоль браузера на наличие соответствующих ошибок.

Где найти HTML-редактор в блоке WordPress

Чтобы получить доступ к HTML-редактору в редакторе блоков (Gutenberg), выберите нужный блок, кликните по значку с тремя точками в панели инструментов блока и выберите пункт «Редактировать как HTML». Это переключит блок в режим исходного кода.

Для вставки кода вне конкретного блока используйте специальный блок «Пользовательский HTML». Нажмите кнопку «+» (добавить блок), введите в поиск «HTML» и выберите «Пользовательский HTML». Вставьте iframe-код в появившееся поле и сохраните.

Если требуется вставить iframe в уже существующий абзац, лучше заменить его на блок «Пользовательский HTML», так как большинство стандартных блоков, таких как «Абзац» или «Изображение», не поддерживают вставку HTML-кода напрямую.

Для редактирования всей страницы или записи на уровне исходного кода нажмите на три точки в правом верхнем углу редактора и выберите «Редактор кода». Это откроет весь контент страницы в HTML-формате, где можно вставить iframe в любое нужное место.

Как вставить iframe в блок «Код» редактора Gutenberg

Откройте редактор Gutenberg и добавьте новый блок. В списке блоков выберите «Код» (не «HTML» и не «Пользовательский HTML»). Этот блок предназначен для отображения кода без его интерпретации WordPress.

Вставьте тег <iframe> внутрь блока. Например:

<iframe src="https://example.com" width="600" height="400" frameborder="0" allowfullscreen></iframe>

Этот код будет отображаться как текст, а не как активный iframe. Чтобы iframe работал, используйте блок «Пользовательский HTML», а не «Код».

Добавьте блок «Пользовательский HTML», вставьте в него iframe и нажмите «Просмотр». WordPress не удалит iframe, если его атрибуты безопасны (отсутствует JavaScript, запрещённые домены и т.п.).

Если iframe не отображается, проверьте: не запрещает ли источник встраивание через заголовки X-Frame-Options или Content-Security-Policy. Также убедитесь, что в настройках сайта не установлены фильтры, автоматически удаляющие iframe (например, в functions.php или фильтры безопасности).

Добавление iframe в классический редактор WordPress

Классический редактор WordPress поддерживает вставку HTML-кода напрямую, что позволяет внедрять iframe без использования плагинов. Однако важно учитывать особенности его обработки тегов.

1. Перейдите в режим «Текст» (не «Визуально»), чтобы отключить автоматическое форматирование редактором.
2. Вставьте код iframe вручную. Пример:

   <iframe src="https://example.com" width="600" height="400" frameborder="0" allowfullscreen></iframe>

3. Убедитесь, что src начинается с https – WordPress может удалить iframe с небезопасным источником.
4. Не переключайтесь обратно в режим «Визуально» после вставки – редактор может удалить или изменить код.

Если после сохранения контента iframe исчезает, это может быть вызвано фильтрацией HTML редактором. Для отключения фильтра можно добавить следующий код в файл functions.php вашей темы:

remove_filter('content_save_pre', 'wp_filter_post_kses');
remove_filter('content_filtered_save_pre', 'wp_filter_post_kses');

После этого WordPress перестанет автоматически удалять iframe из контента.

Обход ограничений WordPress на вставку iframe

По умолчанию WordPress фильтрует теги iframe в визуальном редакторе для защиты от внедрения вредоносного кода. Однако существуют методы вставки iframe без использования плагинов и без потери кода при сохранении.

1. Использование режима «Текст» (HTML-редактор): переключитесь из визуального редактора в режим «Текст» и вставьте код iframe вручную. Пример:

<iframe src="https://example.com" width="600" height="400" frameborder="0" allowfullscreen></iframe>

После вставки избегайте возврата в визуальный редактор, чтобы код не был автоматически удалён или изменён.

2. Добавление iframe через кастомный блок HTML в редакторе Gutenberg: в блоке «HTML» вставьте нужный код iframe. Это безопаснее, так как Gutenberg сохраняет структуру HTML без изменений.

3. Изменение фильтра wp_kses_post: добавьте следующий код в файл functions.php вашей темы или в custom plugin, чтобы разрешить тег iframe на глобальном уровне:

function allow_iframes_in_posts($allowedposttags) {
$allowedposttags['iframe'] = array(
'src'             => true,
'height'          => true,
'width'           => true,
'frameborder'     => true,
'allowfullscreen' => true,
'loading'         => true,
'referrerpolicy'  => true
);
return $allowedposttags;
}
add_filter('wp_kses_allowed_html', 'allow_iframes_in_posts', 10, 1);

Этот способ работает при включённой фильтрации HTML и позволяет сохранить контроль над безопасностью.

4. Размещение iframe в шаблонах темы: если требуется вставка iframe вне редактора, поместите его напрямую в файлы шаблона, например, в page.php или single.php:

<?php echo '<iframe src="https://example.com" width="600" height="400"></iframe>'; ?>

Этот подход исключает вмешательство редактора и позволяет использовать iframe без ограничений.

Настройка размеров и параметров iframe вручную

Для точной настройки размеров iframe используйте атрибуты width и height>. Например:

<iframe src="https://example.com" width="800" height="600"></iframe>

<iframe src="https://example.com" style="width:100%; height:500px;"></iframe>