Хук embed_oembed_html в WordPress позволяет фильтровать HTML-код, генерируемый oEmbed, когда он встраивается в пост. Этот хук полезен для создания пользовательских обёрток, добавления стилей или других настроек для разных медиа-ресурсов, таких как YouTube, Vimeo и другие сервисы, поддерживающие oEmbed.
add_filter( 'embed_oembed_html', 'wrap_all_oembed_in_div', 10, 4 );
function wrap_all_oembed_in_div( $cache, $url, $attr, $post_id ) {
return '<div class="custom-oembed-wrapper">' . $cache . '</div>';
}
Хук embed_oembed_html принимает закешированный HTML-код ($cache), URL запроса ($url), атрибуты шорткода ($attr) и ID поста ($post_id). В процессе фильтрации можно изменить HTML-код oEmbed, добавив, например, кастомные обёртки для стилизации или обработки видео и других медиафайлов.
Пример 1: Обернуть все oEmbed в пользовательский div для стилизации
С помощью этого фильтра можно добавить обёртку ко всем oEmbed, чтобы, например, применять универсальные CSS-стили для встраиваемого медиа-контента.
add_filter( 'embed_oembed_html', 'wrap_all_oembed_in_div', 10, 4 );
function wrap_all_oembed_in_div( $cache, $url, $attr, $post_id ) {
return '<div class="custom-oembed-wrapper">' . $cache . '</div>';
}
В данном примере мы оборачиваем любой oEmbed-контент в div с классом custom-oembed-wrapper. Этот подход удобно использовать для адаптивного оформления или общего управления стилями для всех oEmbed.
Пример 2: Обёртка только для видео с YouTube
Этот пример показывает, как добавить обёртку только для YouTube-видео, не затрагивая другие oEmbed-элементы.
add_filter( 'embed_oembed_html', 'wrap_youtube_oembed', 10, 4 );
function wrap_youtube_oembed( $cache, $url, $attr, $post_id ) {
if ( strpos( $url, 'youtube.com' ) !== false || strpos( $url, 'youtu.be' ) !== false ) {
return '<div class="youtube-video-wrapper">' . $cache . '</div>';
}
return $cache;
}
Код выше проверяет, содержится ли в URL youtube.com или youtu.be. Если да, то HTML-код оборачивается в div с классом youtube-video-wrapper.
Пример 3: Адаптивная обёртка для Vimeo
Чтобы сделать Vimeo-видео адаптивными, можно создать обёртку с CSS-классом, который позволит корректно отображать видео на разных устройствах.
add_filter( 'embed_oembed_html', 'wrap_vimeo_in_responsive_div', 10, 4 );
function wrap_vimeo_in_responsive_div( $cache, $url, $attr, $post_id ) {
if ( strpos( $url, 'vimeo.com' ) !== false ) {
return '<div class="vimeo-responsive-wrapper">' . $cache . '</div>';
}
return $cache;
}
В данном случае все ссылки на Vimeo оборачиваются в div с классом vimeo-responsive-wrapper, который можно стилизовать с помощью CSS для адаптивности.
Пример 4: Добавление автоматической подписки под видео
С помощью хука embed_oembed_html можно автоматически добавлять подпись или другой текст под видео, например, для указания авторства.
add_filter( 'embed_oembed_html', 'add_caption_to_youtube', 10, 4 );
function add_caption_to_youtube( $cache, $url, $attr, $post_id ) {
if ( strpos( $url, 'youtube.com' ) !== false || strpos( $url, 'youtu.be' ) !== false ) {
$caption = '<p class="video-caption">Смотрите больше на нашем канале YouTube!</p>';
return '<div class="youtube-video-wrapper">' . $cache . $caption . '</div>';
}
return $cache;
}
Этот код добавляет текстовую подпись под YouTube-видео с указанием на подписку. Подпись оформляется в виде параграфа с классом video-caption.
Пример 5: Фильтрация HTML для сторонних сервисов
Хук также можно использовать для фильтрации HTML-кода, чтобы изменить стандартное поведение oEmbed для определённых сервисов. Например, можно настроить для Twitter специальный стиль.
add_filter( 'embed_oembed_html', 'custom_twitter_embed_style', 10, 4 );
function custom_twitter_embed_style( $cache, $url, $attr, $post_id ) {
if ( strpos( $url, 'twitter.com' ) !== false ) {
return '<div class="twitter-embed">' . $cache . '</div>';
}
return $cache;
}
Если ссылка указывает на Twitter, то HTML-код оборачивается в div с классом twitter-embed, что позволяет добавить специфические стили для встроенных твитов.
Пример 6: Логирование всех встраиваний oEmbed для отладки
Этот пример показывает, как можно использовать хук embed_oembed_html для отладки, логируя URL и HTML-код всех встраиваний oEmbed.
add_filter( 'embed_oembed_html', 'log_oembed_embeds', 10, 4 );
function log_oembed_embeds( $cache, $url, $attr, $post_id ) {
error_log( "Embedded URL: " . $url );
error_log( "Embed HTML: " . $cache );
return $cache;
}
Этот код записывает URL и HTML-код всех встраиваемых элементов в файл журнала, что может быть полезно для анализа и отладки.
Заключение
Хук embed_oembed_html предоставляет возможность настраивать выводимый HTML-код для встроенного oEmbed-контента. С его помощью можно добавлять обёртки для стилизации, автоматически выводить подписи под видео и адаптировать внешний вид для разных сервисов, таких как YouTube, Vimeo или Twitter.