WordPressのAMP対応

Google AdSenseからの推奨

AdSenseの「ホーム」にAMPに対応すればPageviewを増やせるのではないかと、おすすめが出てきた。長いものにはまかれろ、Googleの推奨は、即実行ということで、AMP対応に取り組んでみました。

AMPとは...

ざっくり言うと、Mobile専用の軽いページを作ることみたいです。ググるとたくさんWordPressでの対応が出てきます。ただ、私が知りたいのは、AdSenseや他のアフィリエイトを表示つつ、AMPに対応すること。

WordPressのAMP対応

これは、単純に[AMP]のプラグインをインストールします。プラグインの新規追加で[AMP]と検索し、インストールします。

AdSenseの対応

WordPressでは、AdSenseのプラグインが不対応になり、QuickStartによるAdSenseの対応をすることを推奨されるようになりました。なので、AMP以外の通常の画面は、QuickStartによる対応。AMPのみ[広告ユニット]を使って、AdSenseを表示させることに決めました。様々なAMPを紹介するホームページを読んだのですが、シンプルにできるのはこの方法ではないかと思い、チャレンジです。

広告コード

AMPのsingle.phpに記載します。記載場所は、広告が一番目立つと思われるタイトルの下で本文の上に入れます。広告ユニットで表示された2つのIDを置き換えた以下のコードを追記します。 <amp-ad layout="fixed-height" height=100 type="adsense" data-ad-client="ca-pub-1234567891234567" data-ad-slot="1234567890"> </amp-ad> <header>の下に次のコードを入れます。 <script async custom-element="amp-ad" src="https://cdn.ampproject.org/v0/amp-ad-0.1.js"></script> ↓これは間違い。修正しました。 (googleのページを参照) 一般的にググって検索していたときは情報多寡で何が正しいのかわかりませんでしたが、googleのマニュアルにありました。やはりマニュアルですね(追記)。

見栄えの変更

これで、AMPのページでもAdSenseの広告が表示されます。あとは、AMP用のStyleシートで、bodyのフォントを「San-Serif」に変更し、[プラグイン] > [AMP] > [Design]からタイトルの背景を「特許出願ココ」のえんじ色に変更すれば終了です。