WordPressでＰＣとスマホで別の広告を表示させたい
ＷｏｒｄＰｒｅｓｓで作成するブログの広告表示に以下のプラグインを使用しており、ＰＣとスマホで別の広告を表示させたいと考えているお方！
Ads by datafeedr.com
Quick Adsense
本日はその方法についてお伝えしようと思います。
あ、その前に注意事項ですが、アドセンスは規約上1ページに３つまでしか広告を載せることができないので注意してくださいね( ´∀｀）
それでは早速始めていきます！
スタイルシートでショートコートを定義して本文に設置
まずはスタイルシートで「このコードで囲めばＰＣ(スマホ)のみで表示される」という機能を持ったショートコードを作成します。
「ダッシュボード」→「外観」→「テーマの編集」→functions.phpの順でクリックして、functions.php編集画面へ移動します。
function.phpの編集画面が開けたら、以下のコードをfunctions.phpファイルの最下部(?>の直前)に追記します。
※注意！：function.phpは間違えると画面が真っ白になってしまうこともあるので、バックアップを取得してから編集しましょう！
functions.php追記するコード
function is_mobile(){
$useragents = array(
'iPhone', // iPhone
'iPod', // iPod touch
'Android', // 1.5+ Android
'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']);
}
function pccontents( $atts, $content = null ) {
if(is_mobile()) {
return '';
}
else {
$post_content = do_shortcode( shortcode_unautop( $content ) ); // ショートコードの中でショートコードを実行
return '' . $post_content . '';
}
}
function spcontents( $atts, $content = null ) {
if(is_mobile()) {
$post_content = do_shortcode( shortcode_unautop( $content ) ); // ショートコードの中でショートコードを実行
return '' . $post_content . '';
} else {
return '';
}
}
add_shortcode('pc-only', 'pccontents');
add_shortcode('mobile-only', 'spcontents');
上記設定を保存後、QuickAdsenseの「Ads on Post Body :」に以下の様に記載することで、スマホで見るときとＰＣで見るときの広告表示を別にすることができます。
<ul class="doublerec"> [pc-only] <li> [dfads params='groups=130&limit=1'] </li> [/pc-only] <li> [dfads params='groups=130&limit=1'] </li> </ul> sponsored link
ちなみに上記は以下のように表示したい場合の設定です。
・ＰＣ表示 ：広告1[groups=130]と広告[groups=131]を横並びで表示させる。
・スマホ表示：広告1[groups=131]のみを表示させる。
広告1[groups=130]はfunction.phpで定義した[pc-only]で囲っているので、ＰＣのみで表示されるというわけです。
ちなみに"doublerec"はstyle.cssで以下の様に定義しています。広告を横並びに表示するために便利ですね。
.doublerec ul {
padding: 0;
margin: 0;
list-style: none;
font-size: 0;
}
.doublerec li{
padding: 0;
margin: 0;
display: inline-block;
}
上記のスタイルはあくまで例ですので、お好みのスタイルで表示していただければと思います。
ショートコードの中のショートコード
上記の設定をすれば、表示されるはずなのですが、以下の様に
ショートコードがそのまま表示されてしまう（↓のような）状態になった場合の回避策をお伝えします。
これは、通常の設定では「ショートコードが入れ子になっている場合、ショートコードをそのまま表示してしまう」というＷＰの性質があるため、上記のような表示になってしまうのです。
これはfunctions.phpに設定した、以下の記載で回避されるはずなのですが
$post_content = do_shortcode( shortcode_unautop( $content ) ); // ショートコードの中でショートコードを実行
どうも、Ads by datafeedr.com側にも設定してあげないといけない事があるっぽいんですよね。
Ads by datafeedr.comに設定する方法は以下になります。
■設定対象ファイル
/あなたのＷＰブログのアカウント名/public_html/wp-content/plugins/ads-by-datafeedrcom/inc/dfads.class.php
※上記ファイルにはＦＦＦＴＰや契約しているレンタルサーバのサイトからアクセスできます。
■変更箇所
// Get ad content. $html .= $ad->post_content;
■変更後
// Get ad content. $post_content = do_shortcode( shortcode_unautop( $ad->post_content ) ); // ショートコードの中でショートコードを実行 $html .= $post_content; //$html .= $ad->post_content;
■変更内容
もともとの記載をコメントアウト(//で無効)し、先ほどfunctions.phpに設定した内容と同じように「ショートコード内でショートコードを実行する」コードを追加しました。
■まとめ
私は上記の設定をすることで思い通りに表示することに成功しました。
皆さんはいかがでしたか？
