初心者向けSTINGER8カスタマイズ 最初のH2見出し前にAdSenseを表示する方法

STINGER8 ロゴ

STINGER8には専用のウィジェットに設定してあるAdSense広告を最も効果の高い投稿下に自動で表示してくれる機能がありますが、投稿下と同様に広告効果が高いと言われている「最初のH2見出し前」にも表示する為のカスタマイズ方法を紹介したいと思います。

広告を見出し前に表示する方法は二通り

広告の挿入位置は自由に選べるが手動による更新が必要な方法と、条件を指定した決め打ちになるが各記事の更新は不要な二通りの方法があります。

ショートコードを利用する方法

一つ目の方法はカスタマイズでも何でもありませんが、投稿中の最初のH2見出し前にショートコード [adsense] を自分で記述するという方法で、PCには「広告・Googleアドセンス用336px」、スマホには「広告・Googleアドセンスのスマホ用」に設定した広告ユニットを表示出来るというものです。

ショートコードはそのまま手入力しても良いですし、テキストエディターからクイックタグの アドセンス をクリックしても挿入出来ます。

この方法の良い点は見出し前に限らず本文中のどこにでも簡単に広告を挿入出来るというところですが、過去に投稿したエントリーに対しては全て手作業で追加しなければなりません。

functions.phpをカスタマイズする方法

紹介するとは言ってみたもののPHPに関しては私もド素人ですので、無料WordPressテーマSimplicity の作者でおなじみの「わいひら」さんのブログ記事を参考にさせていただきました。

参考にしたと言うよりほとんどそのまま流用していますが、こちらの記事では広告用のウィジェットを作成してその内容を表示しているのに対して、当エントリーではSTINGER8の機能を利用して表示するようにしてあります。

ちなみにこの行を

dynamic_sidebar( 'widget-in-article' );//本文中ウィジェットの表示

こうしただけなんですけどね…

get_template_part( 'st-ad' );

この st-ad というテンプレートファイルは、1つめの方法で出てきたショートコード [adsense] で使用しているものなので、これを利用する事によってPCとスマホでの広告表示を自動的に切り分ける事も出来ていいかなと思いまして。

コピペ一発用のコード

functions.php に以下のコードをコピペで追加すると、最初のH2見出し前に自動的に広告が表示されるようになります。

///////////////////////////////////////
//H2見出しを判別する正規表現を定数にする
///////////////////////////////////////
define('H2_REG', '/<h2.*?>/i');//H2見出しのパターン

///////////////////////////////////////
//本文中にH2見出しが最初に含まれている箇所を返す(含まれない場合はnullを返す)
//H3-H6しか使っていない場合は、h2部分を変更してください
///////////////////////////////////////
function get_h2_included_in_body( $the_content ){
  if ( preg_match( H2_REG, $the_content, $h2results )) {//H2見出しが本文中にあるかどうか
    return $h2results[0];
  }
}

///////////////////////////////////////
// 投稿本文中の最初のH2見出し手前にウィジェットを追加する処理
///////////////////////////////////////
function add_widget_before_1st_h2($the_content) {
  if ( is_single() ) //投稿ページのとき、固定ページも表示する場合はis_singular()にする
    {
    //広告(AdSense)タグを記入
    ob_start();//バッファリング
    get_template_part( 'st-ad' );
    $ad_template = ob_get_clean();
    $h2result = get_h2_included_in_body( $the_content );//本文にH2タグが含まれていれば取得
    if ( $h2result ) {//H2見出しが本文中にある場合のみ
      //最初のH2の手前に広告を挿入(最初のH2を置換)
      $count = 1;
      $the_content = preg_replace(H2_REG, $ad_template.$h2result, $the_content, 1);
    }
  }
  return $the_content;
}
add_filter('the_content','add_widget_before_1st_h2');
オリジナル版にあった広告用ウィジェットが設定されているかどうかの条件分岐は削除してあるので、広告用のウィジェットは必ず設定しておいて下さい。でないと、スポンサーリンクの見出しだけが虚しく表示される事になります…

広告の上下にマージンを取りたい場合

出来ればコードのコピペだけで他の作業は不要にしたいと思いましたが、ちょっと広告の上下の間隔が狭いような…特に気にならないという方はスルーでOKですが一応。

st-ad.phpに追記

スポンサーリンクの見出し部分にはクラスセレクタが無いですし、st-ad.php の中で直接スタイルを記述している部分もあるので、そこに便乗して追記してしまうのが一番手っ取り早いように思います。

正直スマートな方法とは言い難いですがここはひとつダイレクトに修正しましょう。広告の下に関してはCSSで良さそうな感じですが、margin-top はphpに直接記述して margin-bottom はCSSでというのも紛らわしいので同じ場所にしておきますね?

<p style="color:#666;margin-bottom:5px;">スポンサーリンク</p>
	<div class="middle-ad">

このくらいでいいかしら的な値にしておいたので好みで変更して下さい。

<p style="color:#666;margin-top:30px;margin-bottom:5px;">スポンサーリンク</p>
	<div class="middle-ad" style="margin-bottom:30px;">

配置に関しては試行錯誤しましょう

現在では広告数の上限が撤廃され、記事のボリュームによって広告数を自分で調整する事が可能になりましたが、それ以前は見出し前に1つ、投稿下に2つという配置が最も王道と言われていた時期があったようです。

そんなわけで、まずはこの状態からスタートしてその後でABテストを実施してみたり、それぞれの広告ユニットのサイズや配置を変更したりと試行錯誤していただければと思います。

この記事が気に入ったら
いいね!しよう

最新情報をお届けします

トップへ戻る