2021年11月現在、このウェブサイトはワードプレステーマ「Cocoon」を利用しています。
Cocoonは多機能なテーマで、ウィジェットエリアは約30も用意され、自分の目的に合わせてウィジェットを表示できます。役立つサイト⇒『[Cocoon] ウィジェットエリア デモページ Ikumi’s lifelog』
豊富にあるウィジェットエリアですが、記事本文中には「投稿本文中」と「固定ページ本文中」しかありません。これは「最初のH2見出しの上」に当たります。おそらく多くのウェブサイトでは、目次がある位置だと思われます。
しかし例えば、「最後見出しH2の上」にアドセンスを設置したいといった考えもあるでしょう。最後見出しH2の上にウィジェットエリアを追加する方法を、インターネット検索してもヒットしなかったので、備忘録として紹介します。
以下のコードを、Cocoon子テーマのfunctions.phpに貼り付けるだけです。
/* ウィジェットエリア追加 */
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');
カスタマイズの手順
- ワードプレス管理画面から、「外観」⇒「テーマエディター」を選択
- 編集するテーマから、「Cocoon Child」を選択
- テーマのための関数「(functions.php)」を選択
- functions.phpにコードを貼り付ける
- ファイルを更新ボタンを選択
以上で「外観」⇒「ウィジェット」に、投稿本文最後H2見出しの上のウィジェットエリアが追加される。
現在の動作環境
- WordPressバージョン:5.8.2
- PHPバージョン:7.4.25
- Cocoonバージョン:2.3.7.1
- 編集テーマ名:Cocoon Childバージョン:1.0.6
広告 - Sponsored Links
お礼・参考にしたウェブサイト
私はワードプレス関数【PHP】や条件分岐などの知識のまったくない、ど素人です。一から「最後見出しH2の上に、ウィジェットエリアを追加する」ソースコードをつくることはできません。
以下のウェブサイトに紹介されたソースコードを参考に、あ~だこうだとこねくり回して何とか、作成しました。
CocoonとSimplicityに完全な互換性はありませんが、上記の2つのSimplicityのfunctions.phpカスタマイズコードは大変参考になりました。
functions.phpにコードを1回コピペするだけで、「最後H2タグの上」にウィジェットエリアを追加する方法を紹介したが、正直どうして上手く動作しているのか理解できていない。
もし紹介したコードをコピペしても、うまく動作しない・不具合が生じたとしても、自己責任でお願いします。お問い合わせをいただいても、ど素人な私ではアドバイス・問題解決できないでしょう。
functions.phpをいじる前には、かならずバックアップをしてください。