最近、本ブログをAMP対応しました。
通常のスマホ版と似たレイアウトにすべくいくつかカスタマイズを入れたので、何回かに分けてカスタマイズの方法をご紹介したいと思います。
今回はその第1回として、記事内にAMP対応のAdSenseを自動的に挟み込むカスタマイズの方法です。
何がどうなるのか#
AMP対応した記事ページにおいて、記事内のH2見出し前にAMP用AdSense広告ユニットを配置します。
できあがりイメージは下記リンクからどうぞ。（AMP化した当ブログの記事ページです）
参考 WordPressのビジュアルエディタでHTMLを直挿入するプラグイン「Paste Raw HTML」を作った | NaeNote
カスタマイズの元ネタ#
元ネタは、ぼくも使っているWordPressテーマSimplicityの作者わいひらさんのこちらの記事です。
参考 本文記事1、2、3番目のH2見出し手前にアドセンスを挿入するWordpressカスタマイズ方法
上記記事は非AMPの場合のカスタマイズ方法ですが、今回はこれをAMP対応させるべく、少しだけコピペコードに手を入れます。
コピペコードの変更箇所#
具体的な変更箇所を赤太字で示しています。
function add_ad_before_h2_for_3times_amp($the_content) {
//広告（AdSense）タグを記入
$ad = <<< EOF
//////////////////////////
//ここにAMP用のアドセンスを挿入//
//////////////////////////
EOF;
if ( is_single() && is_amp() ) {//AMP化済の投稿ページ
$h2 = '/^<h2.*?>.+?</h2>$/im';//H2見出しのパターン
if ( preg_match_all( $h2, $the_content, $h2s )) {//H2見出しが本文中にあるかどうか
if ( $h2s[0] ) {//チェックは不要と思うけど一応
if ( $h2s[0][0] ) {//1番目のH2見出し手前に広告を挿入
$the_content = str_replace($h2s[0][0], $ad.$h2s[0][0], $the_content);
}
if ( $h2s[0][1] ) {//2番目のH2見出し手前に広告を挿入
$the_content = str_replace($h2s[0][1], $ad.$h2s[0][1], $the_content);
}
if ( $h2s[0][2] ) {//3番目のH2見出し手前に広告を挿入
$the_content = str_replace($h2s[0][2], $ad.$h2s[0][2], $the_content);
}
}
}
}
return $the_content;
}
add_filter('the_content','add_ad_before_h2_for_3times_amp');変更するのは4箇所です。
関数名に"_amp"を入れる#
function add_ad_before_h2_for_3times_amp($the_content) {関数名に_ampを追加します。
既存の関数名とのバッティングによるPHPエラーを避けるためです。
AMP用の広告タグを入れる#
$ad = <<< EOF
//////////////////////////
//ここにAMP用のアドセンスを挿入//
//////////////////////////
EOF;元ネタでは通常のAdSenseの広告ユニットコードを挿入していました。
今回はAMP用のAdSense広告ユニットコード（<amp-ad>）を入れます。
広告ユニットの作り方はGoogleの公式サイトを参照ください。
AMP化しているページかで分岐を入れる#
if ( is_single() && is_amp() ) {//AMP化済の投稿ページAMP化済の投稿ページにのみ、AMP広告ユニットを挟み込むように条件を入れます。
これがないと、通常のページにまでAMP広告が挟み込まれてしまいます。 is_amp()はSimplicityでのみ使える関数です。 他テーマの場合、下記記事を参考にis_amp()関数をfunction.php内に定義してください。 参考 Wordpressの投稿本文をAMP化する方法
関数名の変更にあわせてフィルタ名を変更する#
add_filter('the_content','add_ad_before_h2_for_3times_amp');最後に、フィルタに追加する関数名にも_ampを追加しておきます。
挿入箇所を変えたい場合#
AdSenseの挿入箇所を変えたい場合、下記赤字部分の数字を変えると何番目のH2見出し前に入れるかを調整できます。
if ( $h2s[0][0] ) {//1番目のH2見出し手前に広告を挿入当ブログの場合、記事のちょうど真ん中過ぎのH2見出し前と「まとめ」前の2箇所に入れるようにしています。
$index_mid_h2 = floor(count($h2s[0])*(2/3)); //記事の真ん中過ぎ
$index_last_h2 = count($h2s[0]) - 1; //「まとめ」前カスタマイズの注意点#
- function.phpを編集しますので、事前にバックアップをお願いします
- すでに同様のカスタマイズを入れている場合、AdSenseが連続表示されないかチェックをお願いします
- カスタマイズ後はAMPエラーが出ないか必ずチェックをお願いします 参考 AMP テスト - Google Search Console
まとめ：ブログ収益がアップする…かも？#
以上、AMP化したSimplicityの記事ページで記事内見出し前にAdSense広告を挟み込むカスタマイズの方法でした。
記事内に広告を入れるのには賛否ありますが、収益が上がりやすいのは事実です。
収益重視なAMP派の方はぜひどうぞ。
※追記：2017年7月21日
Simplicity作者のわいひらさんから、Twitterにてコメントをいただきました。
X（旧Twitter）でのポスト by @MrYhira
AMPページのアクセスが多い方はぜひお試しください。
