WordPress как на ладони
Недорогой хостинг для сайтов на WordPress: wordpress.jino.ru

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

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

oEmbed контент - это видео, аудио, HTML и другие коды на вашем сайте созданные по указанной ссылке на другой сайт, например, ссылка на youtube превратиться в HTML код для встраивания видео (iframe).

oEmbed — открытый формат, созданный с целью упрощения внедрения содержимого одной веб-страницы в другую. В роли контента может выступать фотографии, видеоролики, ссылки или другие типы данных.

Оembed запросы кешируются на 1 день (86400 секунд) и их результаты хранятся в базе данных как метаинформация (скриншот на основе 1 примера):

За создание метаданных отвечает метод WP_Embed::shortcode().

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

add_filter( 'oembed_dataparse', 'filter_function_name_1035', 10, 3 );
function filter_function_name_1035( $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трока)

Ссылка, откуда нужно получить embed контент.

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

Примеры

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

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

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

## Адаптивный (резиновый) плеер YouTube
add_filter( 'oembed_dataparse', function ( $return, $data ) {
	if ( 'YouTube' === $data->provider_name )
		$return = "<div class='youtube-container'>{$return}</div>";

	return $return;
}, 10, 2 );

Теперь добавляем стили, например в 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%;
}

#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-oembed.php 705
return apply_filters( 'oembed_dataparse', $return, $data, $url );

Где используется хук (в ядре WP)

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

    При добавлении ссылок на внутренние статьи - начала ехать верстка

    http://joxi.ru/D2PzL7oUqWb07r -- на мобильном

    http://joxi.ru/l2Z4kjoCzVnpar -- десктоп

    все попытки выровнять не успешны)

    Помогите плз победить

    Ответить3 мес назад #
Здравствуйте, !     Войти . Зарегистрироваться