AMP記事ページにアイキャッチ画像を表示させる方法
AMP化した記事ページにアイキャッチ画像を表示させる方法の備忘録。
AMP記事ページにアイキャッチ画像を表示させる方法
テンプレート「/amp/templates/single.php」にコードを記入
テンプレート「/amp/templates/single.php」内の、アイキャッチ画像を表示させたい任意の場所に以下のコード一文を記入。
[php]
<?php $this->load_parts( array( 'featured-image’ ) ); ?>
[/php]
これだけでアイキャッチ画像は表示される。
ちなみにAMPプラグインでは「/amp/templates/single.php」内にデフォルトで以下の位置に入っている。
[php highlight="7″]
<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>
[/php]
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
の２つが主に必要になるテンプレートだろう。あとはヘッダーやフッターをいじりたい場合はそれも一緒に。