目次ブロックは、そのページの見出し（H2 から指定したレベルまで）を集めて、自動で目次を作ります。見出しへのアンカー ID も自動で付くので、見出しブロック側で何かを設定する必要はありません。投稿本文に置いても、サイトエディターで投稿テンプレートに置いても、その投稿の見出しから同じ目次が生成されます。
実際の表示
このマニュアルは shitate pro blocks が動いているサイト上にあるので、以下は画像ではなく本物のブロックです。実際にクリックしたり開閉したりして動きを確かめてください。
↑ この目次は、この記事の見出しから自動生成された本物の目次ブロックです（開閉式・初期状態で開く）。
基本的な使い方
- 「shitate unique blocks」から目次を追加します。置く位置は本文の先頭でも、サイトエディターの投稿テンプレート（サイドバーなど）でも構いません。
- エディターには、編集中の見出しからその場で目次のプレビューが表示されます（見出しがまだ無いときはその旨の案内が出ます）。
- 必要に応じてタイトルを書き換え、サイドバーで見出しレベル・番号の有無・開閉式を設定します。
フロントでは、見出しが 1 つも無いページでは目次ブロックごと出力されません（空の枠が残ることはありません）。
エディターでの設定画面
設定項目
- タイトル（ブロック上で直接編集） — 空欄のときは「目次」と表示されます（サイトの言語に合わせて翻訳されます。1.7.2 以前は「Index」）。テキストツールバーの装飾が使えます。
- 見出しレベル — H2 からどのレベルまで拾うか（H2〜H4、初期値は H3 まで）。
- 番号付きリスト — オン（初期値）で 1 / 1-1 / 1-2 のような階層番号、オフでブランド色の点になります。
- 開閉式にする — オンにすると details ブロックと同じ仕組みで開閉するアコーディオンになります（アイコンはプラス⇄マイナス）。
- 初期状態で開く（開閉式のときのみ） — オフにすると閉じた状態で表示され、クリックで開きます。
アンカーの仕組み
- 本文中の見出しブロックには、投稿 ID と見出しテキストから決まる ID（
sb-toc-xxxxxxxx）が自動で付きます。何度保存しても同じ ID になるので、外部からリンクしても壊れません。 - 見出しブロックの「HTML アンカー」に手動で ID を入れてある場合は、そちらを優先してリンクします。
- 同じテキストの見出しが複数あると ID も同じになり、最初の見出しへ移動します。区別したい場合はどちらかに手動アンカーを付けてください。
- if ブロックの中の見出しは、表示される分岐のものだけが目次に入ります。
フィルター
サイト全体の既定タイトルは sb_toc_default_title で変えられます。エディターのプレースホルダーにも同じ値が反映されます。
add_filter( 'sb_toc_default_title', fn() => 'この記事の内容' );スムーススクロールは初期状態ではオフです。フィルターで有効にすると html { scroll-behavior: smooth } を出力するため、目次だけでなくページ内のアンカーリンクすべてが滑らかにスクロールします（「視差効果を減らす」設定のユーザーには適用されません）。固定ヘッダーがある場合は、その高さぶんの余白も指定できます。
add_filter( 'sb_toc_smooth_scroll', '__return_true' );
add_filter( 'sb_toc_scroll_padding', fn() => '5rem' ); // 固定ヘッダーの高さ（px / rem / em / vh / % が使えます）CSS でカスタマイズする
あえてシンプルなデザインにしてあるので、CSS で調整しやすい構造です。本体は .sb-toc、部品は -title -list -body、番号付きのときは状態クラス is-numbered が付きます。開閉式のときは共有部品 .sb-toggle が付き、アイコンは details と同じ変数で差し替えられます。
/* 枠の角丸（カード類と共通） */
:root { --sb-radius: 0.5rem; }
/* 開閉アイコンをシェブロンに（内蔵アイコン: plus / minus / chevron-* / arrow-* / triangle-up / triangle-down） */
.sb-toc {
--sb-icon-close: var(--sb-icon-chevron-down);
--sb-icon-open: var(--sb-icon-chevron-up);
}注意点
- 拾うのは WordPress 標準の「見出し」ブロックだけです。他のブロックが出力する見出しタグや、テンプレート側の見出しは対象になりません。
- エディターのプレビューは近似です。if ブロックの全分岐の見出しが表示されるなど、フロントと少し違うことがあります。
- 開閉式は details ブロックのスクリプトを共用しています。