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 のコード：

<?php

/* *************************************************************************** 	*/
//	Google AdSense を表示するためのクラス(Edited by Bonkure)。
//	モバイル判定には Mobile Detect Library を使用する。
/* ***************************************************************************	*/

class Disp_AdSense{


	private	$mobile_Detect;


	public function __construct() {
	       
		// Mobile_Detect クラスの登録とインスタンスの取得。
		if (!class_exists('Mobile_Detect')){
			// 文字列を連結して絶対パスを取得する。
			//「.（ピリオド））に気を付けること。
			require_once(get_template_directory() 
										. '/lib/Mobile_Detect.php');
		}
		//	インスタンスの作成。
		$this -> mobile_Detect = new Mobile_Detect;
		
		//	ショートコードの登録。
		add_shortcode('adsense_in_widget', 
						array(&$this,'write_adcode_in_widget'));
		add_shortcode('adsense_in_post', 
						array(&$this,'write_adcode_in_post'));

		// 	これはテスト用のショートコード。
		add_shortcode('adsense_in_any_content', 
						array(&$this,'write_adcode_in_any_content'));


		// 	ウィジェットでショートコードが実行されるようにする。
		//	これは Codex  のコード例を丸ごと頂いた。
		add_filter( 'widget_text', 'shortcode_unautop');
		add_filter( 'widget_text', 'do_shortcode');		
		//	more タグ処理用関数をフィルターフックに登録する。
		add_filter('the_content_more_link', 
						array(&$this,'replace_readmore_link'));
	}

	/* *********************************************************** */
	//			モバイル判定ユーザー定義関数		
	/* *********************************************************** */

	// モバイル・ホーン
	public function is_mobile(){
		
		if($this -> mobile_Detect -> isMobile()):
			return true;	
		endif;
		return false;
	}
	// タブレット
	public function is_tablet(){

		if($this -> mobile_Detect -> isTablet()):
			return true;	
		endif;
		return false;
	}
	// PC（デスクトップ）
	public function is_desktop(){


		if(!($this -> mobile_Detect -> isMobile() || 
								$this -> mobile_Detect -> isTablet())):
			return true;	
		endif;
		return false;
	}


	/* ************************************************************* */
	//			AdSense コード出力用関数 	
	/* ************************************************************* */


	// ショートコード化対象の関数。ウィジェット用。
	public function write_adcode_in_widget() {
		
		$tagStart = '<div style="max-width: 310px; 
									margin: auto; text-align: center;">';
		$tagEnd = '</div>';
		
		$strAdCode = '';
		//	デスクトップかタブレットならば広告を表示する。
		if($this -> is_desktop() || $this -> is_tablet()):
			//	固定サイズ。		
		$strAdCode=
				$tagStart
				.'PC かタブレットでは、ここに固定サイズの広告表示コー
					ド――Adsenseとは限らない――を貼りつける。</br>
					もし Adsense ならば、タブレットも非表示にするように
					仕様変更する。'
				.$tagEnd;
		
		endif;

	  	return $strAdCode;
	}

	// ショートコード化対象の関数。投稿用。*/
	public function write_adcode_in_post() {
		
		$tagStart ='<div style="margin: auto; max-width: 337px;">
					<center>スポンサーリンク</center>';
		$tagEnd = '</div>';
		
		$strAdCode = '';
		// 	アーカイブでは広告を表示しない。
		if(is_single() || is_page()):
		
			//	AdSense 表示用のコード。
			//	レスポンシブだが表示幅に制限をかけている。
			$strAdCode = 
					$tagStart.'</br>すべてのデバイスでここにレスポンシブ
					な AdSense のコードを貼りつける。
					ただし今は幅を 301px に制限してテストしている。'
					.$tagEnd.'</br>';
			
		endif;
	  	
		return $strAdCode;
	}

	// 	文末に PCでは 2 個、モバイルデバイスでは 1 個の AdSence を表示する。
	public function write_adcode_in_any_content() {

		$tagStart = '<div style="display: inline-block; margin: 8px; 
											max-width: 310px; text-align: left;">
					<center>スポンサーリンク</center>';
		
		$tagEnd = '</div>';		
		
		$strAdCode = '';
		
		if(is_single() || is_page()):			
			
			if($this -> is_desktop()):
					
				//	AdSense 表示用のコード。PC ではレクタングルを 2 個表示する。
				$strAdCode = 
					'<div style = "text-align: center;">'
					.$tagStart.'PC ではここに固定サイズの AdSense の
					コード（1）を貼りつける。</br></br>'.$tagEnd
					.$tagStart.'PC ではここに固定サイズの AdSense の
					コード（2）を貼りつける。</br>'.$tagEnd.'</div>';	
					
			else:
				//	このコードは Twenty Fourteen の content.php、content-page.php
				//	にショートコードを置く場合に使う。
				//	Twenty Sixteen の記事内にショートコードを置く場合にも、こちらの
				//	コードを使うことができる。
				
				$strAdCode = 	
					'<div style="margin: 0 auto 0 auto; max-width: 310px;">
					<center style="background-color:#FFFFFF;">スポンサーリンク
					</center>
					モバイルではここにレスポンシブな AdSense のコードを貼りつける。
					</div>';
								
				//	このコードは twentysixteen の page.php にショートコードを置く
				//	場合に使う。PC では固定サイズを 2個、モバイルではレスポンシブを
				//	1個表示する。
				/*
				$strAdCode = 
					'<div class = "entry-content">
					<div style="margin: 0 auto 0 auto; max-width: 310px;">
					<center>スポンサーリンク</center>
					モバイルではここにレスポンシブな AdSense のコードを
					貼りつける。</div></div></br>';
				*/	
				
			endif;
			
		endif;
	  	
		return $strAdCode;
	}

	//	more タグ処理用の関数。more  タグ部分を丸ごとパーマリンクで置換している。
	//	ついでに表示文字列も差し替えてしまう。
	//	フィルターフックの登録は、他の関数と一緒にコンストラクタで実行している。
	function replace_readmore_link()
	{
	    return '<a href="' . get_permalink() . '">このページを読む</a>';
	}	
	
}

?>

100

101

102

103

104

105

106

107

108

109

110

111

112

113

114

115

116

117

118

119

120

121

122

123

124

125

126

127

128

129

130

131

132

133

134

135

136

137

138

139

140

141

142

143

144

145

146

147

148

149

150

151

152

153

154

155

156

157

158

159

160

161

162

163

164

165

166

167

168

169

170

171

172

173

174

175

176

177

178

179

180

181

182

183

184

185

186

187

188

189

190

191

192

193

194

195

196

<?php

/* *************************************************************************** */

// Google AdSense を表示するためのクラス(Edited by Bonkure)。

// モバイル判定には Mobile Detect Library を使用する。

/* *************************************************************************** */

class Disp_AdSense{

private $mobile_Detect;

public function __construct() {

// Mobile_Detect クラスの登録とインスタンスの取得。

if (!class_exists('Mobile_Detect')){

// 文字列を連結して絶対パスを取得する。

//「.（ピリオド））に気を付けること。

require_once(get_template_directory()

. '/lib/Mobile_Detect.php');

}

// インスタンスの作成。

$this -> mobile_Detect = new Mobile_Detect;

// ショートコードの登録。

add_shortcode('adsense_in_widget',

array(&$this,'write_adcode_in_widget'));

add_shortcode('adsense_in_post',

array(&$this,'write_adcode_in_post'));

// これはテスト用のショートコード。

add_shortcode('adsense_in_any_content',

array(&$this,'write_adcode_in_any_content'));

// ウィジェットでショートコードが実行されるようにする。

// これは Codex のコード例を丸ごと頂いた。

add_filter( 'widget_text', 'shortcode_unautop');

add_filter( 'widget_text', 'do_shortcode');

// more タグ処理用関数をフィルターフックに登録する。

add_filter('the_content_more_link',

array(&$this,'replace_readmore_link'));

}

/* *********************************************************** */

// モバイル判定ユーザー定義関数

/* *********************************************************** */

// モバイル・ホーン

public function is_mobile(){

if($this -> mobile_Detect -> isMobile()):

return true;

endif;

return false;

}

// タブレット

public function is_tablet(){

if($this -> mobile_Detect -> isTablet()):

return true;

endif;

return false;

}

// PC（デスクトップ）

public function is_desktop(){

if(!($this -> mobile_Detect -> isMobile() ||

$this -> mobile_Detect -> isTablet())):

return true;

endif;

return false;

}

/* ************************************************************* */

// AdSense コード出力用関数

/* ************************************************************* */

// ショートコード化対象の関数。ウィジェット用。

public function write_adcode_in_widget() {

$tagStart = '<div style="max-width: 310px;

margin: auto; text-align: center;">';

$tagEnd = '</div>';

$strAdCode = '';

// デスクトップかタブレットならば広告を表示する。

if($this -> is_desktop() || $this -> is_tablet()):

// 固定サイズ。

$strAdCode=

$tagStart

.'PC かタブレットでは、ここに固定サイズの広告表示コー

ド――Adsenseとは限らない――を貼りつける。</br>

もし Adsense ならば、タブレットも非表示にするように

仕様変更する。'

.$tagEnd;

endif;

return $strAdCode;

}

// ショートコード化対象の関数。投稿用。*/

public function write_adcode_in_post() {

$tagStart ='<div style="margin: auto; max-width: 337px;">

<center>スポンサーリンク</center>';

$tagEnd = '</div>';

$strAdCode = '';

// アーカイブでは広告を表示しない。

if(is_single() || is_page()):

// AdSense 表示用のコード。

// レスポンシブだが表示幅に制限をかけている。

$strAdCode =

$tagStart.'</br>すべてのデバイスでここにレスポンシブ

な AdSense のコードを貼りつける。

ただし今は幅を 301px に制限してテストしている。'

.$tagEnd.'</br>';

endif;

return $strAdCode;

}

// 文末に PCでは 2 個、モバイルデバイスでは 1 個の AdSence を表示する。

public function write_adcode_in_any_content() {

$tagStart = '<div style="display: inline-block; margin: 8px;

max-width: 310px; text-align: left;">

<center>スポンサーリンク</center>';

$tagEnd = '</div>';

$strAdCode = '';

if(is_single() || is_page()):

if($this -> is_desktop()):

// AdSense 表示用のコード。PC ではレクタングルを 2 個表示する。

$strAdCode =

'<div style = "text-align: center;">'

.$tagStart.'PC ではここに固定サイズの AdSense の

コード（1）を貼りつける。</br></br>'.$tagEnd

.$tagStart.'PC ではここに固定サイズの AdSense の

コード（2）を貼りつける。</br>'.$tagEnd.'</div>';

else:

// このコードは Twenty Fourteen の content.php、content-page.php

// にショートコードを置く場合に使う。

// Twenty Sixteen の記事内にショートコードを置く場合にも、こちらの

// コードを使うことができる。

$strAdCode =

'<div style="margin: 0 auto 0 auto; max-width: 310px;">

<center style="background-color:#FFFFFF;">スポンサーリンク

</center>

モバイルではここにレスポンシブな AdSense のコードを貼りつける。

</div>';

// このコードは twentysixteen の page.php にショートコードを置く

// 場合に使う。PC では固定サイズを 2個、モバイルではレスポンシブを

// 1個表示する。

$strAdCode =

'<div class = "entry-content">

<center>スポンサーリンク</center>

モバイルではここにレスポンシブな AdSense のコードを

貼りつける。</div></div></br>';

endif;

return $strAdCode;

}

// more タグ処理用の関数。more タグ部分を丸ごとパーマリンクで置換している。

// ついでに表示文字列も差し替えてしまう。

// フィルターフックの登録は、他の関数と一緒にコンストラクタで実行している。

function replace_readmore_link()

{

return '<a href="' . get_permalink() . '">このページを読む</a>';

}

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

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

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

//	\wp_content\themes\twentyfourteen\functions.php の末尾に以下のコード
//	を追加する。
/* *************************************************************** 	*/
// 	Google AdSense 表示用クラス Disp_Adsense を使用する。
/* ***************************************************************	*/

//	Disp_Adsense クラスの登録とインスタンスの取得。
if (!class_exists('Disp_Adsense')){
	// 文字列を連結して絶対パスを取得する。「.（ピリオド））に気を付ける。
	require_once(get_template_directory() . '/lib/Disp_Adsense.php');
}

$dispAdsense;

if(is_null($dispAdsense)){

	$dispAdsense = 	new Disp_Adsense();	
}

// \wp_content\themes\twentyfourteen\functions.php の末尾に以下のコード

// を追加する。

/* *************************************************************** */

// Google AdSense 表示用クラス Disp_Adsense を使用する。

/* *************************************************************** */

// Disp_Adsense クラスの登録とインスタンスの取得。

if (!class_exists('Disp_Adsense')){

// 文字列を連結して絶対パスを取得する。「.（ピリオド））に気を付ける。

require_once(get_template_directory() . '/lib/Disp_Adsense.php');

}

$dispAdsense;

if(is_null($dispAdsense)){

$dispAdsense = new Disp_Adsense();

}

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

・・・省略・・・</div><!-- .entry-content -->
		<!-- Added by Bonkure.-->
		<?php echo '</br>' ?>
		<?php echo do_shortcode('[adsense_in_any_content]'); ?>
	<?php endif; ?>
	
	<?php the_tags( '<footer class="entry-meta"><span class="tag-links">', '', '</span></footer>' ); ?>
</article><!-- #post-## -->

・・・省略・・・</div>

<?php echo '</br>' ?>

<?php echo do_shortcode('[adsense_in_any_content]'); ?>

<?php endif; ?>

<?php the_tags( '<footer class="entry-meta"><span class="tag-links">', '', '</span></footer>' ); ?>

</article>

注 1：

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

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

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

徒然なるペンペン草

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

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

コメントを残すコメントをキャンセル

年をとっても出来ることはある・・・例えばDTMだって！

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

コメントを残す コメントをキャンセル

年をとっても出来ることはある・・・例えばDTMだって！

コメントを残すコメントをキャンセル