WordPressのAMPプラグインを使って手軽にAMPページをオリジナルデザインにする方法

AMP

WordPressで作られているWebサイトをAMP対応するプラグイン（以下 AMPプラグイン）を入れると、特に設定することなくAMPページを作ることができます。AMPページは下の画像のような見た目です。

AMPプラグインを入れると、AMPページの見た目はこうなる

プラグインを有効化するだけでAMP対応できましたね。

AMPページをどう作ればいいか？一度考えてみよう

「AMPページはシンプルでいい」という考え方もできます。ただ、もしシンプルにするならするで「どうシンプルにするか」を考える必要はあると思っています。

ちなみに私個人的には、シンプルであっても何もしなくてもいいという意味ではなく、大枠で以下の3つの視点が必要だと考えます。（AMPページに限った視点ではないですね）

1.統一感を持たせる

AMPではないページ(以下 通常ページ)で使われている色やフォントに合わせなくてもいいのか。

2.表示する・しないものを切り分ける「取捨選択」

通常ページに配置しているものはAMPページにも配置しなくてもいいのか。

3.使いやすさ・導線

そもそも、この配置で閲覧者に満足してもらえるのだろうか。変える必要はないのか。

・・・「シンプル」の考え方って、それぞれ違って当たり前だと思います。自分が管理・運営しているWebサイトにAMPページを作ることを具体的に想像して考えてみると「やりたいこと」が見えてきそうですね。

考えた結果「AMPページはオリジナルにしたい！」という場合は、AMPページをオリジナルデザインにする方法があります。

以下にその流れを書きましたので、機会がありましたらご参考ください。

AMPページをオリジナルデザインにする方法

AMPページをオリジナルデザインにする方法はそれほど難しくないです。「AMPページをカスタマイズしたいんだ！」という方のために配慮されている作りになっていると思いました。

というわけで、まずは使用中のテーマフォルダ内に「amp」という名前でフォルダを作ります。

今回は例として、WordPressをインストールしたらデフォルトで同梱されている「Twenty Sixteen」のテーマでやってみましょう。

使用中のテーマフォルダ内に「amp」フォルダを作ろう

「amp」フォルダを作った理由ってなんですか？

AMPプラグインを入れると、テーマフォルダ内にある「amp」フォルダ内のテンプレートファイルを使ってAMPページを表示するように自動で認識してくれます（認識させるフォルダを変更することもできます。それはまた別の機会で）。

「amp」フォルダを作ったら、次はAMPページ用のテンプレートファイルを作りましょう。

AMPページ用のテンプレートファイルを作ろう

「amp」フォルダ内に、以下の3つのテンプレートファイルを作ります。

  1. header.php(ヘッダー)
  2. single.php（個別投稿）
  3. footer.php（フッター）

3つのテンプレートファイルを作ろう

テンプレートファイルの書き方の例

作った3つのテンプレートファイルには、それぞれ以下のようなコードを書きます。今回は「オリジナルデザインにできるんだな」ってところをより端的に表現したかったので、必要最小限のコードを紹介しています。

header.php（ヘッダー）

<!DOCTYPE html>
<html amp>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width,minimum-scale=1,initial-scale=1">
<?php do_action( 'amp_post_template_head', $this ); ?>
</head>
<body>

single.php(個別投稿)

<?php 
 include ( TEMPLATEPATH . '/amp/header.php'); //「amp」フォルダ内の「header.php」を読み込む
 echo $this->get( 'post_amp_content' ); //個別投稿の本文を表示する
 include ( TEMPLATEPATH . '/amp/footer.php'); //「amp」フォルダ内の「footer.php」を読み込む
?>

get_template_partを使うとエラーになるのでincludeを使いました。他にもいい方法があればご教示ください。

footer.php（フッター）

<?php do_action( 'amp_post_template_footer', $this ); ?>
</body>
</html>

ファイルの作り方・書き方について

私の場合は上記の例のように3つファイルを作りました。今は個別投稿ページのみAMP対応させていますが、将来的に対応したい箇所が増えるかもしれません（カスタム投稿タイプなど）。

後々のことを考えて、基本となるヘッダー・フッターは別ファイルとして読み込む構成にしています。パーツとして別ファイルにしたほうが視認性もいいですしね。

ちなみにAMPプラグインがデフォルトで用意しているテンプレートファイルは、ヘッダーとフッターを別で読み込みせず直接single.phpに書いています。（参考：single.php）

やり方はいろいろある、ということですね。テンプレートファイルを作ったら、次はCSSを読み込みましょう。

オリジナルのCSSを適用しよう

次はオリジナルのCSSを読み込みます。「amp」フォルダ内に「style.php」ファイルを作ります。拡張子が.phpであることに注意してください。

style.phpファイルを作ろう

この「style.php」というファイル名もAMPプラグインを入れると自動で「CSSはこのファイルに書かれているんだな」と認識してくれます（認識させるファイルは変更もできます。それはまた別の機会で）。

「style.php」ファイルを作ったら、header.phpにCSSを読み込むように追記します。（コード中の太字の部分が追記箇所です）

<!DOCTYPE html>
<html amp>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width,minimum-scale=1,initial-scale=1">
<?php do_action( 'amp_post_template_head', $this ); ?>
<style amp-custom>
<?php
 $this->load_parts( array( 'style' ) );
 do_action( 'amp_post_template_css', $this );
?>
</style>
</head>
<body>

以上で「style.php」ファイルに書かれたCSSが適用されます。

CSSの書き方について注意しよう

「style.php」ファイルにCSSを書いていくのですが「phpファイルにCSS書いたことないよ」という方もいるかも知れませんね。大丈夫です。普段の書き方でOKです。

「style.php」に書くCSSは普段の書き方でOK

html, body {
 margin: 0;
}

今テーマに適用しているCSSをそのまま「style.php」にコピーして、ちょこちょことカスタマイズしていくといいのかな、と思います。

ただし、AMPページに対応したCSSを書くにはいくつかルールがあります。書き方については、以下のページをご参考ください。

AMP対応するためのCSSを書いててエラーが出たので原因と解決方法をまとめましたこのページをみる

というわけで、私も上記の方法でAMPプラグインを使ってAMPページをオリジナルデザインにしました。

AMPページをオリジナルデザインにしました

テンプレートファイルをカスタマイズできれば難易度は高くないよ

この方法はfunctions.phpを触る必要がないので、WordPressのテンプレートファイルをカスタマイズしたことがある方なら比較的ラクに対応できると思います。

「AMPページをオリジナルデザインにカスタマイズしたい」という方は、ご参考となりましたらうれしいです。

フックを使ってGoogleアナリティクスのコードを入れよう

デザインをカスタマイズできたら、次はAMPページをGoogleアナリティクスで計測するコードを入れてみましょう。以下のページに方法を書きましたので、ご参考ください。

フックが使える！WordPressのAMPプラグインを使ってAMPページをGoogleアナリティクスで計測する方法このページをみる

著者:bouya Imamura