WordPressの記事中にアドセンスを表示させたいケースは多いと思います。

プラグインを使わずに、特定のテンプレートを作ってアドセンスを自動で表示させるカスタマイズ方法の紹介です。

目次

別のテンプレートを作っておくメリット

WordPressのカスタマイズをする際には、要素ごとにテンプレート(phpファイル)を分けておくと便利です。

その分テンプレートの数は多くなるのですが、

  • 要素内の記述を別のテンプレートに書くことで、そのテンプレート自体はすっきり書くことができ、見やすい
  • どこをいじったら良いかわかりやすく、カスタマイズがしやすい
  • 1行コードを書くことでテンプレートの使いまわしができる

といったメリットがあります。

 

今回は、

  • アドセンスのコードを記載したテンプレート(ad-in-body.php)

を別途用意し、記事中のh2見出しの前に表示させます。

 

なお、functions.phpを編集します。

カスタマイズは必ずバックアップを取ってから行うか、ローカル環境で行っていただければと思います。

h2見出しの前にアドセンスを表示する

functions.phpに以下のコードを記述します。

コードはこちらの記事を参考にさせていただきました。

目次の下&複数のh2タグの上にアドセンス広告を表示させる方法|Libreco


/*____記事内にAdsenseを表示____*/
function add_ad_before_h2($the_content) {
  ob_start();//バッファリング
  get_template_part('ad-in-body');//広告貼り付け用に作成したテンプレート
  $ad_template = ob_get_clean();
  /*
  //広告タグをここに記述する場合
  $ad = <<< EOF
    // ここにアドセンスを挿入
  EOF;
  */
 
  if (is_single()){//投稿ページ
   $h2 = '/<h2.+?<\/h2>/u';
   //$h2 = '/<h[2-3].+?<\/h[2-3]>/u'; //h2とh3タグを合わせてカウントする場合
   
   if ( preg_match_all( $h2, $the_content, $h2s )) {//H2見出しが本文中にあるかどうか
     if ( $h2s[0] ) {//h2タグの有無をチェック
       if ( $h2s[0][0] ) {//1番目のH2見出し手前に広告を挿入
         $the_content  = str_replace($h2s[0][0], $ad_template.$h2s[0][0], $the_content);
       }
     if ( $h2s[0][2] ) {//3番目のH2見出し手前に広告を挿入
       $the_content  = str_replace($h2s[0][2], $ad_template.$h2s[0][2], $the_content);
     }
     if ( $h2s[0][4] ) {//5番目のH2見出し手前に広告を挿入
       $the_content  = str_replace($h2s[0][4], $ad_template.$h2s[0][4], $the_content);
     }
    }
   }
 }return $the_content;
 }
 add_filter('the_content','add_ad_before_h2');

 

get_template_part('ad-in-body');//広告貼り付け用に作成したテンプレート

というところでアドセンス用のテンプレートを呼び出しています。

(”)の中身がテンプレート名になります。

別の名前にする場合はここを変えていただければ。

 

別にテンプレートを作らずに、直接コードを書きたい場合は、「ここにアドセンスを挿入」というところにコードを記載してください。

 

1番目のH2タグ手前に広告を挿入

の[0][0]といった数字の部分ですが、1番目の見出しの直前なら「0」、2番目の見出しの直前なら「1」、というように書きます。

1つずつ数字がずれるイメージですね。

 

せっかくなので、ad-in-body.phpのコードも置いておきます。


<div class="ad-space">
  <div class="ad-pc">
  <!-- ここにアドセンスコードを入れる -->
  </div>
  <div class="clear"></div>
</div>

cssも一応。


.ad-space {
  margin: 40px 0;
  max-width: 100%;
  text-align: center;
}

ad-space以外のクラス名はいらなかったですね…。笑

 

スマホだとたまにアドセンスが横揺れしてしまっていることがありますが、テンプレートにコードを入れてスタイルを当ててあげれば、横揺れも防げるのではないかと思います。

 

 

直接アドセンスコードを記載する方法や、ウィジェットを呼び出す方法は見かけたのですが、別のテンプレートを呼び出して任意のh2タグ前に表示させる方法はみつからなかったので記事にしてみました。

参考になれば嬉しいです。

サービスメニュー

Postscript執筆後記

今日はクリスマス・イブということで朝からSpotifyでクリスマスのプレイリストを色々と流しています。
クリスマスソングは名曲が多く、なんだかんだ好きです。

Something New一日一新

Dockerの仮想環境を使ってWordPressのカスタマイズ
キッチンカーのクリスマス限定メニュー

\本を出版しました/

\セルフマガジン無料送付/

Seiji Aihara / 相原 征爾

Seiji Aihara / 相原 征爾

お金・時間・やりがいなどのバランスを取り人生を楽しむことをサポートする、東京の30代税理士。ひとり社長。
ブログ「FAVPRESSO」は平日毎日更新。

得意な仕事はクラウド会計の導入・ペーパーレス化・経理業務効率化・各種シミュレーション・独立支援など。
遠方・オンライン・スポット対応可能です。
簿記がわからなくても、一から経理ができるようにお伝えします。
Windows・Mac両対応。

音楽、映画、インターネット、カレー、クラフトビールが大好き。
名刺、ロゴ、WordPressテーマ、本の表紙から音楽まで自作する、自称超クリエイティブ。

詳しいプロフィールはこちら
税理士事務所のHP・サービス一覧はこちら

著書 『独立して人生を楽しむ方法』