WordPress のテーマ専用だけど、Google AdSense 表示用の PHP クラスを作ってみた

テーマの functions.php にアドホックなコードを追加するのはもうやめたい・・・さてどうしょう?

先日、このサイトで使っているテーマのTwenty Fourteen を更新した時に Google  AdSense(AdSense)の表示方法も一緒に変更した。
色々な細かい点は続編の方に書くことにして、今回は実際に Twenty Fourteen と Twenty Sixteen の 2 種類のテーマで動作を確認したコードを、説明に先立ってアップする。

ちょっと見には more タグを AdSense 表示コードに置き換えているみたいだが、そうじゃなくて more タグの直下にショートコードを置いてそれらしく見せているだけだ。

広告ユニットの表示箇所:

  • 広告ユニットの表示数は、 PC では 4 個とし、タブレットでは 3 個、モバイルホーンでは 2個とする。
  • 振り分けは下の表のとおり。は AdSense 以外の広告ユニット。
UA \ DISPLAY ウィジェット 文中 ページ末尾(左) ページ末尾(右)
PC ○*
タブレット ○* ○*
モバイル ○* ○*

※UA  はユーザーエージェント。「*(アスタリスク)」付きはレスポンシブサイズの広告ユニット。ページ末尾に 1 個の時はおおよそ中央に配置される。


スポンサーリンク

 

今回の php クラスのサンプルコードは、このサイトで実際に使っているコードから広告表示コードの部分を削除したものをアップしてある。
サブタイトルで言っていることは完全には実現できていないが、functions.php にはクラス使用時の約束事を数行追加するだけなので、テーマの更新もそれほどストレスにはならない。

これ以降はサーバーに実用クラスをアップした時の手順を説明する。
サンプルコードは自由に使って頂いて構わないが、その場合はあくまでも各位の自己責任ということでお願いしたい。

準備:

  • モバイル判定用のモジュール Mobile Detect  をダウンロードする。

ダウンロード先: mobiledetect

※Mobile-Detect-2.8.17.zip(2015/12/23 現在)をダウンロードする。

ダウンロードした zip ファイルを解凍する。
解凍後の Mobile-Detect-2.8.17 フォルダの中には幾つかのサブフォルダとファイルがあるが、今回は Mobile_Detect.php ファイルだけを使った。

  • Disp_Adsense.php ファイルを作成する。

コードウインドウ [Class Disp_Adsense] のコードをテキストエディタに貼りつけ、「$strAdCode =」から始まる文字列の中の「ここにホニャララのコードを貼りつける」と書いてあるところを、実際の AdSense 表示コードなどに置き換える。

完成した php コードに「Disp_Adsense.php」と名前を付けて保存する。
保存するときのエンコードは UTF-8 だ!

  • テーマの functions.php をダウンロードする。

テーマの functions.php をダウンロードする。
functions.php はサーバーの \wp-content\themes\twentyfourteen ディレクトリにある。functions.php には後で数行のコードを追加する。

今回は functions.php や page.php などのテーマオリジナルファイルを編集する前に、データベースのエクスポートを始めとするすべてのバックアップを実行した。

functions.php にはわずか数行ほど書き加えるだけなのに、何を大げさな・・・と思うかもしれないが、万一ということはあり得るし、今回は実際にあったのだ(注 1)。

 

コードの利用手順:

後は下の手順に従って進める。

Mobile_Detect.php、Disp_Adsense.php などの利用手順:

  • 1) サーバーの \wp_content\themes\twentyfourteen の中に新規フォルダを作成する。名前は任意で良いが、私は【lib】という名前を付けた。
  • 2)Mobile_Detect.php と Disp_Adsense.php を【lib】フォルダにアップロードする。
  • 3)functions.php に [ functions.php 追加コード ] ウインドウのコードを追加して、テーマのルートディレクトリにアップロードする(UTF-8 )。
  • 4)ショートコードを書いて結果を確認する。

※もしフォルダに【lib】以外の名前を付けたら、Disp_Adsense.php の「require_once (get_template_directory() . ‘/lib/Mobile_Detect.php‘);」とfunctions.php  に追加した「require_once(get_template_directory() . ‘/lib/Disp_Adsense.php‘);」の「lib」の部分をその名前に変更する。

※私は Twenty Fourteen の content.php と  content-page.php  の中でショートコードを使っている。AdSense のポリシーに違反しない限り、ショートコードは好きな所に置ける。

Disp_Adsense.php のコード:

※コードウインドウを最大化すると 161 行目と 173 行目の 「max-widt: 310px;」の表示が不完全になるので注意して頂きたい。不思議なことがあるものだ。

Twenty Fourteen の functions.php に追加したコード:

テーマの functions.php の末尾に以下のコードを貼り付ける。
これはテーマを更新するたびに実行する必要があるが、書いているのは数行のクラス初期化コードだけなので、私としてはすごく気持ちが楽になった。

Twenty Fourteen の content.php の中でショートコードを実行させる例:

注 1:

今回のテストでは、Twenty Fourteen の content.php にショートコードを実行させるためのコードを 2 行追加したが、追加コードの配置を色々いじっているうちに、サイトが正常に表示されなくなるという現象が発生した。

追加コードを削除すると正常に復帰するが、再度追加するとまた異状表示になる・・・。
追加コードそのものやクラスのコード自体に間違いがなくてもそうなるのだ。
最終的にはバックアップしてあったファイルにコードを書いて問題を解決した。

こういうエラーは、コード作成時にコピペを多用していると(極めて小さな確率には違いないが)いつかは必ず発生する。私は秀丸エディタのみならず、Microsoft Visual Studio の C# のコードエディタでも同じ事を数回経験している(戻る)。

スポンサーリンク

スポンサーリンク

コメントを残す

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です