WordPressの記事中でPCとスマホのAdSense表示を簡単に切り替える方法!
どうもpei(@pei_babo)です。
もはやWebサイトは完全にスマホを意識しなくてはならない時代ですね。
モバイルファーストと言われて久しいです。
そんなモバイル先行な時代に当ドドドのフリーランスエンジニアは9割方デスクトップからの閲覧、というまさに時代に逆行しているアマノジャクメディアと言えると思います。
「時代に取り残されたくない…」
ドドドのフリーランスエンジニアはエンジニアやノンデザイナーの仕事上の困った…をちょっぴり解決するtips系が多いのでデスクトップが多くなるのは必然かと思います。
そんなデスクトップ特化方ブログなわけですが、実は当サイトはレスポンシブデザインだったりします。
レスポンシブデザインはいわゆるワンソースマルチユースとか言われるアイツです。
ご存知だとは思いますが、一つのソースでデスクトップ・タブレット・ファブレット・スマートフォン全ての画像サイズに合わせてデザインを変化させるアイツです。
レスポンシブデザインだとどうしてもPCやスマホなどの判定をしてAdSenseを切り分ける必要に駆られるわけです。
さて、そんな今日はWordPressでスマホとPCのAdSenseの広告表示を切り分ける一番簡単な方法を書いていきます。
ちなみにプラグイン無しです!
プログラミングやWordPressを習得するのに一番近道な方法とは?
目次
AdSenseでスマホとPCの表示を切り替える目的とは?
そもそもスマホとPCでなぜAdSenseの表示を切り替えたいと思うのか?
もちろん人それぞれ理由はあると思うのですが、主に以下のような理由からではないでしょうか。
- ① スマホとPCでAdSense広告を分けて効果測定をしたいという「計測の問題」
- ② スマホは画面サイズが小さいから、レクタングル大が収まらないけど、PCでは表示させたいなどの「画面サイズの問題」
ほぼこの二つの理由が主かと思います。
①は当たり前ですが、②のレクタングル大というのがちょいとミソですね。
というのも、レクタングル中よりレクタングル大の方がAdSenseの仕組み上、必然的に広告単価が高くなるので、色々な意味で安定的にブログやメディア運営をするためには出来ればPCでは「レクタングル大」を出したいところです。
記事中で切り分けるにはショートコードを使うのが簡単
あまりむやみやたらにWordPressでプラグインを入れたくないのは皆さん思うところですよね。
もちろん素晴らしいプラグインはたくさんありますし、かくいう私もプラグイン好きなのですがプラグインなしで同じような機能が出来ればもっと良いですよね。
なので今回はプラグインを使わずショートコードを使って簡単に実装したいと思います。
つらつら説明してもあれなのでコードを書いていきます。
functions.phpにAdSense切り分けショートコードを書く!
functions.php
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 | function showResponsiveAdSense() { if (wp_is_mobile()) { $adTags = <<< EOD // ここにスマホ用 AdSenseコード EOD ; } else { $adTags = <<< EOD // ここにPC用 AdSenseコード EOD ; } return $adTags; } add_shortcode('adSense', 'showResponsiveAdSense'); |
※「とおりすがり」さんにコメント頂き、そのままコピーするとエラーが起こってしまうことが分かったため、2015/01/31にコードを一部修正致しました。「とおりすがり」さんありがとうございます!
functions.phpに上記コードを追加し、記事の投稿画面で[adSense]と入力すればあら不思議、スマホとPCを判定した結果のAdSense広告が表示されます。
ショートコードって楽ですね!
ちなみにスマホとPCの判定はWordPress関数のwp_is_mobile()を使っています。
参考サイト
下記のサイトを参考にさせて頂きました!
billion-logさん、ありがとうございます!
まとめ
いやーでも本当にショートコード楽だわ。
これがあればなんでも出来るね。
こんにちは。色々と参考にさせて頂き記事に感謝しております。さて、上に書いて下さったアドセンスをデスクトップとモバイルに分けるショートコードですが、phpのエラーが出てそのまま使用できないようでした。
もしお時間があればエラーのでないコードを宜しくお願い致します。
通りすがりさんこんにちはPeiです!
コメント頂き大変うれしいです!╭( ・ㅂ・)و ̑̑ グッ !
むむむ!エラーが出てますか!
それは申し訳ございません。
ちょっと調べますので、少々お待ちくださいε=ε=ε=ε=ε=(o゚ー゚)oブーン!!
通りすがりさん!
コードを修正致しました!
EODの前にスペースが入るとエラーになってしまうのですが、私のコードはスペースが入っておりました。
ご迷惑をお掛けし申し訳ございませんでした。
またブログを再開しましたので、これからも見ていただけると嬉しいです^^
この度はご連絡頂き本当にありがとうございました!