accelerated-mobile-pages
Время для прочтения: 2 мин. 18 сек.

Добавление миниатюры поста в AMP-версию страницы

В связи с кучей ограничений самого AMP и тем, что плагин amp-wp (от Automattic) находится на стадии разработки, товарищи забыли или не успели добавить функцию вывода миниатюры поста. Это исправляется в два счёта.

Вариант 1

Покопавшись в недрах плагина, я нашел фильтр amp_post_template_data, за который можно зацепиться для изменения контента AMP-страницы.

/**
 * Добавить обложку к посту в AMP-версии
 *
 * @param array $data все данные по текущей странице .
 * @param array $post информация по посту.
 *
 * @return mixed
 */
function mihdan_amp_featured_image( $data, $post ) {
	// Проверить, есть ли у поста миниатюра
	if ( has_post_thumbnail( $post ) ) {
		$size = 'medium';
		// Получить идентификатор вложения
		$thumbnail_id = get_post_thumbnail_id( $post );
		// Получить вариации srcset
		$srcset = wp_get_attachment_image_srcset( $thumbnail_id, $size );
		// Получить путь и размеры миниатюры
		list ( $src, $width, $height ) = wp_get_attachment_image_src( $thumbnail_id, $size );
		// Собрать все в тег amp-image
		$featured_image = sprintf(
			'<p><amp-img id=»featured-image» layout=»responsive» src=»%s» width=»%d» height=»%d» alt=»%s» srcset=»%s»></amp-img></p>',
			esc_url( $src ),
			absint( $width ),
			absint( $height ),
			esc_attr( $post->post_title ),
			esc_attr( $srcset )
		);
		// Добавить тег в начало поста
		$data['post_amp_content'] = $featured_image . $data['post_amp_content'];
	}
	return $data;
}
add_filter( 'amp_post_template_data', 'mihdan_amp_featured_image', 10, 2 );

Данную функцию можно разместить в файле function.php или завернуть в плагин.

У себя я ее положил в папку с mu-плагинами (/wp-content/mu-plugins/amp.php), чтобы она корректно работала вместе с плагином WPtouch, который подменяет шаблон на мобильных устройствах, из-за чего код в functions.php просто перестает работать.

Есть вопросы? Пишите в комментах.

Вариант 2

Этот способ базируется на внедрении миниатюры в начало контента поста при помощи обычного тега <img /> до рендера AMP-парсера через хук pre_amp_render_post. В процессе рендеринга страницы тег <img /> преобраузется в валидный <amp-img />.

/**
 * Добавляем свой хук в рендер AMP поста
 */
function mihdan_amp_add_custom_actions() {
	add_filter( 'the_content', 'mihdan_amp_add_featured_image' );
}
add_action( 'pre_amp_render_post', 'mihdan_amp_add_custom_actions' );
/**
 * Добавляем миниатюру в начало поста в виде тега <img />
 * Впоследствии он заменится парсером на <amp-img />
 *
 * @param string $content текст поста
 *
 * @return string
 */
function mihdan_amp_add_featured_image( $content ) {
	if ( has_post_thumbnail() ) {
		$image = sprintf( '<p class=»featured-image»>%s</p>', get_the_post_thumbnail() );
		$content = $image . $content;
	}
	return $content;
}

Для вставки кода используйте HTML-теги
<pre><code class="php">ваш код</code></pre>

Добавить комментарий

Такой e-mail уже зарегистрирован. Воспользуйтесь формой входа или введите другой.

Вы ввели некорректные логин или пароль

Извините, для комментирования необходимо войти.