としっぴーず

旅行やミュージカル、Wordpress等のITネタ中心のブログ

WordPressにAMPプラグインでAdSenseのAMP広告ユニットを表示する

   

WordPressへ簡単にAMP対応できるAMPプラグインですが、インストールしただけでは対応できない点もあります。ブログの大事な収入源であるAdSenseのタグもカスタマイズしないと表示されません。急いで対応します。

AMPプラグインの導入編はこちら

GoogleAnalyticsへの対応はこちら

AMP HTMLを確認

Google AdSenseのヘルプにAMPについての記述があったので確認します。

AMP 広告ユニットを作成する

専用のタグが用意されているのでコピペすれば良さそうですね。

<HEAD>内に記述。

以下は広告を表示する位置に記述。

注意点としては、

  • data-ad-clientとdata-ad-slotが必要。既存のPC用のタグに書いてあるだろうから確認。
  • 広告の表示位置がスクロールせずに見える位置か、見えない位置かによってサイズの指定がちょっと変わる。上記の例は、見えない位置での例。

どうやってプラグインに組み込むか

AMPプラグインは、プラグイン独自のテンプレートで画面を表示するので、上記コードを追加するにはプラグインをカスタマイズする必要があります。

プラグインをカスタマイズする方法は2つ。

  • プラグインのコードを直接編集
  • フィルターフックを使ってタグを追加

前者のが手っ取り早いですが、プラグインのコードを直接編集してしまうと、プラグインがアップデートされた際に再度編集が必要になるので保守性はあまりよくありません。後者のがスマートです。

 

function.phpにフックを追加

まずhead内に追加します。

 

次に記事の中に表示する広告部分ですが、pre_amp_render_postというフィルターを使ってAMPでの記事コンテンツの表示をフックできるようです。

以下のコードをfunction.phpに追加します。

これで終了です。記事を表示して広告が表示されていることを確認します。

おわたー。

 

 - WordPress