Фильтр oembed_dataparse позволяет изменять HTML-код, генерируемый WordPress при встраивании oEmbed-контента (например, видео с YouTube или постов из Instagram). Этот хук полезен для кастомизации внешнего вида встроенного контента, добавления адаптивности и дополнительных элементов, таких как обертки и подписи.
apply_filters( ‘oembed_dataparse’, string $return, object $data, string $url )Фильтр oembed_dataparse принимает три параметра:
$return— HTML-код, возвращаемый провайдером oEmbed (например,<iframe>для видео YouTube).$data— объект с данными от провайдера oEmbed, включая такие параметры, какwidth,height,type,provider_nameи другие.$url— URL, который был внедрен в контент.
Этот фильтр можно использовать для модификации HTML перед его сохранением в кэше WordPress.
Пример 1: Адаптивный YouTube-плеер
В этом примере мы добавим адаптивную обертку для YouTube-видео, чтобы оно сохраняло пропорции при изменении ширины экрана.
add_filter( 'oembed_dataparse', 'responsive_youtube_embed', 10, 3 );
/**
* Добавляет адаптивную обертку для YouTube видео.
*
* @param string $return HTML код, возвращаемый oEmbed.
* @param object $data Объект данных oEmbed.
* @param string $url URL встраиваемого контента.
* @return string Обновленный HTML код.
*/
function responsive_youtube_embed( $return, $data, $url ) {
if ( 'YouTube' === $data->provider_name ) {
$return = "<div class='youtube-responsive'>{$return}</div>";
}
return $return;
}
Добавьте CSS в style.css вашей темы для обеспечения адаптивности:
.youtube-responsive {
position: relative;
padding-bottom: 56.25%; /* соотношение сторон 16:9 */
height: 0;
overflow: hidden;
}
.youtube-responsive iframe {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
}
Этот код оборачивает YouTube-видео в контейнер, который делает его адаптивным.
Пример 2: Кастомный вывод с заголовком видео
Этот пример добавляет дополнительный блок с заголовком видео под встроенным плеером YouTube.
add_filter( 'oembed_dataparse', 'custom_youtube_player_with_title', 10, 3 );
/**
* Добавляет заголовок видео под YouTube-плеером.
*
* @param string $return HTML код oEmbed.
* @param object $data Объект данных oEmbed.
* @param string $url URL контента.
* @return string Обновленный HTML код.
*/
function custom_youtube_player_with_title( $return, $data, $url ) {
if ( 'YouTube' === $data->provider_name ) {
$return = "<div class='video-container'>
<div class='video-player'>{$return}</div>
<div class='video-title'>{$data->title}</div>
</div>";
}
return $return;
}
Добавьте стили для оформления:
.video-container {
margin-bottom: 20px;
}
.video-title {
font-size: 16px;
font-weight: bold;
text-align: center;
margin-top: 5px;
}
Код добавляет заголовок видео под плеером, оформленный для гармоничного отображения.
Пример 3: Адаптация размера для нестандартных пропорций
Иногда медиа-контент имеет нестандартные пропорции, например, соотношение 4:3. Этот пример добавляет класс, чтобы обернуть такие видео с соответствующим CSS для адаптации.
add_filter( 'oembed_dataparse', 'responsive_oembed_with_custom_ratio', 10, 3 );
/**
* Добавляет класс для видео с пропорциями 4:3.
*
* @param string $return HTML код oEmbed.
* @param object $data Объект данных oEmbed.
* @param string $url URL контента.
* @return string Обновленный HTML код.
*/
function responsive_oembed_with_custom_ratio( $return, $data, $url ) {
$aspect_ratio_class = '';
if ( 'video' === $data->type && isset( $data->width, $data->height ) ) {
$aspect_ratio = round( $data->height / $data->width, 2 );
if ( $aspect_ratio === round( 3 / 4, 2 ) ) {
$aspect_ratio_class = 'embed-responsive-4-3';
}
}
return "<div class='embed-container {$aspect_ratio_class}'>{$return}</div>";
}
Добавьте CSS для разных соотношений сторон:
.embed-container {
position: relative;
overflow: hidden;
width: 100%;
}
.embed-responsive-4-3 {
padding-bottom: 75%; /* Соотношение сторон 4:3 */
}
.embed-container iframe {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
}
С этим кодом видео с пропорциями 4:3 получат обертку, сохраняющую правильное соотношение сторон.
Пример 4: Условная кастомизация для различных провайдеров
В этом примере мы изменим код для разных провайдеров, например, добавив классы для разных типов контента.
add_filter( 'oembed_dataparse', 'custom_oembed_for_providers', 10, 3 );
/**
* Добавляет кастомный класс для разных провайдеров oEmbed.
*
* @param string $return HTML код oEmbed.
* @param object $data Объект данных oEmbed.
* @param string $url URL контента.
* @return string Обновленный HTML код.
*/
function custom_oembed_for_providers( $return, $data, $url ) {
$provider_class = '';
if ( 'YouTube' === $data->provider_name ) {
$provider_class = 'embed-youtube';
} elseif ( 'Vimeo' === $data->provider_name ) {
$provider_class = 'embed-vimeo';
}
return "<div class='{$provider_class}'>{$return}</div>";
}
Добавьте CSS для различных провайдеров:
.embed-youtube {
border: 2px solid #ff0000;
}
.embed-vimeo {
border: 2px solid #0000ff;
}
Теперь YouTube и Vimeo-видео будут отображаться с уникальной границей, что помогает визуально различать контент от разных провайдеров.
Заключение
Фильтр oembed_dataparse в WordPress предоставляет мощные возможности для кастомизации встроенного HTML-кода oEmbed. С его помощью можно адаптировать внешний вид контента, добавлять адаптивные стили и подстраивать отображение для различных провайдеров.