【Cocoon/Swell】H2見出し上にGoogleアドセンス(広告ウィジェット)【目次上は危険!?】

Cocoon

2024.10.07

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

cocoonで検証していますが、swellも買ったためswellでも使っています。sangoも一緒のはずです。

【比較】SWELL/stork19/JIN:R/sango/Cocoon【テーマの違い、どっち!】

WordpressのテーマはSwell、ストーク、JIN:R、sango、Cocoonなどいろいろとありますが、Twitterの感想と自分の利用経験についてまとめていきます。【比較】SWELL/stork19/JIN:R/sango/Coc

なお、現在はcocoonはシステム側で対応済みです。sangoも公認子テーマporipuで対応されているようです。ただCocconの広告設定はアドセンスを一括で入れるものなので、アドセンス以外のPR記事を入れたい場合、このカスタマイズの方が使えるかも。というか今もこのコードをベースにして改変して使っています。

1 【Cocoon/Swell】WordpressでH2見出し上にGoogleアドセンスを挿入【応用編/完成コード】
2 WordPressで記事中のウィジェットを追加(予備知識)
- 2.1 coccon開発者寝ログさんのオリジナルコードを元にカスタマイズ
- 2.2 ウィジェットの投稿本文中とこのカスタマイズの違い
3 WordPressでH2の見出しの上にgoogleアドセンス/広告を入れる(解説)
4 cocoonはシステム側が対応になり広告設定で簡単
- 4.1 poripu(sango)もh2のアドセンスに対応
5 WordPressでH2の見出しの上にgoogleアドセンス/広告を入れる(豆知識編)
- 5.1 h2のタグにアドセンスを追加する際にうざったくならない方法(追記)
- 5.2 危険!目次上にアドセンスを入れるとGoogleが警告?
6 swellで目次が出てこない(h2上に広告をいれる弊害)
- 6.1 Swellの目次上と目次下の制御
- 6.2 Swellの目次が表示されない

【Cocoon/Swell】WordpressでH2見出し上にGoogleアドセンスを挿入【応用編/完成コード】

実際はもっと複雑ですけど必要な部分だけ切り出しました。特定の記事を非表示、カテゴリの切り分け、4つ目5つ目にもアドセンスを追加しています。モバイルとPCの切り分けは今はやっていません。

////////////////////////////////////////////
// h2のウィジェット
////////////////////////////////////////////
function add_ad_before_h2_for_3times($the_content) {
//1つ目の広告タグを挿入
$ad1 = <<< EOF

<div class="iconbox">
PR記事:<a href="https://ebookbrain.net/" target="_blank" title="">リンク</a>
</div>

EOF;

$ad1_program = <<< EOF

<div class="iconbox">
人気記事:<a href="https://ebookbrain.net/" target="_blank" title="">リンク</a>
</div>

EOF;

$ad1_ebook = <<< EOF

<div class="iconbox">
人気記事:<a href="https://ebookbrain.net/" target="_blank" title="">リンク</a>
</div>

EOF;
	
$ad1_art = <<< EOF

<div class="iconbox">
人気記事:<a href="https://ebookbrain.net/" target="_blank" title="">リンク</a>
</div>

EOF;

//2つ目の広告タグを挿入
$ad2 = <<< EOF
<div class="ad-center">スポンサーリンク</div>
//アドセンスのコード

EOF;

//3つ目の広告タグを挿入
$ad3 = <<< EOF
<div class="ad-center">スポンサーリンク</div>
//アドセンスのコード

EOF;

//4つ目の広告タグを挿入
$ad4 = <<< EOF
<div class="ad-center">スポンサーリンク</div>
//アドセンスのコード

EOF;

//5つ目の広告タグを挿入
$ad5 = <<< EOF
<div class="ad-center">スポンサーリンク</div>
//アドセンスのコード

EOF;

/*
記事1, 記事2は非表示
*/
if ( is_single() && !is_single(array( 1, 2 ))) {

    $h2 = '/^<h2.*?>.+?<\/h2>$/im';//H2見出しのパターン
    if ( preg_match_all( $h2, $the_content, $h2s )) {//H2見出しが本文中にあるかどうか
        if ( $h2s[0] ) {//チェックは不要と思うけど一応
            if ( $h2s[0][0] ) {//1番目のH2見出し手前に広告を挿入
                if(in_category( array('ebook', 'ebookstore', 'cinema', 'game') )){ //カテゴリごとにPR記事を変える
                    $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 if(in_category( array('art') )){ 
                    $the_content  = str_replace($h2s[0][0], $ad1_art.$h2s[0][0], $the_content);  
                }else{
                    $the_content  = str_replace($h2s[0][0],$ad1.$h2s[0][0], $the_content);
                }
            }
            if ( $h2s[0][1] ) {//2番目のH2見出し手前に広告を挿入
                $the_content  = str_replace($h2s[0][1], $ad2.$h2s[0][1], $the_content);
            }
            if ( $h2s[0][2] ) {//3番目のH2見出し手前に広告を挿入
                $the_content  = str_replace($h2s[0][2], $ad3.$h2s[0][2], $the_content);
            }
            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);
            }
        }
    }
  }
  return $the_content;
}
add_filter('the_content','add_ad_before_h2_for_3times');

WordPressで記事中のウィジェットを追加(予備知識)

coccon開発者寝ログさんのオリジナルコードを元にカスタマイズ

ベースとなるソースコードは寝ログさんのものを使わせてもらっています。ありがとうございます。

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

1年ほど前、最初のH2見出し手前に広告を表示する方法を考えてみました。この方法は、現在自分のテーマでも利用し…

WordPress関連は初心者が多いせいか、結構まずそうなソースコードが転がっていることも少なくないのですが、わいひらさんはプログラマなので、綺麗かつ手堅いコードなのでそのまま利用させてもらっています。他にも良記事が多く助かっています。

上記のコードはちょっと手をくらえただけなのでカスタマイズってほどでもないですけど、子ネタですかね。

ウィジェットの投稿本文中とこのカスタマイズの違い

詳しくは調べていないのですが、Table of Contents Plusを使った場合、このカスタマイズは目次の上に最初の広告が表示されます。「ウィジェットの投稿本文中」は目次の下に表示されます。「ウィジェットの投稿本文中」は1ヵ所のみ表示する場合に使えます。

WordPressでH2の見出しの上にgoogleアドセンス/広告を入れる(解説)

上記の完成コードを簡単に解説しています。完成コードに最近手を入れたため、以下の記事は少し古いところもありますが、だいたいはわかるはず…。

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

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

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);
	  }

カテゴリのスラッグを変えないなら、数字よりこちらの方がコードとしてはわかりやすいです。

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でも切り分けてみます。

キャッシュ系のプラグインを利用していて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はシステム側が対応になり広告設定で簡単

システム側で対応してくれたようです。もうコードを書かなくてもいけます。これは楽でありがたいですね。

cocoon設定 > cocoon設定 > 広告

レスポンシブの広告コードを1ついれる
本文中 > [ 広告の表示数を制御する ] -1でチェック。

広告（AdSense）を手っ取り早く設定する方法

Cocoonテーマ利用時における、最も簡単なAdSense広告設定方法の紹介です。

h3の見出しを使うことにより、h2すべていれても、うざい感じは回避できます。うちのサイトは長文も多いので助かります。

特定の記事のみ広告を非表示にすることもできます。

poripu(sango)もh2のアドセンスに対応

カスタマイザーにアドセンス記事内広告のコードを挿入して、チェックを選ぶだけです。
https://oldno07.com/poripu/articles-in-ad/

WordPressでH2の見出しの上にgoogleアドセンス/広告を入れる(豆知識編)

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

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

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

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

危険!目次上にアドセンスを入れるとGoogleが警告?

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

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

だけど、全部の記事をチェックしなおすのも面倒です。

小さな広告よりも大きな広告にする方がよくモバイル用に小さな広告に切り分けるのも面倒だったので、現在1番目は外してひとつ下にずらしてあります。代わりににこのサイトではPR記事をいれるようにしました。ご参考までに。

swellで目次が出てこない(h2上に広告をいれる弊害)

swellで目次がでこなくなりました。ソースコードで確認すると目次があるため、他の要因で悪さしているなと思いました。

目次はh2絡みですから、このカスタマイズとswellの目次のプログラムがバッティングして、悪影響しているんだなと悟りました。表示優先度をかえたらでるようになりました。

Swellの目次上と目次下の制御

10だと目次上にでますね。

add_filter('the_content', 'add_ad_before_h2', 10);

15だと目次下にでますね。

add_filter('the_content', 'add_ad_before_h2', 15);

~~めでたく解決です。~~

Swellの目次が表示されない

上記の方法で解決したはずだったのですが、あるバージョンからSwellの目次が表示されなくなりました。

add_filter('the_content', 'add_ad_before_h2', 12);

12より小さいと表示されないようです。目次下なら問題なく表示されますが、目次上に表示したいです。コーディングで解決する方法は厄介だったので、問題となるSwellの目次自体を外しました。

久々にプラグインのTable of Contents Plusを導入して解決です。

cocoonの目次をおしゃれにCSSカスタマイズ【WordPress】

目次のカスタマイズ覚書です。cocoonの目次をおしゃれにCSSカスタマイズ【WordPress】cocoonの目次はデフォルトのHtmlを簡潔に表記すると、こんな感じです。<div class="toc"> <input type="ch

カスタマイズする人は意外とSwellよりCocoonの方が扱いやすいかもですね。Swellはやや素人情報が多くてコーディングの情報が少なめです…。

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

よとよより:

2017年3月2日 8:04 AM

こちらの記事が大変参考になりました。
寝ログさんのコードではどうしても編集出来なかったことが、この記事でスマートに解決されました。ありがとうございました。

返信
管理人より:

2017年3月22日 2:04 AM

見落としていてお返事遅くなりましてすいません! お役に立てたようでよかったです。^^

返信