WordPressのAFFINGERテーマを使っていて、AMP対応を考えている方に、読んでほしいブログです。
モバイルページを高速化できるAMPですが、AFFINGERテーマを使っていれば簡単にAMP化することができます。
【参考】AMP化したページ
（モバイルで見てください。）
そこで今回は、AFFINGERテーマのブログをAMP化する方法と注意点について書いていきます。
スポンサーリンク
AMP化する前に知っておくべきこと
まずAMP化する前に、AMPの概要、メリット、デメリットは簡単に知っておきましょう。
AMPとは、モバイルでウェブページを高速化させる仕組みです。
ページをAMP化させると、通常のページとは別に、URLの異なるAMP用のページがもう１つ出来上がります。
なぜページが高速化するかというと、読み込みに時間がかかるJavaScriptを表示させないなど、ページを高速化させる仕様になるからです。
AMP化は今のところ直接的に検索のランキングに影響しませんが、ページの速度が上がる、離脱率が下がるなどして、間接的にページの評価が上がる可能性はあります。
（ページの速度自体はランキングに直接影響すると言われています。）
ただし高速化の代償として、AMP用の設定が必要になったり、JavaScriptで表示されていた画像や広告などが表示されなくなったり、導入にあたりデメリットも存在します。
AMP化する方法
AMPが理解できたところで、AFFINGERのブログをAMP化する方法を紹介していきます。
※私はAFFINGER4を使っており、別バージョンでは少し異なる可能性があります。
AMP化する方法は、AFFINGER作成者のブログを参考にしています。
【参考】AMP対応のWordPressテーマ「AFFINGER5」について
AMP用サイドバーメニューの設定
AMP化されたページは、サイドバーメニュー（三本線のメニュー）が表示されないので、AMP用のメニューを設定していきます。
「外観」にある「ウィジェット」をクリックします。
「AMPサイドバーウィジェット」に「01_STINGERサイドバーメニュー」を挿入します。
これで設定は完成です。
AMP用のグーグルアナリティクスの設定
AMP化されたページは、そのままだとグーグルアナリティクスで計測ができないため、AMP用の計測設定をしていきます。
「STRINGR PRO管理」をクリックします。
「Google連携に関する設定」にある「アナリティクスコード（トラッキングID）※AMP用：UA-」という場所に、AMP用のページを計測するアナリティクスのコードを入力します。
AMP用のページを計測するコードは、既に使っているコードと同じでも計測可能です。
一方で、AMP用のページを分けてトラッキングしたい方は、グーグルアナリティクスで新しいコードを発行し、入力する必要があります。
グーグルアナリティクスで歯車のアイコン（設定）をクリックします。
「プロパティを作成」をクリックします。
プロパティの設定で、「ウェブサイトの名前」は好きな名前、「ウェブサイトのURL」はサイトのURL（//以下）をそのまま入力し、作成します。
設定画面のトップで、プロパティの「▼」をクリックすると新しいプロパティが確認できるので、新しいプロパティをクリックします。
トラッキングIDの場所にあるUA-以下をコピーします。
「アナリティクスコード（トラッキングID）※AMP用：UA-」に貼り付けます。
あとは設定を保存して、設定の完成です。
AMP用のアドセンスの設定
AMP化されたページは、そのままではアドセンスが表示されないので、AMP用のアドセンスを設定していきます。
先ほどのアナリティクスコードの下に「AMP用のアドセンスコード」とあり、「data-ad-client（ca-pub-以降の数字）」「data-ad-slot」の場所にアドセンスのコードを入力します。
アドセンスのコードは、既に設定してある場所から「data-ad-client」「data-ad-slot」を見つけて、数字をコピーします。
（「data-ad-client」はca-pub-以降の数字）
「data-ad-client（ca-pub-以降の数字）」「data-ad-slot」の場所に貼り付けます。
あとは設定を保存して、設定の完成です。
AMP化したいページでAMP化の設定
AFFINGERテーマでは、AMP化したいページごとにAMP化の設定をしていきます。
AMP化したいページの設定画面で、「AMP設定」をクリックして開き、「AMPに対応する」にチェックを入れます。
ページを更新すれば、対象のページのAMP化が完了しています。
AMP化されたページの表示を確認
AMP化の設定が完了したら、AMP化されたページの表示を確認していきます。
AMP化されたページは、URLの最後に「amp」を付けると確認ができます。
AMP化されたページが開きました。
見てのとおり、背景色がAFFINGERのデフォルト色（灰色）になっているなど、通常のページとデザインが異なっていることがわかります。
ただし、ページの表示速度はめちゃくちゃ速いです。
他にも「AMPテスト」のサイトで、AMP用のURLを入れることで、ページの有効性をテストすることができます。
他、AMP対応でやったこと
AMP対応は一応完了しましたが、背景色が灰色のままだったので、背景色を白にする設定をしました。
「外観」にある「テーマエディター」をクリックします。
「st-amp-css.php」をクリックして、ファイルを開きます。
コードのなかから「body」を探し、「background-color: #f2f2f2;」（灰色）を「background-color: #FFFFFF;」（白）に書き換えます。
AMP化されたページの背景色が白に変わりました。
他にも、広告枠広げる、Google+ボタンを削除、グーグルの関連コンテンツを表示させる…など作業は残っているのですが、今回はここまでにしておきます。
AMP化の注意点
最後に、AFFINGERをAMP化したあとに気づいた注意点をまとめておきます。
AMP用のデザインは、別で設定する必要がある
先ほどの背景色もそうですが、見出しのデザイン、シェアボタン、広告の大きさなど、AMP用のページではデザインが反映できていませんでした。
AFFINGERではAMP用にファイルが分かれているので、そこでコードを設定し直す必要があります。
プラグインがほぼ機能しない
通常のページではプラグインを使って記事上部にシェアボタンを表示しているのですが、AMP用のページでは表示されていませんでした。
このようにAMP用のページでは、プラグインがほぼ機能しないようなので、プラグインを使っている方は注意が必要です。
amazonのアフィリエイトなどが表示されない
今回のページにはないですが、amazonのアフィリエイトが貼ってあるページをAMP化したときに、amazonのアフィリエイトが完全に表示されなくなっていました。
amazonのアフィリエイトは、AMPに対応するコーディングを別途しないと表示ができないようです。
amazonだけでなく、A8もバナーのみAMP化されたコードで表示可能など、アフィリエイト各社でAMPの制約があるようなので、注意が必要です。
以上、AFFINGERテーマで、ブログをAMP化する方法と注意点でした。
今後、AMPはますます普及してくると思うので、今のうちに準備しておいたほうが良いと思います。