【プラグイン不要】もっと見る(moreタグ)にPCとスマホで別々のAdsense広告を設置する方法

moreタグ Adsenseレスポンシブ
SPONSORLINK

先日、「プラグイン不要!function.phpにコピペするだけで出来るカスタマイズコードまとめ」という記事を書いたのですが、その中でmoreタグの位置に広告など任意のコードを配置するというのを紹介しました。その部分の応用変としてスマホとPCで別々の広告を表示させたいというお声をブログ仲間のヨスさん(@yossense )からいただきまして、挑戦してみました。

すると意外と簡単にできたので、moreタグの位置にスマホとPCで別々のAdsenseコードを貼り付ける方法を書いておきたいと思います。

wp_is_mobile関数を使って条件分岐する

// MOREタグの下に広告を表示
add_filter('the_content', 'adMoreReplace');
function adMoreReplace($contentData) {
if (wp_is_mobile()){
$adTags = <<< EOF
<!-- ここに【スマホ&タブレット】で表示させたい広告コードを貼る -->
 
EOF;
} else{
$adTags = <<< EOF
<!-- ここに【PC】で表示させたい広告コードを貼る -->

EOF;
}
    $contentData = preg_replace('/<span id="more-[0-9]+"><\/span>/', $adTags, $contentData);
    $contentData = str_replace('<p></p>', '', $contentData);
    $contentData = str_replace('<p><br />', '<p>', $contentData);
    return $contentData;
}

上記コードをfunctions.php内のどこかに記述します。

そして、<!– ここに【●●】で表示させたい広告コードを貼る –> とコメントアウトしている部分に、Adsenseで作成した広告コードなり、自身のサービスのバナーやテキストなり、アフィリエイト広告なりなんでも表示可能です。

WordPressで使うことができるwp_is_mobileという関数を使ってそれぞれのコードを条件分岐するという仕組みです。

これにより「スマホ&タブレット」と「PC」というのをプログラムが判別して、広告コードを出し分けることができます。

なぜAdsenseコードを出し分ける必要があるのか

今回の件でなぜAdsense広告をPCとスマホで出し分ける必要があるのかという部分にも触れておきたいと思います。

テーマによって広告がはみ出る

レスポンシブ・ウェブデザインのサイトでmoreタグの位置に、PCサイズでよく使われる336×280の広告を貼った場合、スマホで見ると横幅が大きすぎてはみ出てしまいます。

WordPressもっと見るの広告がはみ出る

Adsense広告は基本的にサイズが決まっていて画面幅に合わせて変動するレスポンシブ化はできません。なので、PC版に最適化したサイズの広告を貼っていた場合は、スマホではみ出てしまったり、逆にスマホに最適化した広告を掲載すると、PCでみた時にサイズが小さくて物足りなかったりと、どちらも一長一短なところがあります。

  • ちなみにAdsenseでもレスポンシブでの広告コード(画面サイズに合わせて最適なサイズの広告を出す)を使うこともできるのですが、広告のマッチング度が悪くなるためか、クリック率ががくっと下がってしまうようです。

そんな感じの理由から、コードはスマホとPCとで出し分けたほうがいいという結果になります。

【応用編】タブレットではPC版の広告を表示させたいという場合に

上記の方法でも特段問題はないと思うのですが、wp_is_mobileの仕様上、<スマホ&タブレット>と<PC>という分岐方法なので、タブレットでみた時はスマホ版の広告が表示されるようになります。

これが問題ない場合は先に述べた方法だけでいいのですが、タブレットはPCの広告を表示させたいという場合は、下で説明するもう一手間必要になります。

UA(ユーザーエージェント)で条件分岐するis_mobile関数をつくる

スマホとそれ以外という条件分岐をしたい場合、もともと用意されているwp_is_mobileという関数は使わずに、スマホのみを条件分岐するis_mobileという関数を新たに作成します。

// スマホのみの条件分岐(is_mobile)を新たにつくる
function is_mobile(){
$useragents = array(
'iPhone', // iPhone
'iPod', // iPod touch
'Android.*Mobile', // 1.5+ Android *** Only mobile
'Windows.*Phone', // *** Windows Phone
'dream', // Pre 1.5 Android
'CUPCAKE', // 1.5+ Android
'blackberry9500', // Storm
'blackberry9530', // Storm
'blackberry9520', // Storm v2
'blackberry9550', // Storm v2
'blackberry9800', // Torch
'webOS', // Palm Pre Experimental
'incognito', // Other iPhone browser
'webmate' // Other iPhone browser
);
$pattern = '/'.implode('|', $useragents).'/i';
return preg_match($pattern, $_SERVER['HTTP_USER_AGENT']);
}

上のコードをfunctions.phpに書くことでis_mobileという条件分岐を使うことができるようになるので、続けてmoreタグにコードを差し込むコードを続けて書いてあげればOKです。4行目の部分が最初のコードと変わっていますので注意してください。

続けて最初に紹介したmoreタグに広告を表示させるコードを記述

// MOREタグの下に広告を表示
add_filter('the_content', 'adMoreReplace');
function adMoreReplace($contentData) {
if (is_mobile()){
$adTags = <<< EOF
<!-- ここに【スマホ】で表示させたい広告コードを貼る -->
  
EOF;
} else{
$adTags = <<< EOF
<!-- ここに【PC&タブレット】で表示させたい広告コードを貼る -->
 
EOF;
}
    $contentData = preg_replace('/<span id="more-[0-9]+"><\/span>/', $adTags, $contentData);
    $contentData = str_replace('<p></p>', '', $contentData);
    $contentData = str_replace('<p><br />', '<p>', $contentData);
    return $contentData;
}

上記2つをまとめるとこんな感じ

2つを続けて書くとこんな感じです。よくわからないという方は下記コードを丸々コピーして、広告を記述する箇所を任意のものに変更してください。

// スマホのみの条件分岐(is_mobile)を新たにつくる
function is_mobile(){
$useragents = array(
'iPhone', // iPhone
'iPod', // iPod touch
'Android.*Mobile', // 1.5+ Android *** Only mobile
'Windows.*Phone', // *** Windows Phone
'dream', // Pre 1.5 Android
'CUPCAKE', // 1.5+ Android
'blackberry9500', // Storm
'blackberry9530', // Storm
'blackberry9520', // Storm v2
'blackberry9550', // Storm v2
'blackberry9800', // Torch
'webOS', // Palm Pre Experimental
'incognito', // Other iPhone browser
'webmate' // Other iPhone browser
);
$pattern = '/'.implode('|', $useragents).'/i';
return preg_match($pattern, $_SERVER['HTTP_USER_AGENT']);
}


// MOREタグの下に広告を表示
add_filter('the_content', 'adMoreReplace');
function adMoreReplace($contentData) {
if (is_mobile()){
$adTags = <<< EOF
<!-- ここに【スマホ】で表示させたい広告コードを貼る -->
   
EOF;
} else{
$adTags = <<< EOF
<!-- ここに【PC&タブレット】で表示させたい広告コードを貼る -->
  
EOF;
}
    $contentData = preg_replace('/<span id="more-[0-9]+"><\/span>/', $adTags, $contentData);
    $contentData = str_replace('<p></p>', '', $contentData);
    $contentData = str_replace('<p><br />', '<p>', $contentData);
    return $contentData;
}

ちょっと長いですが、<スマホ> or <PC&タブレット>でわけたい場合は上のコードだけを書き込めばOKとなります。

  • 広告コードは自身で作成して、コメントアウトの部分に貼り付けてください。

あとがき

今回はmoreタグにPCとスマホで別々のAdsenseコードを貼り付ける方法をまとめてみました。

これまで色々なブログを見てきましたが、スマホでみた時に広告がはみ出てしまっている場合が結構多かったです。

おそらく運営者さんも気づいていて、はみ出てしまうのはしょうがないという風に諦めていたのではないでしょうか。(display: none;とかで消しちゃったら規約違反になりますしね…)

でもここで紹介した内容でカスタマイズすれば、スマホとPCで広告を出し分けることができるので、その悩みも少しは軽減するのではないでしょうか。また、別々のコードなのでクリック率の解析でも、どのデバイスでのクリック率が高いのかを知ることができるのでオススメです。

WordPressでブログを運営している方はぜひお試しあれ。

  • 今回のカスタマイズはfunctions.phpを編集しますので、カスタマイズする際はバックアップはお忘れなく。

関連記事

条件分岐やfunctions.phpのカスタマイズをする方は下記の記事も参考になるかもしれません。

プラグイン不要!function.phpにコピペするだけで出来るカスタマイズコードまとめ

2015.04.11

WordPressカスタマイズに!IF文(条件分岐)の使い方まとめ

2015.02.08

SPONSORLINK

moreタグ Adsenseレスポンシブ

\ Twitterでフォロー /



新作!究極のモバイルファースト「ストーク」


大人気ハミングバードWordPressテーマの続編登場!ストークはブログマーケッターJUNICHIさんとのコラボによりつくられた特別なテーマです。

「新しいスマホビュー時代をつくろう」というのをコンセプトに、スマホでの見やすさ、操作しやすさにとことんこだわりました。

ABOUTこの記事をかいた人

香川県(うどん県)にてフリーランスWEBデザイナー/ディレクターとして活動。小規模なWEBサイト制作を得意とし、コンセプト設計からデザイン、コーディング、撮影にいたるまでのすべてをこなします。地方の良さを全国に広めていくお手伝いをしていきたいと思っています。