前回、任意の見出しタグの前に自動でアドセンス広告を表示する方法を紹介しました。

任意のh2見出しの前にテンプレートを呼び出してアドセンス広告を表示させる方法。

こちらと同じテクニックを使えば、アドセンス以外の特定のテンプレート（サービスメニュー一覧や問い合わせフォームなど）も見出し前の好きな位置に表示させることができます。

目次

テンプレートを呼び出す方法のメリット・デメリット

初めに、こちらの方法のメリットとデメリットについて簡単に触れておきます。

メリット

ひとつは、プラグインを使わない方法であるためサイトの表示速度に与える影響が少ないです。

プラグインを沢山入れてしまうとどうしてもサイトは重くなってきてしまいます。

「なるべくプラグインを増やしたくない」という方にはおすすめです。

また、仮にプラグインを使っていた場合、プラグインのサポートが終わり、現行のWordPressのバージョンに対応しなくなった場合にその表示させたいものを表示し続けることができなくなってしまいます。

一方、今回の方法は外部に依存しない方法ですので、そのような心配をする必要はありません。

もうひとつは、テンプレート化することにより、デザインなどのカスタマイズがしやすくなるということが挙げられます。

デメリット

デメリットのひとつは、前回と同様こちらはfunctions.phpを触るカスタマイズになります。

失敗するとWordPressの管理画面に入れなくなってしまう可能性もあります。

必ずバックアップを取ってからカスタマイズするか、ローカル環境でカスタマイズを行うことをおすすめします。

2つ目は、こちらで表示させたものはfeedlyで記事を読むときには表示されないということです。

一般のブログ訪問者の方でfeedlyを使っている方はかなり少ないと思いますが、僕のブログはリピーターの方ほどおそらくfeedlyでお読みいただいているので悩ましいところです。

最初はプラグインで表示させようとしたところ、他のコードと競合したせいか上手くいきませんでした。

そこで今回の方法に行き着いたのですが、

• functions.phpをいじるのは怖い
• feedlyでもきちんと表示させたい

という方はプラグイン（Advanced Ads）を使った方が良いと思います。（僕ももう一度プラグインにチャレンジするかもしれません…）

任意の見出しタグの前にテンプレートを表示させる方法

実際にカスタマイズする場合のやり方を紹介します。

functions.phpにコードを追加

以下のコードをfunctions.phpに追加します。

/*_____記事内にサービスメニューを表示_____*/
function add_menu_before_h2($the_content) {
  ob_start();//バッファリング
  get_template_part('service-article');//サービスメニュー貼り付け用に作成したテンプレート
  $menu_template = ob_get_clean();
  
 
  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][1] ) {//2番目のH2タグ手前にテンプレートを挿入
         $the_content  = str_replace($h2s[0][1], $menu_template.$h2s[0][1], $the_content);
       }
    }
   }
 }return $the_content;
 }
 add_filter('the_content','add_menu_before_h2');

get_template_part('service-article');//サービスメニュー貼り付け用に作成したテンプレート

こちらの(”)の中身が後ほど作成するテンプレート名です。

ご自身が作成するテンプレート名に合わせて変えていただければと思います。

if ( $h2s[0][1] ) {//2番目のH2タグ手前に広告を挿入 $the_content = str_replace($h2s[0][1], $menu_template.$h2s[0][1], $the_content);

こちらの数字を変えると、「どの見出しの前に表示させるか」を変えることができます。

たとえば、

• [0][0]→最初のh2タグの直前
• [0][3]→4番目のh2タグの直前

となります。

表示させたいテンプレートを作成

参考までに、僕が作ったテンプレート（service-article.php）のコードを載せておきます。

<section class="service-article">
　　<div class="outer">
　　　　<div class="inner">
　　　　<!-- ここにサービスメニューのリンクなどを貼る（例：<p><a href="https://aboutlife-blog.com/seiji-aihara-tax-accountant-office/" target="_blank" rel="noopener">■税理士事務所ホームページ</a></p> -->
　　　　</div>
　　</div>
</section>

/* 記事中サービスメニュー
-----------------------------------------*/
/* スマホ表示 */
section.service-article {
  width: auto;
  margin: 70px 2%;
  padding: 20px 25px;
  background: #f7f7f9;
}


section.service-article .inner p {
  text-align: left;
  font-size: 1rem;
  letter-spacing: .04rem;
}


/* パソコン・タブレット表示 */
@media (min-width: 600px) {
  section.service-article {
      width: auto;
      margin: 70px auto;
      padding: 40px 60px;
      max-width: 100%;
    }
}

この記事中にも表示されているかと思いますが、こんな感じになります。

色や余白等はお好みで調整していただければと思います。

ちなみに、記事下にも同じようなものを表示させています。

こちらはもっと簡単で、

• サービスメニュー用のテンプレートを作成（僕の場合は「service.php」というテンプレート名です。今回の使いまわしでも可）
• single.phpに「<?php get_template_part( ‘service’ ); ?>」というコードを追加（functions.phpへの記述は不要）

することで可能です。

このブログのようなワンカラムのサイトでは、サービスや商品への訴求がどうしても弱くなってしまいます。

記事中にメニューを置くことで、一定の効果はあるのではと思います。