AMP記事ページにアイキャッチ画像を表示させる方法

2018年4月23日2019年7月3日

AMP化した記事ページにアイキャッチ画像を表示させる方法の備忘録。

AMP記事ページにアイキャッチ画像を表示させる方法

テンプレート「/amp/templates/single.php」にコードを記入

テンプレート「/amp/templates/single.php」内の、アイキャッチ画像を表示させたい任意の場所に以下のコード一文を記入。

<?php $this->load_parts( array( 'featured-image' ) ); ?>

これだけでアイキャッチ画像は表示される。

ちなみにAMPプラグインでは「/amp/templates/single.php」内にデフォルトで以下の位置に入っている。

<article class="amp-wp-article">
	<header class="amp-wp-article-header">
		<h1 class="amp-wp-title"><?php echo esc_html( $this->get( 'post_title' ) ); ?></h1>
		<?php $this->load_parts( apply_filters( 'amp_post_article_header_meta', array( 'meta-author', 'meta-time' ) ) ); ?>
	</header>

	<?php $this->load_parts( array( 'featured-image' ) ); ?>

	<div class="amp-wp-article-content">
		<?php echo $this->get( 'post_amp_content' ); // WPCS: XSS ok. Handled in AMP_Content::transform(). ?>
	</div>

AMPが吐き出すfeatured-imageが「amp-img」ではなく「img」になる

featured-imageを呼び出すコードをヘッダー内に記述してしまうと、吐き出される画像タグが「amp-img」ではなく「img」になってしまった。

デフォルト通りヘッダーとコンテントの間に配置するのが良さそう。

CSSをいじる場合は「/amp/templates/style.php」にコードを記入

あとはAMPアイキャッチ画像のデザイン調整をする場合、テンプレート「/amp/templates/style.php」にコードを追記する。

プラグインのアップデートに対応するために

プラグインのAMPのテンプレート内にコードを書いてしまうと、プラグインがアップデートされたときに元に戻ってしまう。

それを防ぐため、使用しているテーマ(もしくは子テーマ)のフォルダ直下に「amp」という名前のフォルダを作成し、そこにAMPプラグインからテンプレートをコピペして「使用テーマ名/amp/single.php」という形にしておく。

こうすることでプラグインがアップデートされてもコードは改変されない。

• single.php
• style.php

の２つが主に必要になるテンプレートだろう。あとはヘッダーやフッターをいじりたい場合はそれも一緒に。