Twenty Fourteen のコンテンツサイドバーに Google AdSense を表示した。でもモバイルでは表示したくない・・・うーむ、どうしよう。
私は Google AdSense（AdSense）の表示場所と表示数について、モバイルデバイスのことを考えたことがなかった。
しかし、最近 Google の「モバイル フレンドリーテスト」を受けたのをきっかけに、ここ数日間、私にしてはかなり真剣に考えなおしてみた――つまり、今のままじゃモバイルだとまずいんじゃないか、というようなことをだ。その時の私の気持ちはサブタイトルに書いたとおりだ。
という訳で、今回は広告ユニットの表示場所と表示数をコントロールする方法を考えてみた。
広告ユニットの表示箇所：
- 今回は、いま使用中のテーマ Twenty Fourteen についてだけ考える。
- 広告ユニットの表示数はデスクトップ（PC）では 3 個、タブレットでは 2 個、スマホなどのモバイル・ホーン（モバイル）では 1 個にする。振り分けは下の表のとおり。
| UA \ DISPLAY | ウィジェット | ページ末尾（左） | ページ末尾（右） |
|---|---|---|---|
| PC | ○ | ○ | ○ |
| タブレット | ○ | ○* | ― |
| モバイル | ― | ○* | ― |
※UA はユーザーエージェント。「*（アスタリスク）」付きはレスポンシブサイズの広告ユニット。
広告ユニットの表示方法：
- 広告ユニットは php の関数などを使って表示する。表示・非表示の制御はユーザーエージェントのモバイル判定で行う。
勘違いと失敗と迷走の途中経過は省略する（注1）。
下の 2 個のコードウインドウに書いてあるのが、今回作成した php のコードだ。
何をやっているのかということは、コード中のコメントを読めば分かって頂けると思う。モバイル判定には、判定用データの充実したサードパーティーのライブラリ「Mobile Detect」を使っている。
C 言語系統でのプログラミング経験は長いが、php は初めてなのでちょっと勝手がちがった。なので今回は参考サイトのコード例から色々頂いて、とりあえず定番的な、安全重視なコードになっている。
コードの追加箇所：
- functions.php には最初のコードウインドウに記載されたコードを追加する。
- content.php と content-page.php には 2 番目のコードウインドウに記載されたコードをそれぞれ追加する。
※各ファイルは \wp-content\themes\twentyfourteen ディレクトリにある。
コードを変更する前には必ずファイルのバックアップをとる。
Mobile Detect のダウンロードとサーバーへのアップロード：
- 1) ダウンロード先： mobiledetect へ行き Mobile-Detect-2.8.17.zip（2015/12/23 現在）をダウンロードする。
- 2) …\wp_content\themes\twentyfourteen の中にフォルダを作成する。名前は任意で良いが、私は [ lib ] という名前を付けてある。
- 3) 圧縮ファイルをローカルの適当なディレクトリで解凍し、…\Mobile-Detect-2.8.17 フォルダの中の Mobile_Detect.php を作成したフォルダにアップロードする。他のファイルやフォルダは気にしなくて良い。
※もしフォルダ名を [lib] 以外の名前にしたら、最初のコードウインドウの「require get_template_directory() . ‘/lib/Mobile_Detect.php’;」の lib のところをその名前に変える。
functions.php の末尾に追加したコード：
このコードを配置すると、コンテンツサイドバーのウィジェット テキストにショートコードを書いて実行させることができる。ショートコードは [[writeadcode]] だ。
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 |
// \wp_content\themes\twentyfourteen\functions.php の末尾に以下のコード // を追加する。 /* ***************************************************** */ // モバイル・デバイス判定に Mobile Detect Library // を使用する。 /* ***************************************************** */ // クラスの登録とインスタンスの取得。 if (!class_exists('Mobile_Detect')){ // 文字列を連結して絶対パスを取得する。「.（ピリオド））」に気を付ける。 require get_template_directory() . '/lib/Mobile_Detect.php'; } $mobile_Detect = new Mobile_Detect; /* ***************************************************** */ // AdSence コード出力用のショートコードを作成する /* ***************************************************** */ // ショートコード化対象の関数。 // twentyfourteen のウィジェット テキストに AdSense のコードを書き込む。 function write_adcode_anywhere() { global $mobile_Detect; $strAdCode; if(!$mobile_Detect->isMobile() || $mobile_Detect->isTablet()): $strAdCode='ここに AdSense のコードを貼りつける。'; else: $strAdCode=''; endif; return $strAdCode; } /* ************************************************ */ // モバイル判定ユーザー定義関数 /* ************************************************ */ // スマホなどのモバイル・ホーン function is_mobile(){ global $mobile_Detect; if($mobile_Detect->isMobile()): return true; endif; return false; } // タブレット function is_tablet(){ global $mobile_Detect; if($mobile_Detect->isTablet()): return true; endif; return false; } // PC（デスクトップ） function is_desktop(){ global $mobile_Detect; if(!$mobile_Detect->isMobile() && !$mobile_Detect->isTablet()): return true; endif; return false; } /* ************************************************ */ // ショートコードを登録する。 /* ************************************************ */ // ショートコードタグ：writeadcode // 関数名：write_adcode_anywhere // 関数名のことを Codex のマニュアルでは「ショートコードが見つかったとき // に実行されるフック」と言っている。 add_shortcode('writeadcode', 'write_adcode_anywhere'); // ウィジェットでショートコードが実行されるようにする。 // 参考にした幾つかのサイトは 2 行目だけを書いているので、それでもいいと // 思う。 add_filter( 'widget_text', 'shortcode_unautop'); add_filter( 'widget_text', 'do_shortcode'); // また、幾つかのサイトの例の様に add_filter( 'widget_text', // 'write_adcode_anywhere') と書いてはいけない。 // 2 番目の引数にショートコード化対象の関数を指定すると、追加したすべての // [widget_text] でその関数が自動実行される。 |
content.php などに追加したコード：
content.php は 70 行目から、content-page.php では 30 行目から追加する。
どちらも追加箇所は <!– .entry-content –> のすぐ後ろだ。行番号は、Twenty Fourteen のバージョンが違うと例とは違っている可能性がある。
サンプルコードの本体は content.php の分はコードウインドウの 12 行目～32行 目まで。content-page.php の分は同じく 45 行目～63 行目までとなっている。
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 |
<!-- content.php に追加したコード --> <div class="entry-content"> <!-- 省略 --> </div><!-- .entry-content --> <!-- Edited by Bonkure. (2015/05/01) --> <!-- is_desktop() はユーザー定義関数。定義は Twenty Fourteen の function.php にある。--> <div style="padding-left:4%"> <?php if(is_single()):?> <?php if(is_desktop()):?> <div style="float:left; margin: 5px 2px; width:301px; height: 251px;"> <center>広告</center> <!-- ここに PC 用の AdSense コードを貼り付ける。 --> </div> <?php else:?> <div> <center>広告</center> <!-- ここにレスポンシブな AdSense コードを貼り付ける。 --> </div> <?php endif;?> <?php if(is_desktop()):?> <div style="float:left; margin: 5px 2px; width:301px; height: 251px;"> <!-- 2 番目の広告ユニット：これが表示されるのは PC だけ。--> <!-- ここに PC 用の AdSense コードを貼り付ける。 --> </div> <?php endif;?> <?php endif;?> </div> <!-- content-page.php に追加したコード --> <div class="entry-content"> <!-- 省略 --> </div><!-- .entry-content --> <!-- Edited by Bonkure. (2015/05/01) --> <div style="padding-left:4%"> <?php if(is_desktop()):?> <div style="float:left; margin: 5px 2px; width:301px; height: 251px;"> <center>広告</center> <!-- ここに PC 用の AdSense コードを貼り付ける。 --> </div> <?php else:?> <div> <center>広告</center> <!-- ここにレスポンシブな AdSense コードを貼り付ける。 --> </div> <?php endif;?> <?php if(is_desktop()):?> <div style="float:left; margin: 5px 2px; width:301px; height: 251px;"> <!-- 2 番目の広告ユニット：これが表示されるのは PC だけ。--> <!-- ここに PC 用の AdSense コードを貼り付ける。 --> </div> <?php endif;?> </div> |
ではいつものとおり、色々参考にさせて頂いたリンクを挙げておく。
実は、他にも大変参考になったサイトがあったのだが、リンクをブックマークし忘れたためリストに入れることができなかった。何とか探し当てて追加したいと思っている。
ショートコード API のリファレンスとプラグイン/API フィルターフック一覧:
WordPress Codex 日本語版：ショートコード API
WordPress Codex 日本語版：プラグイン/API フィルター一覧
参考サイト：
Cyncer：php で PC とスマホを判別する方法 [Mobile Detect]
Young Flavor：WordPress でスマホとそれ以外を切り替える方法
Stephanie Leary：using shortcodes everywhere
WordPress フォーラム：プラグインのショートコードをサイドバーで表示させたい。
注1：（戻る）
一番の勘違いは、AdSense のコードが書き込まれたブロックを CSS（Cascading Style Sheets）などで非表示に設定すれば大丈夫だろう、という考えだ。
確かにブロックはディスプレイ上で非表示になるが、コードは残ったままになる。つまり「見えないけどサービスとしては働いている」という、広告スポンサーや サービス提供者に対してまことに失礼な状況になるのだ。
表示・非表示のコントロールは「表示/非表示 = コードあり/コードなし」でなければいけない。