WordPressのGeneratePressを利用しています。 h2の前にウィジェットエリアを作って、それにSimpleTOCを追加したいと思っています。 そうすると、記事のページに目次が追加できますよね。 もし、コンテンツ内にh2がなければ、ウィジェットは表示しません。
GeneratePressでウィジェットエリアを追加する方法
GeneratePressでは、カスタムウィジェットエリアを作成するためにいくつかの方法があります。以下の手順で進めましょう：
- まず、子テーマを使用していることを確認してください。子テーマがない場合は作成しましょう。
- 子テーマのfunctions.phpファイルに以下のコードを追加します：
// h2タグの前にウィジェットエリアを追加
function create_before_h2_widget_area() {
register_sidebar(
array(
'name' => 'コンテンツ内目次',
'id' => 'before-first-h2',
'description' => '最初のh2タグの前に表示されるウィジェットエリア',
'before_widget' => '<div id="%1$s" class="widget %2$s">',
'after_widget' => '</div>',
'before_title' => '<h4 class="widget-title">',
'after_title' => '</h4>',
)
);
}
add_action('widgets_init', 'create_before_h2_widget_area');
Code language: PHP (php)h2タグの前にウィジェットを表示する
次に、このウィジェットエリアをh2タグの前に表示させるコードを追加します。以下のコードを子テーマのfunctions.phpに追加してください：
// コンテンツ内のh2タグの前にウィジェットエリアを挿入
function insert_widget_before_first_h2($content) {
// 投稿や固定ページの本文内でのみ実行
if (!is_singular()) {
return $content;
}
// h2タグがあるか確認
if (strpos($content, '<h2') === false) {
return $content; // h2タグがなければ何もしない
}
// ウィジェットエリアの内容を取得
ob_start();
dynamic_sidebar('before-first-h2');
$widget_content = ob_get_clean();
// ウィジェットが空なら何もしない
if (empty($widget_content)) {
return $content;
}
// 最初のh2タグの位置を見つける
$h2_pos = strpos($content, '<h2');
// h2タグの前にウィジェットを挿入
if ($h2_pos !== false) {
$content = substr_replace($content, $widget_content, $h2_pos, 0);
}
return $content;
}
add_filter('the_content', 'insert_widget_before_first_h2');
Code language: PHP (php)今回は、is_date()でも許可するために、条件を変更しました。
if (!is_singular() && !is_date()) {
return $content;
}Code language: PHP (php)否定の条件の組み合わせは、ちょっとややこしいですね。
SimpleTOCを設定する
これで「コンテンツ内目次」という名前のウィジェットエリアが作成されました。次に以下の手順でSimpleTOCを設定します：
- WordPressの管理画面で「外観」→「ウィジェット」に移動します
- 「コンテンツ内目次」エリアを見つけます
- そこにSimpleTOCウィジェットをドラッグ＆ドロップします
- ウィジェットの設定で必要に応じて調整します（タイトルや見出しレベルなど）
- 「保存」をクリックします
確認と調整
コードを追加した後、記事ページを確認してください。h2タグがある記事では、最初のh2タグの前に目次が表示されるはずです。h2タグがない記事では表示されません。
もし表示位置をさらに調整したい場合は、CSSを追加して見た目を整えることもできます。GeneratePressの「外観」→「カスタマイズ」→「追加CSS」で以下のようなCSSを追加できます：
/* 目次ウィジェットのスタイル調整 */
#before-first-h2 {
margin-bottom: 30px;
padding: 15px;
background: #f9f9f9;
border: 1px solid #eee;
border-radius: 5px;
}
Code language: CSS (css)この方法で、h2タグの前に目次を自動的に表示し、h2タグがない記事では表示しないようにできます。問題があれば、コードを少し調整する必要があるかもしれません。