スマホサイトのみ任意の見出し前に広告を表示させる方法【WordPress】

Googleアドセンスなどの広告を、WordPressの見出し前に自動的に組み込む方法をまとめました。

これを使えば記事を書くたびに直接コードを記述する手間も省けます。仮にアドセンス広告を外すことになっても、コードを削除するだけで一括管理することができますしね。

紹介するPHPのコードをコピペしてもらえれば良いんですが、PCとスマホで別々の広告タイプを表示することもできるので結構便利だと思います。

PHPで任意の見出し前に広告を表示させる方法

まずは任意の見出し前にアドセンス広告を表示させる方法を見ていきましょう。

コードは下記サイトが分かりやすいので参考にしてみてください。

見出しは「h2」「h3」「h4」…などいろいろありますが、今回は「h2」の上に広告を表示することを想定しています。

こちらが実際のコードです。

function add_ads_before_h2($the_content) {
if (is_single()) {
$ads = <<< EOF
<div style="font-size: .7em; text-align:center;">スポンサーリンク</div>
<div style="text-align:center;">
//ここにアドセンス広告コードを挿入
</div>
<div style="clear:both"></div>
EOF;

$h2 = '/^.+?<\/h2>$/im';
if ( preg_match_all( $h2, $the_content, $h2s )) {
   if ( $h2s[0] ) {

      // 2つ目のh2見出し前にアドセンス挿入
      if ( $h2s[0][1] ) {
         $the_content = str_replace($h2s[0][1], $ads.$h2s[0][1], $the_content);
      }

      // 3つ目のh2見出しの上にアドセンス挿入
      if ( $h2s[0][2] ) {
         $the_content = str_replace($h2s[0][2], $ads.$h2s[0][2], $the_content);
      }

   }
}

}
return $the_content;
}
add_filter('the_content','add_ads_before_h2');

やってもらうのは、上から6行目にそれぞれの「アドセンス広告コード」を挿入することのみ。

このコードを、WordPressの「外観」→「テーマの編集」→「テーマのための関数 (functions.php)」にコピペすることで、PCサイトとスマホサイトともに広告が表示されるようになります。

どちらか一方のサイトのみに広告を表示する方法は後ほど紹介しますね。

ちなみに、広告を入れる見出しを指定してあげたい場合は下記を参考に編集してみてください。

1つ目、2つ目、3つ目…。何個までも設定することができます。

1つ目の見出しの上に広告を挿入

 if ( $h2s[0][0] ) { 
   $the_content = str_replace($h2s[0][0], $ads.$h2s[0][0], $the_content);
 }

2つ目の見出しの上に広告を挿入

if ( $h2s[0][1] ) {
   $the_content = str_replace($h2s[0][1], $ads.$h2s[0][1], $the_content);
}

3つ目の見出しの上に広告を挿入

if ( $h2s[0][2] ) {
   $the_content = str_replace($h2s[0][2], $ads.$h2s[0][2], $the_content);
}

4つ目の見出しの上に広告を挿入

if ( $h2s[0][3] ) {
   $the_content = str_replace($h2s[0][3], $ads.$h2s[0][3], $the_content);
}

スマホのみに表示させるための条件分岐

上記のコードだけでは、PCとスマホの両方に同じように広告が表示されます。

例えば、

みたいな場合は、別にPCとスマホで条件分岐させるコードも必要となります。

ここからはそれを見ていきましょう。

「スマホ」と「それ以外」に分けるコード

こちらが「スマホ」と「それ以外」を識別して条件分岐させるコードです。

function ua_smt (){
$ua = $_SERVER['HTTP_USER_AGENT'];
$ua_list = array('iPhone','iPad','iPod','Android');
   foreach ($ua_list as $ua_smt) {
      if (strpos($ua, $ua_smt) !== false) {
      return true;
      }
   } return false;
}

if (ua_smt() == true) {
//ここにスマホにのみ表示させたいコードを記述
} else {
//ここにスマホ以外に表示させたいコードを記述
}

12行目にコードを記述すると、スマホページにしか表示されないようになります。14行目はそれ以外（PCなど）ということ。

いわばこれが条件分岐のフレームになるので、あとはこの中に実際適用したいコードを埋め込んでいくということになります。

スマホページのみ見出し前にアドセンス広告を表示させるコード

実際に「アドセンスを見出し前に表示させるコード」と「条件分岐のコード」を組み合わせたのがこちら。

上記で紹介したコードを単純に組み合わせただけの内容です。

function ua_smt (){
$ua = $_SERVER['HTTP_USER_AGENT'];
$ua_list = array('iPhone','iPad','iPod','Android');
   foreach ($ua_list as $ua_smt) {
      if (strpos($ua, $ua_smt) !== false) {
      return true;
      }
   } return false;
}

if (ua_smt() == true) {
//ここにスマホにのみ表示させたいコードを記述
function add_ads_before_h2($the_content) {
if (is_single()) {
$ads = <<< EOF
<div style="font-size: .7em; text-align:center;">スポンサーリンク</div>
<div style="text-align:center;">
//ここにアドセンス広告コードを挿入
</div>
<div style="clear:both"></div>
EOF;

$h2 = '/^.+?<\/h2>$/im';
if ( preg_match_all( $h2, $the_content, $h2s )) {
   if ( $h2s[0] ) {

      // 2つ目のh2見出し前にアドセンス挿入
      if ( $h2s[0][1] ) {
         $the_content = str_replace($h2s[0][1], $ads.$h2s[0][1], $the_content);
      }

      // 3つ目のh2見出しの上にアドセンス挿入
      if ( $h2s[0][2] ) {
         $the_content = str_replace($h2s[0][2], $ads.$h2s[0][2], $the_content);
      }

   }
}

}
return $the_content;
}
add_filter('the_content','add_ads_before_h2');
} else {
//ここにスマホ以外に表示させたいコードを記述
}

ちなみにこの場合は、スマホサイトのみ「2番目のh2」と「3番目のh2」上にアドセンスが表示されるようになります。（アドセンス広告のコードは各自18行目に挿入する必要があります）

WordPressのウィジェットで扱えない箇所にも広告を配置できるので、より広告の収益性も高くなると思いますよ。広告の掲載量が少なかったサイトには効果的でしょう。