WordPressで記事中H2の手前のウィジェット(広告・アドセンス)をカスタマイズする方法についてまとめます。記事に広告やコンテンツバナーを入れるのですが、特定記事を除外したりカテゴリやモバイルとの切り分けなど個人的に活用しているtipsをまとめておきます。
目次
h2に広告(アドセンス)を挟む方法は寝ログさんのオリジナルコードを元にカスタマイズ
h2に広告を挟む方法は、寝ログさんのコードがプログラマでもあるせいか、綺麗、かつそのまま使っても問題がでないため、利用させてもらっています。Web上ではたまにちょっとまずそうなソースコードもありますよね^^; よくテクニカルのことで調べ事をすると、寝ログさんの記事がひっかかり、他にも良記事が多く助かっています。
さて、今回はカスタマイズってほどでもないですけど、このお借りしたコードをカスタマイズしていく子ネタです。
WordPressでH2の見出しの上にgoogleアドセンス/広告を入れる(コード編)
特定の記事で広告をすべて非表示
特定の記事のみ広告を非表示にしたいことがあります。3箇所あるすべて広告を非表示にします。
if ( is_single() && !is_single( '1' )) {//投稿ページ1のなんとか記事は非表示設定
複数の場合はarrayを使います。’はあってもなくてもかまいません。
if ( is_single() && !is_single(array( 1 , 2 ))) {//投稿ページ1、2のなんとか記事は非表示設定
個人的には面倒なのでなしで。
カテゴリの場合は、!in_categoryを使えばOKです。
if(in_category( array(‘a’, ‘b’, ‘c’) )) カテゴリごとに個別に表示する広告を切り分ける
次に、必要なポイントだけ、カテゴリごとに個別に表示する広告を切り分けます。主な用途はアドセンスではなくバナー広告やスマホで特定の記事をみてもらいたいときなんかに活用できますかね。
//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' )))
!マークはそうじゃないものです。ひっくり返さないようにしましょう。!をつけない書き方もありですよね。
そのうち、こんな感じになっていきます。
if(in_category( array('ebook', 'cinema', 'game') )){
$the_content = str_replace($h2s[0][0], $ad1_ebook.$h2s[0][0], $the_content);
}else if(in_category( array('wordpress', 'programming') )){
$the_content = str_replace($h2s[0][0], $ad1_program.$h2s[0][0], $the_content);
}else{
$the_content = str_replace($h2s[0][0],$ad1.$h2s[0][0], $the_content);
}
カテゴリのスラッグを変えないなら、数字よりこちらの方がコードとしてはわかりやすいです。
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);
}
is_mobile()でPCとスマホとの切り分けはせず、レスポンシブ広告ユニットで対応
is_mobile()でPCとスマホとの切り分けをしている方もいるようですが、 アドセンスはレスポンシブ広告ユニットで対応しています。そっちの方がすっきりするかな〜、また、Googleさんがレスポンシブ広告ユニットを使うといいよ、っておすすめしてくるので。
カスタム検索の他に、中央あわせも含めて解説しているので。アドセンスのカスタマイズまとめ記事をみてください
is_mobile()で切り分ける
一応、is_mobileでも切り分けてみます。
WP_Fastest_Cacheの特徴と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);
}
最後に該当デバイスで動作確認をします。
cocoonならもっと楽!すべてのh2のアドセンスコードの貼り方
システム側で対応してくれたようです。もうコードを書かなくてもいけます。これは楽でありがたいですね。
cocoon設定 > cocoon設定 > 広告
- レスポンシブの広告コードを1ついれる
- 本文中 > [ 広告の表示数を制御する ] -1でチェック。
h3の見出しを使うことにより、h2すべていれても、うざい感じは回避できます。うちのサイトは長文も多いので助かります。
特定の記事のみ広告を非表示にすることもできます。
WordPressでH2の見出しの上にgoogleアドセンス/広告を入れる(豆知識編)
h2のタグにアドセンスを追加する際にうざったくならない方法(追記)
広告を追加しすぎるとうざったく見えがちです。このうざったさをださないために2つの方法が思いつきますね。
- 簡単な方法としてh3の見出しを併用する方法
- 2、4、6番目など1つおきにアドセンスをコードを追加する方法
1つおきの方法は広告のコードを全部に挟まなければいいだけです、1つの見出しの文章量がどの程度かにより感じ方も違うので、そのあたりを吟味して決めればOKでしょう。
目次の上にアドセンスを入れるとGoogleが警告?(追記)
目次の上にアドセンスは危険かもしれません。Googleからすぐなおせと警告がきたサイトが2サイトほどあります。^^; なおしたら大丈夫でした!
目次の上にアドセンスを掲載している人もいますし、警告がこなかったサイトもあります。個人的な分析だと目次の前の文章が極端に短かったり、もしくは目次の前の文章がなかったりすると、ダメっぽいのではないかと。大きなサイズの広告を使っていたため、ファーストビューを広告で隠しているにひっかってしまったのでしょう。
全部記事をチェックしなおすのも面倒だったし、小さな広告よりも大きな広告にする方がよくモバイル用に小さな広告に切り分けるのも面倒だったので、現在1番目は外してひとつ下にずらしてあります。ご参考までに。
小ネタでしたが、ご参考になれば幸いです。
コメント
こちらの記事が大変参考になりました。
寝ログさんのコードではどうしても編集出来なかったことが、この記事でスマートに解決されました。ありがとうございました。
見落としていてお返事遅くなりましてすいません! お役に立てたようでよかったです。^^