8月31日午後7時~、円龍寺本堂にて、灯籠流し法要

Cocoonで最後H2の上にウィジェットエリアを追加する方法【最新版】

2026年7月現在、このウェブサイトはワードプレステーマ「Cocoon」を利用しています。

Cocoonは多機能なテーマで、ウィジェットエリアは約30も用意され、自分の目的に合わせてウィジェットを表示できます。役立つサイト⇒『[Cocoon] ウィジェットエリア デモページ Ikumi’s lifelog

豊富にあるウィジェットエリアですが、記事本文中には「投稿本文中」と「固定ページ本文中」しかありません。これは「最初のH2見出しの上」に当たります。おそらく多くのウェブサイトでは、目次がある位置だと思われます。

しかし例えば、「最後見出しH2の上」にアドセンスを設置したいといった考えもあるでしょう。最後見出しH2の上にウィジェットエリアを追加する方法を、インターネット検索してもヒットしなかったので、備忘録として紹介します。

以下のコードを、Cocoon子テーマのfunctions.phpに貼り付けるだけです

💡 【お知らせ】PHP8・AMP廃止に対応した最新コードをお探しの方へ
この記事で以前紹介していた下のコードは旧環境向けです。現在のCocoonやPHP8環境に最適化した最新コードは、ページ下の最新コード解説欄へお進みください。

/* ウィジェットエリア追加 */
if (function_exists('register_sidebar')){
    register_sidebar(array(
    'name' => '投稿本文最後H2見出しの上',
    'id' => 'widget-in-article2',
    'description' => '投稿本文記事に表示されるウイジェット。文中最後の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>'
    ));
}

/////////////////////////////////////
// 投稿本文中の下にウィジェットを表示する
/////////////////////////////////////
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] ) {//H2が2個以上なら最後のH2見出し手前に挿入
              $the_content  = str_replace($h2s[0][count($h2s[0]) - 1], $ad_template.$h2s[0][count($h2s[0]) - 1], $the_content);
            }
          }
        }
  }
  return $the_content;
}
endif;
add_filter('the_content','add_widget_before_2nd_h2');
広告 - Sponsored Links

広告 - Sponsored Links

カスタマイズの手順

  1. ワードプレス管理画面から、「外観」⇒「テーマエディター」を選択
  2. 編集するテーマから、「Cocoon Child」を選択
  3. テーマのための関数「(functions.php)」を選択
  4. functions.phpにコードを貼り付ける
  5. ファイルを更新ボタンを選択

以上で「外観」⇒「ウィジェット」に、投稿本文最後H2見出しの上のウィジェットエリアが追加される。

ワードプレス管理画面からfunctions.phpを編集する手順
ワードプレス管理画面「外観・ウィジェット」からウィジェットエリアを確認する
  • なるべく子テーマでカスタマイズするのが無難
  • 貼り付ける位置は、functions.phpの一番下でOK

functions.phpのソースコードの変更は、ウェブサイトを壊す恐れがあります。カスタマイズの前に、かならずバックアップをすること。

  • 正しく動作しない場合は、「プラグインによる干渉」・「ワードプレステーマによる違い」・「全角・半角」・「,{}’”:;といった記号の過不足」を確認する
  • Cocoon設定「ウィジェットエリア非表示」の、除外ウィジェットエリアのオンオフも動作する
  • ウィジェット下部の「表示設定」ボタンも動作する
  • Cocoonデフォルトのウィジェット機能(Cocoon公式)も動作することを確認

ワードプレステーマ「Luxeritas」をお使いの方は、次のウェブサイトのコードを試してください。『Luxeritasで最後のH2手前にウィジェットエリアを作成してAdSenseを表示する(きもおたねっと。)』

確認済みの最新動作環境
  • WordPressバージョン:6.9.7
  • PHPバージョン:8.3.33
  • Cocoonバージョン:2.9.4.3
  • 編集テーマ名:Cocoon Childバージョン:1.0.6

お礼・参考にしたウェブサイト

私はワードプレス関数【PHP】や条件分岐などの知識のまったくない、ど素人です。一から「最後見出しH2の上に、ウィジェットエリアを追加する」ソースコードをつくることはできません。

以下のウェブサイトに紹介されたソースコードを参考に、あ~だこうだとこねくり回して何とか、作成しました。

  • Cocoonは、Simplicityの後継テーマ
  • 寝ログの運営者わいひら(yhira)は、SimplicityとCocoonのテーマ作成者

CocoonとSimplicityに完全な互換性はありませんが、上記の2つのSimplicityのfunctions.phpカスタマイズコードは大変参考になりました。

functions.phpにコードを1回コピペするだけで、「最後H2タグの上」にウィジェットエリアを追加する方法を紹介したが、正直どうして上手く動作しているのか理解できていない。

もし紹介したコードをコピペしても、うまく動作しない・不具合が生じたとしても、自己責任でお願いします。お問い合わせをいただいても、ど素人な私ではアドバイス・問題解決できないでしょう。

functions.phpをいじる前には、かならずバックアップをしてください。

補足情報:H2前にアドセンスを設置する方法

Cocoonには標準機能で「投稿・固定ページ」のH2見出し手前に、自動的にアドセンス広告を表示できます。投稿・固定ページの本文中広告数を制御する方法(Cocoon公式)

非常に便利な機能ですが、先頭のH2見出しから順に表示する仕様となっています。

最後のH2にアドセンスを設置するなら、ウィジェットエリアを新しく追加するのもいいかもね。

広告 - Sponsored Links

PHP8.x系・AMP廃止に対応した最新コード

2020年に、「最後のH2見出しの上にウィジェットエリアを追加するコード」をご紹介しました。

しかし記事公開から6年以上がたち、PhPは7から8へ、WordPress5.4から6.9へ、CocoonのAMP機能の廃止などの変化がありました。

以前のコードでもウィジェットエリアは追加されますが、より安全で軽量なコードへとアップデートを行いました。

アップデートが必要になった主な理由は、CocoonのAMP機能廃止です。

Googleの方針転換に伴い、Cocoonではバージョン2.6.1でAMP機能が非推奨化となり、バージョン2.7.0(2024年2月)で機能が完全に廃止されました。

そのため、旧コードに含まれていた `is_amp()` による分岐処理は、現在のCocoonやAMPプラグインを使っていないサイトにおいては不要な処理となっています。

また最新のPHP環境(PHP 8.x系)への対応やWordPressの段落整形処理との相性を考慮し、処理の安全性も向上させました。

以前のコードをご利用中の方も、これから設置する方も、こちらの最新版コードも参考にしてご活用ください。

/* ウィジェットエリア追加 */
if ( function_exists( 'register_sidebar' ) ) {
    register_sidebar( array(
        'name'          => '投稿本文最後H2見出しの上',
        'id'            => 'widget-in-article2',
        'description'   => '投稿本文記事に表示されるウィジェット。文中最後の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>'
    ) );
}

/////////////////////////////////////
// 投稿本文中の下にウィジェットを表示する
/////////////////////////////////////
if ( ! function_exists( 'add_widget_before_2nd_h2' ) ) :
function add_widget_before_2nd_h2( $the_content ) {
    // 投稿ページかつウィジェットが空でない場合のみ処理
    if ( is_single() && is_active_sidebar( 'widget-in-article2' ) ) {
        
        // H2見出しのパターン(改行を含んでも判定できるよう修正)
        $h2 = '/<h2.*?>.*?<\/h2>/is';
        
        if ( preg_match_all( $h2, $the_content, $h2s ) ) {
            // H2が2個以上ある場合、最後のH2の手前にウィジェットを挿入
            if ( isset( $h2s[0][1] ) ) {
                
                // ウィジェット出力の取得
                ob_start();
                echo '<div id="widget-in-article2" class="widgets">';
                dynamic_sidebar( 'widget-in-article2' );
                echo '</div>';
                $ad_template = ob_get_clean();

                // 最後のH2タグと置換(直前に差し込み)
                $last_h2_index = count( $h2s[0] ) - 1;
                $the_content = str_replace( $h2s[0][$last_h2_index], $ad_template . $h2s[0][$last_h2_index], $the_content );
            }
        }
    }
    return $the_content;
}
endif;
add_filter( 'the_content', 'add_widget_before_2nd_h2' );
現在の動作環境
  • WordPressバージョン:6.9.7
  • PHPバージョン:8.3.33
  • Cocoonバージョン:2.9.4.3
  • 編集テーマ名:Cocoon Childバージョン:1.0.6

このコードを子テーマのfunctions.phpに追記してください。

すでに旧コードを導入されている方は、以前のコードの該当箇所を今回の最新コードに置き換えると、より安全かつ軽量に動作させることができると思います。

変更点
  • `is_amp()` の削除
    Cocoonの現在の仕様に合わせてAMPの分岐処理を完全に除去し、コードをスッキリと整理しました
  • 正規表現(H2の検出)の安全化
    行頭・行末の判定(`^` や `$`)を見直し、WordPressの段落整形処理(`wpautop`)が入った後でも確実にH2タグを検知できるようパターンを最適化しました。
  • コードの軽量化
    ウィジェットに何もセットされていない場合は、H2の検索処理(`preg_match_all`)自体を行わずにそのままコンテンツを返すように変更し、サイトの表示速度への影響を最小限に抑えました
かっけい
かっけい

Cocoonで「最後のH2の上にだけアドセンスを表示したい。だからウィジェットエリアを追加したい」という方は、このコードを試してみてください。

タイトルとURLをコピーしました