【応用編】WordPressで記事中H2の手前にアドセンス/広告を入れるカスタマイズ全まとめ

WordPressで記事中H2の手前のウィジェット(広告・アドセンス)をカスタマイズする方法についてまとめます。記事に広告やコンテンツバナーを入れるのですが、特定記事を除外したりカテゴリやモバイルとの切り分けなど個人的に活用しているtipsをまとめておきます。

h2に広告(アドセンス)を挟む方法は寝ログさんのオリジナルコードを元にカスタマイズ

h2に広告を挟む方法は、寝ログさんのコードがプログラマでもあるせいか、綺麗、かつそのまま使っても問題がでないため、利用させてもらっています。Web上ではたまにちょっとまずそうなソースコードもありますよね^^; よくテクニカルのことで調べ事をすると、寝ログさんの記事がひっかかり、他にも良記事が多く助かっています。

本文記事1、2、3番目のH2見出し手前にアドセンスを挿入するWordPressカスタマイズ方法

Google AdSense広告を投稿本文中に全て表示させるWordpressカスタマイズ方法です。パフォーマンスとユーザビリティーの兼ね合いに注意する必要があります。

nelog.jp

さて、今回はカスタマイズってほどでもないですけど、このお借りしたコードをカスタマイズしていく子ネタです。

特定の記事で広告をすべて非表示

特定の記事のみ広告を非表示にしたいことがあります。3箇所あるすべて広告を非表示にします。

if ( is_single() && !is_single( '1' )) {//投稿ページ1のなんとか記事は非表示設定

複数の場合はarrayを使います。’はあってもなくてもかまいません。

if ( is_single() && !is_single(array( 1 , 2 ))) {//投稿ページ1、2のなんとか記事は非表示設定

個人的には面倒なのでなしで。

カテゴリの場合は、!in_categoryを使えばOKです。

カテゴリごとに個別に表示する広告を切り分ける

次に、必要なポイントだけ、カテゴリごとに個別に表示する広告を切り分けます。主な用途はアドセンスではなくバナー広告やスマホで特定の記事をみてもらいたいときなんかに活用できますかね。

//2つ目の広告タグを挿入
$ad2 = <<< EOF

EOF;

//2つ目の広告タグを挿入(カテゴリB)
$ad2_b_category = <<< EOF

EOF;

if ( $h2s[0][1] ) {//2番目のH2見出し手前に広告を挿入
	if(!in_category('2')){
          	$the_content  = str_replace($h2s[0][1], $ad2.$h2s[0][1], $the_content);
	}else{
          	$the_content  = str_replace($h2s[0][1], $ad2_b_category.$h2s[0][1], $the_content);	//bカテゴリの広告
	}
}

複数カテゴリ指定する場合は次のとおり

if(!in_category(array('2', '5' )))

!マークはそうじゃないものです。ひっくり返さないようにしましょう。!をつけない書き方もありですよね。

WordPressで記事中のウィジェット(広告・アドセンス)をカスタマイズする方法まとめ

2つのコードをまとめるとこんな感じでしょうか。 実際、個人的に利用しているソースは、if文でもっと切り分けているため、もっと複雑ですけど。

/**
 * wordpressの記事中にバナーなどを追加
**/
function add_ad_before_h2_for_3times($the_content) {
//1つ目の広告タグを挿入
$ad1 = <<< EOF

EOF;

//2つ目の広告タグを挿入
$ad2 = <<< EOF

EOF;

//2つ目の広告タグを挿入(カテゴリB)
$ad2_b_category = <<< EOF

EOF;

//3つ目の広告タグを挿入
$ad3 = <<< EOF

EOF;

if ( is_single() && !is_single( '1' )) {//投稿ページ1のなんとか記事は非表示設定
	$h2 = '/<h2.*?>.+?<\/h2>/im'; // H2見出しのパターン
	if ( preg_match_all( $h2, $the_content, $h2s )) {//H2見出しが本文中にあるかどうか
		if ( $h2s[0] ) {//チェックは不要と思うけど一応
			if ( $h2s[0][0] ) {//1番目のH2見出し手前に広告を挿入
				$the_content  = str_replace($h2s[0][0], $ad1.$h2s[0][0], $the_content);
			}
			if ( $h2s[0][1] ) {//2番目のH2見出し手前に広告を挿入
				if(!in_category(array('2', '5' ))){
					$the_content  = str_replace($h2s[0][1], $ad2.$h2s[0][1], $the_content);
				}else{
					$the_content  = str_replace($h2s[0][1], $ad2_b_category.$h2s[0][1], $the_content);	//bカテゴリの広告
				}
			}
			if ( $h2s[0][2] ) {//3番目のH2見出し手前に広告を挿入
				$the_content  = str_replace($h2s[0][2], $ad3.$h2s[0][2], $the_content);
				}
			}
		}
	}
return $the_content;
}
add_filter('the_content','add_ad_before_h2_for_3times');

4番目と5番目のH2見出し手前にアドセンスのコードを追加する(追記)

今まではGoogleに認められた人しかアドセンスを3つ以上掲載できませんでしたが、配置数の上限が撤廃されたようです。そこで、4番目と5番目にアドセンスを追加する方法を紹介します。長文の人はどうしても記事下のアドセンスが視認性が低下しがちです。個人的にも長文記事が多いので^^;

//4つ目の広告タグを挿入
$ad4 = <<< EOF
<div class="ad_center">スポンサーリンク4番目</div>
EOF;

//5つ目の広告タグを挿入
$ad5 = <<< EOF
<div class="ad_center">スポンサーリンク5番目</div>
EOF;

同じようにやればいいだけですね。数字だけ間違えないようにしてください。

if ( $h2s[0][3] ) {//4番目のH2見出し手前に広告を挿入
  $the_content  = str_replace($h2s[0][3], $ad4.$h2s[0][3], $the_content);
}
if ( $h2s[0][4] ) {//5番目のH2見出し手前に広告を挿入
  $the_content  = str_replace($h2s[0][4], $ad5.$h2s[0][4], $the_content);
}

h2のタグにアドセンスを追加する際にうざったくならない方法(追記)

広告を追加しすぎるとうざったく見えがちです。このうざったさをださないために2つの方法が思いつきますね。

• 簡単な方法としてh3の見出しを併用する方法
• 2、4、6番目など1つおきにアドセンスをコードを追加する方法

1つおきの方法は広告のコードを全部に挟まなければいいだけです、1つの見出しの文章量がどの程度かにより感じ方も違うので、そのあたりを吟味して決めればOKでしょう。

目次の上にアドセンスは危険?(追記)

目次の上にアドセンスは危険かもしれません。Googleからすぐなおせと警告がきたサイトが2サイトほどあります。^^;　なおしたら大丈夫でした!

目次の上にアドセンスを掲載している人もいますし、警告がこなかったサイトもあります。個人的な分析だと目次の前の文章が極端に短かったり、もしくは目次の前の文章がなかったりすると、ダメっぽいのではないかと。大きなサイズの広告を使っていたため、ファーストビューを広告で隠しているにひっかってしまったのでしょう。

全部記事をチェックしなおすのも面倒だったし、小さな広告よりも大きな広告にする方がよくモバイル用に小さな広告に切り分けるのも面倒だったので、現在1番目は外してひとつ下にずらしてあります。ご参考までに。

is_mobile()でPCとスマホとの切り分けはせず、レスポンシブ広告ユニットで対応

is_mobile()でPCとスマホとの切り分けをしている方もいるようですが、 アドセンスはレスポンシブ広告ユニットで対応しています。 そっちの方がすっきりするかな〜、また、Googleさんがレスポンシブ広告ユニットを使うといいよ、っておすすめしてくるので。

中央あわせも含めて解説しているので。こちらの記事を参照してください。

5分でできるアドセンスでレスポンシブ広告ユニットのサイズ設定方法と使い方

Adsenseでレスポンシブ広告ユニットを導入しました。 わりと簡単ですし、一度、理解すると5分で導入できるため利用した方がいいなと思いまし...

ebookbrain.net

is_mobile()で切り分ける

一応、is_mobileでも切り分けてみます。

functions.phpでis_mobileを作成。wordpressのテーマがsimplicityの場合、mobile.phpにこのコードが書かれているようなので追加する必要はありません。

/**
 * モバイルサイトの分岐(wp_is_mobile()の代替 ipadやkindleを含まないようにするため)
**/
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']);
}

$ad2_pcと$ad2_mobileを作成。名前や並び順はわかりやすいものなら何でもokです。

$ad2_pc = <<< EOF

$ad2_mobile = <<< EOF

if文で切り分けるだけです、簡単ですね。

if( is_mobile() ) { //スマホ
	$the_content  = str_replace($h2s[0][1], $ad2_mobile.$h2s[0][1], $the_content);
} else { // タブレット・PC
	$the_content  = str_replace($h2s[0][1], $ad2_pc.$h2s[0][1], $the_content);
}

最後に該当デバイスで動作確認をします。

小ネタでしたが、ご参考になれば幸いです。