Simplicityに投稿の2つめのH2の上にウィジェットエリアを追加する方法

このブログはテーマSimplicityの子テーマで作っています。ウィジェットエリアに1つめのH2の上に表示するための「投稿本文中」があるのですが、その１つ下の2つめのH2の上にウィジェット表示をしたいと思いました。
以前トップページだけに表示するウィジェットを作ったときのコードと、検索したページからの情報で作ることができましたのでその方法について書きます。

2つめのH2タグの手前に表示されるウィジェットを作りたい

Simplicityには投稿に指定できるウィジェットエリアが複数作られています。

その中に投稿本文中：投稿の最初のH2タグの手前に表示されるというウィジェットエリアがあります。自分が作っているWEBサイトの宣伝を入れたいと思ったのですが、最初のH2タグの上のウィジェットエリア「投稿本文中」は既に使っているし、もう少し記事の中に入ってからバナーを表示したいと思ったので「2つめのH2タグの手前に表示されるウィジェットエリア」を作りたいと思いました。

表示される位置的には投稿本文中と投稿本文下の間の位置となります。ウィジェットエリアの名前は投稿本文中の下(2つめのH2の上)とします。

「投稿本文中の下(2つめのH2の上)」ウィジェットエリアの追加

「投稿本文中の下(2つめのH2の上)」という名前のウィジェットエリアを追加します。

以前書いた

この記事や、Simplicityでウィジェットエリアを指定しているコード（lib\widget-areas.php）を参考にして、以下のコードを子テーマのfunctions.phpに追加します。

/* ウィジェットエリア追加 */
if (function_exists('register_sidebar')){
    register_sidebar(array(
    'name' => '投稿本文中の下(2つめのH2の上)',
    'id' => 'widget-in-article2',
    'description' => '投稿本文中に表示されるウイジェット。文中2つめののH2タグの手前に表示されます。広告が表示されている場合は、広告の下に表示されます。設定しないと表示されません。',
    'before_widget' => '<div id="%1$s" class="widget-in-article2 %2$s">',
    'after_widget' => '</div>',
    'before_title' => '<div class="widget-in-article2-title main-widget-label">',
    'after_title' => '</div>'
    ));
}

このコードを入れると、ダッシュボード　外観＞ウィジェットに

このように、今追加した「投稿本文中の下(2つめのH2の上)」が表示されるようになります。ここにウィジェットが追加できるようになっています。

投稿本文中の下(2つめのH2の上)に追加したウィジェットを投稿で表示できるようにコードを追加します。先ほどと同じく子テーマのfunctions.phpに追加します。以下のコードになります。

/////////////////////////////////////
// 投稿本文中の下にウィジェットを表示する
/////////////////////////////////////
if ( !function_exists( 'add_widget_before_2nd_h2' ) ):
function add_widget_before_2nd_h2($the_content) {
  if ( is_amp() ) {
    return $the_content;
  }
  if ( is_single() && //投稿ページのとき、固定ページも表示する場合はis_singular()にする
       is_active_sidebar( 'widget-in-article2' ) //ウィジェットが設定されているとき
  ) {
    // 投稿本文中の下タグを記入
    ob_start();//バッファリング
    echo '<div id="widget-in-article2" class="widgets">';
    dynamic_sidebar( 'widget-in-article2' );// 投稿本文中の下ウィジェットエリアの表示
    echo '</div>';
    $ad_template = ob_get_clean();
        $h2 = '/^<h2.*?>.+?<\/h2>$/im';//H2見出しのパターン
        if ( preg_match_all( $h2, $the_content, $h2s )) {//H2見出しが本文中にあるかどうか
          if ( $h2s[0] ) {//チェックは不要と思うけど一応
            if ( $h2s[0][1] ) {//2番目のH2見出し手前にウィジェットエリアを挿入
              $the_content  = str_replace($h2s[0][1], $ad_template.$h2s[0][1], $the_content);
            }
          }
        }
  }
  return $the_content;
}
endif;
add_filter('the_content','add_widget_before_2nd_h2');

このコードは　Simplicityのlib\widget-areas.phpに書いてあったコードと、寝ログさんの 本文記事1、2、3番目のH2見出し手前にアドセンスを挿入するWordPressカスタマイズ方法 この記事を参考にさせていただきました。

注意：AMPについては導入していませんので確認していません。

これでコーディングは終わりました。

「投稿本文中の下(2つめのH2の上)」ウィジェットエリアを使ってみる

ダッシュボード　外観＞ウィジェット をクリック。投稿本文中の下(2つめのH2の上)ウィジェットエリアが表示されているので、ここにウィジェットを入れてみます。

カスタムHTMLをクリックして、投稿本文中の下(2つめのH2の上)をクリックし、ウィジェットを追加をクリック

追加したいHTMLコード（バナーを表示して他サイトへリンクするコード）を入力して保存をクリック。

これで投稿本文中の下(2つめのH2の上)へウィジェットの追加が終わりました。

このWEBサイトの記事を見てみると、

このように2つめのH2の上にカスタムHTMLで追加したコードによって、バナーが表示されるようになりました。ウィジェットエリアに追加したので、別の記事を見ても

こんな感じにバナーが表示されています。

お知らせ：レバテックフリーランスに「ゆうそうとITブログ」の記事を掲載していただきました！

レバテックフリーランスさんのWEBサイトで、「ゆうそうとITブログ」の記事を掲載していただきました！

Gmailの便利機能6選！仕事の効率化に役立てよう

以下のような形でご紹介していただき、ありがとうございました(^^)/

紹介された記事はこちらになります

レバテックフリーランスさんのはフリーランスのエンジニアのための案件サイトで、今回のようにフリーランスのための情報もたくさん掲載されているようです。興味のある方はじっくり見られると良いかと思います！