Содержание статьи
Рекомендация: не используйте iframe вручную. Это неудобно, не адаптивно, ломается в редакторе блоков и не поддерживает AMP. Вместо этого – подключите API, обрабатывающее вставку ссылок в визуальный блок. Минимум настроек. Максимум результата.
Ссылки из YouTube, Vimeo, Twitter, Instagram и десятков других источников можно превратить в визуальные элементы прямо в редакторе. Для этого потребуется плагин, который подхватывает внешнюю ссылку, передаёт её на обработку в сторонний API и получает HTML-обёртку. Всё происходит без перезагрузки страницы.
Важно: редактор Gutenberg поддерживает не все форматы ссылок. Например, Twitter работает штатно, но некоторые видеохостинги – нет. Поэтому критично правильно указывать ссылку: без параметров, без обрезанных GET-запросов.
Внимание! Неправильный формат URL может вызвать пустой блок вместо превью. Проверяйте ссылку через внешний валидатор перед публикацией.
Рекомендуемая структура подключения:
function add_embed_support() {
wp_oembed_add_provider(\'https://example.com/*\', \'https://api.embed.service/oembed\', true);
}
add_action(\'init\', \'add_embed_support\');
Содержимое обрабатывается через oEmbed, если активен фильтр the_content. Обязательно проверьте, не отключён ли он вашей темой. Часто кастомные шаблоны исключают его для ускорения загрузки.
Если вы работаете с редактором ACF или создаёте свои блоки, добавьте поддержку в поле напрямую:
echo wp_oembed_get(get_field(\'video_url\'));
Не злоупотребляйте автозагрузкой всех вставок. Это может тормозить страницу. Используйте ленивую загрузку или предварительную генерацию превью в кэш.
Важно помнить: внешний API может быть недоступен. Подумайте об альтернативном варианте визуализации, если сервис перестаёт отвечать.
Иногда внешняя ссылка меняет структуру, и вставка перестаёт работать. В таких случаях ручной контроль и ревизия опубликованных записей обязательны. Для массовой проверки используйте SQL-запрос, извлекающий все поля с внешними ссылками.
Пример запроса для проверки базы:
SELECT ID, post_title, post_content
FROM wp_posts
WHERE post_content LIKE \'%example.com%\';
Без прямого доступа к HTML вставке вы не сможете контролировать видимость элементов на мобильных. Поэтому имеет смысл создать обёртку-контейнер с max-width и class, и подгружать стили отдельно.
Контроль. Автоматизация. Надёжность. Всё решает правильная интеграция API и шаблона.
Embedly для WordPress: простое встраивание контента
Подключите модуль oEmbed через стандартный REST-интерфейс. Без него автоматическая интерпретация внешних медиа не работает. Проверка: вставьте URL YouTube в редактор – если видео не отобразилось, модуль не активен.
Не используйте старые плагины для интеграции – с версии 5.0 редактор Gutenberg поддерживает внешние источники напрямую. Исключение: кастомные домены, которые не обрабатываются по умолчанию. Их нужно вручную добавить через add_oembed_provider.
Важно: если URL не работает, проверьте, не обрезан ли он при вставке. Один лишний пробел ломает парсинг!
Пример добавления источника:
function custom_embed_provider() {
wp_oembed_add_provider(\'https://example.com/*\', \'https://example.com/oembed\');
}
add_action(\'init\', \'custom_embed_provider\');
Вставка во внутренние поля ACF? Используйте wp_oembed_get():
$embed_code = wp_oembed_get(get_field(\'custom_url\'));
echo $embed_code;
Проблемы с кэшированием? Очистите транзиенты через delete_transient. Или используйте фильтр oembed_ttl, чтобы задать минимальный срок хранения:
add_filter(\'oembed_ttl\', function() { return 3600; });
Внимание! Некоторые сайты требуют авторизацию на стороне API. Без ключей или токена вы получите пустой блок вместо медиавставки.
Проверка поддержки URL – в консоли используйте WP_oEmbed::get_providers(). Эта функция возвращает массив активных шаблонов. Не верьте визуальному редактору – он может отображать превью по кэшу, даже если провайдер отключен.
Реальные ограничения появляются при использовании кастомных пост-типов. В этом случае убедитесь, что редактор поддерживает editor и custom-fields в supports:
register_post_type(\'video_embed\', [
\'supports\' => [\'title\', \'editor\', \'custom-fields\'],
\'public\' => true
]);
| Источник | Поддержка | Тип контента |
|---|---|---|
| YouTube | По умолчанию | Видео |
| Сложности после API-изменений | Посты | |
| Vimeo | Да | Видео |
| Требуется токен | Медиа |
Установка и активация плагина Embedly в WordPress
Открой админ-панель. Перейди в раздел Плагины → Добавить новый. В поиске введи Embedly. Не перепутай: автор должен быть Embedly Inc. Установка – одна кнопка. Жми Установить, затем Активировать. Всё.
Теперь внимательно: после активации плагин не заработает сам. Нужен API-ключ. Без него – тишина.
Иди на сайт сервиса. Создай учётную запись. Сразу после регистрации – ключ. Копируй.
Возвращайся в консоль. Раздел Настройки → Embedly появится только после активации. Вставь ключ. Сохрани. Готово? Проверяй.
Важно! Если ключ неверный или истёк, вставка работать не будет, а ошибок в интерфейсе ты не увидишь.
Теперь проверь. Открой запись или страницу. Вставь ссылку на внешний ресурс – YouTube, Twitter, Instagram. Нажми «Обновить». Посмотри на фронте. Если вместо блока – просто текстовая ссылка, значит что-то пошло не так. Проверь API, конфликт плагинов, кеш.
Разработчики иногда используют код, чтобы вставить ссылку напрямую через фильтр:
add_filter( \'embed_oembed_discover\', \'__return_true\' );
Этот фильтр активирует автообнаружение oEmbed, если оно вдруг отключено. Особенно часто ломается после кастомизации темы.
Помните: многие конструкторы блоков могут конфликтовать с автовставкой. Проверь совместимость!
Если сайт на мультисайте – придётся активировать отдельно в каждой сети. Автоматически он не распространяется. И да, не забывай про кеш. Часто именно он маскирует проблему. Отключи, проверь снова.
Всё работает? Значит ты в игре. Нет? Логируй ошибки, используй wp_debug. Без этого не разобраться.
Подключение API-ключа Embedly и настройка доступа
Сначала получите ключ доступа на платформе разработчика: зарегистрируйтесь, подтвердите почту, перейдите в панель управления и скопируйте API Token.
В WordPress не нужно изобретать велосипед. Откройте functions.php вашей темы или создайте собственный плагин. Вставьте следующий код:
function custom_embedly_api_key() {
wp_oembed_add_provider( \'https://yourdomain.com/*\', \'https://api.embed.ly/1/oembed?key=ВАШ_КЛЮЧ\', true );
}
add_action( \'init\', \'custom_embedly_api_key\' );
Замените ВАШ_КЛЮЧ на реальный токен. Без него запросы будут отклоняться. Никаких исключений. Никаких поблажек.
Требуется HTTPS. Без защищенного соединения большинство внешних источников откажутся отдавать медиаданные. Проверьте SSL, убедитесь в валидности сертификата. Ошибка здесь – пустой экран вместо блока.
Внимание! Платформа жестко ограничивает частоту обращений: бесплатный тариф – до 5 тыс. вызовов в месяц. Превысите – получите 403 без объяснений.
Настройка проксирования запросов через ваш сервер – спорное решение. Иногда помогает обойти лимиты, но требует кастомной маршрутизации и кеширования. Для этого подойдут фильтры pre_oembed_result и oembed_fetch_url.
add_filter( \'oembed_fetch_url\', function( $url, $args ) {
// Проксируйте или модифицируйте URL здесь
return $url;
}, 10, 2 );
Не забудьте про отладку. Используйте wp_oembed_get() вручную и проверяйте, что возвращается JSON. Ошибки авторизации, неверный формат, истекший ключ – всё это проявится сразу.
Важно помнить: обновление ядра WordPress или переход на новую тему может сбросить регистрацию провайдеров. Проверяйте после каждого апдейта.
Нет интерфейса? Не беда. Используйте REST-запросы напрямую или кэшируйте полученный JSON через transients. Пример:
$data = get_transient( \'custom_embed_cache\' );
if ( false === $data ) {
$response = wp_remote_get( \'https://api.embed.ly/1/oembed?url=...\' );
$data = wp_remote_retrieve_body( $response );
set_transient( \'custom_embed_cache\', $data, HOUR_IN_SECONDS );
}
Хочешь надёжности – не надейся на плагины. Только ручная интеграция даёт контроль. И только она позволяет просчитывать каждый шаг.
Встраивание ссылок из YouTube, Twitter и других сервисов через Embedly
Сразу: добавление URL из YouTube или Twitter автоматически преобразуется в интерактивный блок. Никаких ручных вставок iframe. Просто вставьте ссылку в редактор – классический или блоковый. Всё.
Но есть нюанс: редактор Gutenberg иногда конфликтует с плагинами, использующими внешний API. Особенно на нестабильных хостингах или при слабом ответе сервера. Решение – отключить автоматическое преобразование ссылок и вставлять через shortcode:
Twitter? То же самое. Но обращайте внимание на формат: вставляйте только полную ссылку на твит, а не сокращённую или мобильную версию:
https://twitter.com/elonmusk/status/1234567890
Важно! Некоторые темы блокируют внешние вызовы из-за настроек безопасности. В этом случае визуальный блок не загрузится. Проверяйте через консоль браузера ошибки CORS или mixed content.
Если ссылка не подгружается – не теряйте время. Откройте «Настройки» → «Медиафайлы» и проверьте, включён ли параметр «Автоматически вставлять мультимедиа при добавлении URL». Иногда он сбрасывается после обновлений.
И не забывайте: Instagram, TikTok, Facebook требуют авторизации API с 2020 года. Без токена или подключённого аккаунта будет просто ссылка, без визуального элемента. Это ограничение платформ, а не системы публикации.
Внимание! Если используете кэширование на уровне сервера или плагинами типа WP Rocket – сбрасывайте кэш после вставки новых ссылок. Без этого обновления не подтянутся, и блоки останутся пустыми.
Хаос начинается, когда пользователь вставляет ссылку, а она отображается просто как текст. Причина – конфликт с фильтрами обработки контента. Проверьте, не отключён ли фильтр the_content в вашей теме. Без него никакие медиа не появятся.
Если нужны кастомные параметры (например, выключить рекомендации в конце видео YouTube) – используйте HTML-блок:
Но тогда теряется адаптивность. Придётся добавлять стили вручную или через CSS-классы.
Платформы, которые работают корректно без API: YouTube, Twitter, Vimeo, SoundCloud, SlideShare. Остальные – на свой страх и риск. Проверка обязательна.
Не верьте плагинам, обещающим поддержку 500+ сервисов. Работают стабильно только 5–6. Остальное – либо неактуально, либо требует ручной настройки.
Решение распространённых проблем при использовании Embedly в WordPress
Если вставка ссылки не работает – первым делом отключите все дополнения, связанные с кешированием и оптимизацией. Да, даже Autoptimize. Некоторые из них урезают или переписывают скрипты. Проверяйте результат в режиме инкогнито.
Не отображается предварительный просмотр? Откройте консоль браузера (F12) и проверьте наличие ошибок CORS или 403. Часто проблема в неправильной конфигурации REST API или в блокировке со стороны хостинга. Решение – whitelisting IP-адресов и отключение ModSecurity.
Важно помнить: если используется Cloudflare – убедитесь, что отключены Rocket Loader и автоматическая минификация JavaScript.
Иногда сниппет не подгружается вообще. Проверьте, какой редактор активен. С Gutenberg возникают конфликты в блочных вставках. Используйте HTML-блок или переключайтесь на классический редактор. А ещё лучше – кастомный шорткод:
function custom_oembed_shortcode($atts) {
$a = shortcode_atts([\'url\' => \'\'], $atts);
return wp_oembed_get($a[\'url\']);
}
add_shortcode(\'oembed\', \'custom_oembed_shortcode\');
Заметили, что ссылки отображаются текстом? Значит, отключён автообнаружение. Проверьте: Settings → Writing → Convert URLs into links. Если всё включено – проверьте functions.php на наличие фильтров, отключающих wp_embed_register_handler.
Внимание! Некоторые темы на базе Elementor, WPBakery и других билдерах могут переопределять стандартный механизм парсинга. Это не баг, это фича. Ищите, где именно в шаблоне перегружается обработка shortcodes или embeds.
Ошибки с белым экраном? Это конфликт JavaScript. Подключите консоль, следите за Uncaught ReferenceError. Удаляйте плагины по очереди. Начинайте с social sharing и lazyload скриптов – они чаще всего мешают.
Ничего не помогает? Тогда откройте wp-config.php и включите режим отладки:
define(\'WP_DEBUG\', true);
define(\'WP_DEBUG_LOG\', true);
define(\'WP_DEBUG_DISPLAY\', false);
Потом проверьте wp-content/debug.log. Там всегда что-то есть.
- Отключайте lazyload медиафайлов
- Проверяйте SSL-сертификаты на целевых URL
- Исключайте проблему через REST API (ручной вызов
/oembed/1.0/embed)
Не бойтесь копаться в коде. Там часто правда. И ответы.