AFFINGER5（WING）のAMPページカスタマイズまとめ

WordPressテーマ「AFFINGER5（WING）」のAMPページのカスタマイズ例をまとめました。AMPは機能に制限がありますが、カスタマイズをすれば少しはマシになります。

AMPとは？

AMP(Accelerated Mobile Pages)とはGoogleとTwitterで共同開発されている、モバイル端末でウェブページを高速表示するためのプロジェクト、またはそのためのフレームワーク(AMP HTML)のことです。

参考：AMPとは | SEO用語集：意味/解説/SEO効果など [SEO HACKS]

AMP対応すると、ウェブページを高速表示でき、ユーザーの離脱率が減る可能性があります。

AFFINGER5でAMPを使う条件

AFFINGER5でAMP対応する条件は、

などがあります。

詳しくは、公式マニュアルなどを参考にしてください。

また、パーマリンクを「/」で終了する形にしていない方は、以下の記事を参考に変更してみてください。

AMPの見出しに色を付ける

見出しを赤ベースに編集

AFFINGER5のAMPページは、デフォルトのデザインだとほぼモノクロです。せめて見出しの色だけでも変えておきましょう。

見出しの色を変えるには、「st-amp-css.php」を編集します。たとえば、h2タグ（見出し2）なら以下のコードを編集します。

.h2modoki,
h2 {
	margin: 20px 0;
	padding-top: 10px;
	padding-right: 20px;
	padding-bottom: 10px;
	padding-left: 20px;
	border-top: 2px solid #ccc;
	border-bottom: 1px solid #ccc;
	background: #f3f3f3;
	color: #1a1a1a;
	font-size: 19px;
	line-height: 27px;
}

例として、h2タグを赤背景の白テキストに変更しました。

.h2modoki,
h2 {
	margin: 20px 0;
	padding-top: 10px;
	padding-right: 20px;
	padding-bottom: 10px;
	padding-left: 20px;
	border-top: 2px solid #ccc;
	border-bottom: 1px solid #ccc;
	background: #FF0000;
	color: #ffffff;
	font-size: 19px;
	line-height: 27px;
}

上記のカスタマイズをヒントに、自分なりにアレンジしてみてください。

AdSenseのAMP自動広告を入れる

AdSenseの「AMP 自動広告」は、その名の通りAMPページに自動で広告を配信するシステムです。自動広告を設置することで、AMPページの「ヘッダー」「コンテンツ内」「フッター」などに広告が配信（表示）されます。

AMP自動広告は、「head」と「body」の2カ所に、それぞれスクリプトを挿入することで表示ができます。

AFFINGER5の場合は、「single-amp.php」ファイルの＜/head＞と＜/body＞の直前に、それぞれスクリプトを挿入します。

head内に貼り付けるスクリプトの位置

body内に貼り付けるスクリプトの位置

「head」と「body」の2カ所にスクリプトを挿入したら、正常に自動広告が配信されているかチェックしましょう。

AMPにいろんなAdSenseを表示する

AMPページには「リンクユニット」や「関連コンテンツ」など、さまざまなAdSense広告ユニットを配信できます。

リンクユニット

リンクユニットは、「single-amp.php」ファイルの166行目あたりに

<p class="st-defaultlink">
<a href="<?php the_permalink(); ?>">完全版を表示する</a></>
<?php add_filter( 'post_link', 'amp_post_link', PHP_INT_MAX, 3 ); ?>
<?php endif; ?>

があるので、この直下に

<amp-ad
layout="fixed-height"
height=100
type="adsense"
data-ad-client="ca-pub-××××××××"
data-ad-slot="××××××××">
</amp-ad>

を追記してください。

××××××は、ご自身の広告IDに置き換えてください。場所も気に入らなかったら自分で変更してください。

関連コンテンツ

関連コンテンツは、「single-amp.php」ファイルの215行目あたりに、

<!--関連記事-->
<?php amp_get_template_part( 'kanren', 'amp' ); ?>

があるので、この直下か直前（もしくは上書きでも可）に

<amp-ad
layout="fixed-height"
height=1500
type="adsense"
data-ad-client="ca-pub-××××××××"
data-ad-slot="××××××××">
</amp-ad>

を記載してください。

高さは1500と高め（表示多め）にしていますが、1000くらいでも良いでしょう。

スティッキー広告

AMPページにスティッキー広告を表示させるには、まずは＜header＞内にスティッキー広告を表示するために必要なスクリプトを挿入します。

<script async custom-element="amp-sticky-ad" src="https://cdn.ampproject.org/v0/amp-sticky-ad-1.0.js"></script>

次に、＜body＞内にAMP用広告コードを挿入します。

たとえば、AdSenseなら以下のようなコードになります。

<amp-sticky-ad layout="nodisplay">
  <amp-ad width="320"
      height="80"
      type="adsense"
      data-ad-client="ca-pub-××××××××××"
      data-ad-slot="××××××××××"
  </amp-ad>
</amp-sticky-ad>

以上で、スマホフッターに追尾型の広告が表示できます。

AMPにランキングを表示する

アフィリエイトサイトなどで人気のランキング。AFFINGER5のAMPページにも表示できます。

今回は、AMPページの記事下にランキングを表示されてみます。編集するファイルは「single-amp.php」で、ランキングを表示させるコードの場所は

<?php amp_get_template_part( 'sns', 'amp' ); //AMP用ソーシャルボタン読み込み ?>
<?php amp_get_template_part( 'popular-thumbnail', 'amp' ); //任意のエントリ ?>

の直下。

コードは以下のような感じになります。

<p class="h2modoki">○○ランキング</p>
<p>ランキングの説明</p>
<p class="rankh4">1位</p>
<p>＜AMP用のコード＞</p>
<p>1位の説明文</p>
<p class="rankh4">2位</p>
<p>＜AMP用のコード＞</p>
<p>2位の説明文</p>
<p class="rankh4">3位</p>
<p>＜AMP用のコード＞</p>
<p>3位の説明文</p>

＜AMP用のコード＞にはASPで取得した広告コードを貼り付けてください。AMP用の広告コードの取得方法は、各ASPのガイドを参考にしてください。

AMPページ記事上にSNSボタンを表示する

AFFINGER5のデフォルトの設定だと、記事下にのみSNSボタンが表示できるようになっています。これをAMPページの記事上にも表示したい場合は、SNSのコードを任意の場所に挿入します。

今回は、本文の直前に挿入してみます。

「single-amp.php」ファイルの170行目あたりに、

<div id="nocopy">
<div class="entry-content">
<?php the_content(); //本文 ?>
</div>

があるので、この直前に

<?php amp_get_template_part( 'sns', 'amp' ); //AMP用ソーシャルボタン読み込み ?>

を挿入します。

まとめ

AFFINGER5のAMPページは、デフォルトの状態だとシンプル過ぎるのが難点なので、自分でカスタマイズしてみてくださいね。