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

 

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

目次

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

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

メリット

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

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

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

 

また、仮にプラグインを使っていた場合、プラグインのサポートが終わり、現行の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への記述は不要)

することで可能です。

 

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

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

サービスメニュー

Postscript執筆後記

今日はとあるコンサルティングを。
方向性が見えてきたので、楽しみです。

Something New一日一新

LINE通話で弾き語り
とあるコンサルティング(受ける方)

\本を出版しました/

Seiji Aihara / 相原 征爾

Seiji Aihara / 相原 征爾

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

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

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

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

著書 『知識・経験ゼロでも独立して人生を楽しむ方法』