WordPress как на ладони

oembed_dataparseхук-фильтрWP 2.9.0

Позволяет изменить контент (HTML) создаваемый при встраивании URL, поддерживаемых oEmbed форматом WordPress. Изменение происходит перед кэшированием.

Что такое oEmbed читайте здесь: oEmbed в WordPress

За обработку oEmbed URL отвечает метод WP_Embed::shortcode().

Использование

add_filter( 'oembed_dataparse', 'wp_kama_oembed_dataparse_filter', 10, 3 );

/**
 * Function for `oembed_dataparse` filter-hook.
 * 
 * @param string $return The returned oEmbed HTML.
 * @param object $data   A data object result from an oEmbed provider.
 * @param string $url    The URL of the content to be embedded.
 *
 * @return string
 */
function wp_kama_oembed_dataparse_filter( $return, $data, $url ){

	// filter...
	return $return;
}
$return(cтрока)

oEmbed HTML код.

Допустим, мы вставили в контент ссылку на YouTube ролик:

 https://www.youtube.com/watch?v=RNFRCz0whuw

WordPress при отображении контента записи сделает такой http запрос и сохранит его:

https://www.youtube.com/oembed
?maxwidth=840
&maxheight=1000
&url=https%3A%2F%2Fwww.youtube.com%2Fwatch%3Fv%3DRNFRCz0whuw
&dnt=1
&format=json

Теперь, ответ на запрос можно будет отфильтровать. Фильтр получит такую строку в этом параметре:

<iframe width="200" height="113"
src="https://www.youtube.com/embed/RNFRCz0whuw?feature=oembed"
frameborder="0" allow="autoplay; encrypted-media" allowfullscreen></iframe>
$data(объект)

Объект oEmbed.

stdClass Object(
	[html]             => <iframe width="200" height="113" src="https://www.youtube.com/embed/RNFRCz0whuw?feature=oembed" frameborder="0" allow="autoplay; encrypted-media" allowfullscreen></iframe>
	[thumbnail_height] => 360
	[author_url]       => https://www.youtube.com/channel/UC4mPz031whiFiY5ZSuXoYGg
	[provider_name]    => YouTube
	[provider_url]     => https://www.youtube.com/
	[thumbnail_url]    => https://i.ytimg.com/vi/RNFRCz0whuw/hqdefault.jpg
	[author_name]      => wp-plus
	[type]             => video
	[thumbnail_width]  => 480
	[width]            => 200
	[version]          => 1.0
	[height]           => 113
	[title]            => Как создать шаблон страницы WordPress, записи или другого типа поста - уроки и разработка WP
)
$url(cтрока)

Оригинальный URL по которому сработало встраивание.

 https://www.youtube.com/watch?v=RNFRCz0whuw

Примеры

1

#1 Адаптивный (резиновый) плеер YouTube

Часто можно видеть, как плеер YouTube пытаются сделать адаптивным с помощью JavaScript, но это лучше делать на чистом CSS. Соотношение сторон (пропорции) плеера будут соблюдены.

Добавляем обёртку для плеера YouTube, например в functions.php темы:

# Адаптивный (резиновый) плеер YouTube
add_filter( 'oembed_dataparse', 'adaptive_youtube_iframe', 10, 2 );

function adaptive_youtube_iframe( $return, $data ) {

	if ( 'YouTube' === $data->provider_name ) {
		$return = "<div class='youtube-container'>{$return}</div>";
	}

	return $return;
}

Теперь добавляем стили, например в style.css темы:

.youtube-container  {
	position: relative;
	padding-bottom: 56.25%;
	padding-top: 30px;
	height: 0;
	overflow: hidden;
}

.youtube-container  iframe,
.youtube-container  object,
.youtube-container  embed {
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
}

0

#2 Кастомный вывод плеера YouTube

Пусть по заданию вывод плеера YouTube должен соответствовать следующей вёрстке:

<div class="basePage__video">
	<div class="basePage__player">
		iframe YouTube
	</div>
	<div class="basePage__caption">Название ролика</div>
</div>

Модифицируем код для YouTube:

add_filter( 'oembed_dataparse', function ( $return, $data ) {
	if ( 'YouTube' !== $data->provider_name ) {
		return $return;
	}

	return str_replace( "\t", '', sprintf( '
		<div class="basePage__video">
			<div class="basePage__player">%s</div>
			<div class="basePage__caption">%s</div>
		</div>
	', $return, $data->title ) );
}, 10, 2 );

Пришлось применить str_replace(), чтобы удалить табы из кода (генерируются при форматировании в редакторе кода), так как после обработок другими функциями появляется тег </p> в коде, что потенциально может сломать вёрстку страницы.

Получим:

Сгенерированный код:

<div class="basePage__video">
	<div class="basePage__player">
		<iframe title="Открытие сезона. Шостакович. Симфония №1" width="500" height="281" src="https://www.youtube.com/embed/FCP4FtWRkPw?feature=oembed" frameborder="0" allow="accelerometer; autoplay; encrypted-media; gyroscope; picture-in-picture" allowfullscreen></iframe>
	</div>
	<div class="basePage__caption">Открытие сезона. Шостакович. Симфония №1</div>
</div>

Список изменений

С версии 2.9.0 Введена.

Где вызывается хук

WP_oEmbed::data2html()
oembed_dataparse
wp-includes/class-wp-oembed.php 743
return apply_filters( 'oembed_dataparse', $return, $data, $url );

Где используется хук в WordPress

wp-includes/class-wp-oembed.php 226
add_filter( 'oembed_dataparse', array( $this, '_strip_newlines' ), 10, 3 );
wp-includes/default-filters.php 706
add_filter( 'oembed_dataparse', 'wp_filter_oembed_iframe_title_attribute', 5, 3 );
wp-includes/default-filters.php 707
add_filter( 'oembed_dataparse', 'wp_filter_oembed_result', 10, 3 );
campusboy 4752youtube.com/c/wpplus
Создатель YouTube канала wp-plus, на котором делюсь своим опытом. Активный пользователь wp-kama.ru. WordPress-разработчик. Разработка сайтов и лендингов. Доработка существующих проектов. Сопровождение ресурсов.
Редакторы: Kama 9618
1 комментарий
    Войти