WordPressの投稿に自動で目次を追加してくれるプラグインはいくつかありますが、私がおすすめするのは「Table of Contents Plus（TOC+）」です。今回は、TOC+を日本語環境で利用するときに必須なひと手間を紹介します。

TOC+とは？

「Table of Contents Plus（TOC+）」は、WordPressの投稿に目次を追加するためのプラグインです。本文のh1〜h6タグを拾って、アンカーを付与して、自動で目次を作ってくれます。

Table of Contents Plus | WordPressプラグイン

TOC+を選んだ理由

WordPressの目次プラグインはいくつかあります。TOC+の他には「Easy Table of Contents」や、日本製の「Rich Table of Contents」が人気です。

私の要望は、「目次のためにブロックを追加したくない」「手動でアンカーをつけたくない」「余計なcssやjsを読み込みたくない」の3点でした。

結局、ページ内リンクのスムーススクロールをGSAPで実装していた関係で、Easy Table of Contentsが正常に動かなかったので、TOC+を採用しました。

日本語環境でのアンカー名の問題

TOC+では、見出しのテキストをもとにアンカー名が付与されます。このとき、見出しテキスト内の全角文字が除外されて、半角英数が残ります。説明がややこしいのでいくつか例を。

1. 見出し「step1 元気な声であいさつしよう」→アンカー「step1」
2. 見出し「やることリストその1」→アンカー「1」
3. 見出し「スカイフィッシュの謎」→「i_1」

1のケースでは、見出しの半角英数の部分が抜き出されてアンカー名が「step1」になります。
2のケースでは、半角英数が数字の1のみですから、アンカー名は「1」となります。
3のケースでは、半角英数が存在しないので、接頭辞が付与されて「i_1」となります。

問題になるのは2のケースで、そもそもidが数字からはじまるのはアウトです。

フィルターフックを使って解決

// アンカー名をちょっと変更
function my_custom_anchor( $anchor )
{
  return 'anchor_'.$anchor;
}
add_filter( 'toc_url_anchor_target', 'my_custom_anchor' );

functions.phpに上記を記載すると、アンカー名の先頭に必ず「anchor_」が付くようになります。これで、おかしなアンカー名でエラーになることはありません。既存のID名との意図しない重複も防げます。

やってみた感想

そもそも、TOC+には接頭辞の設定があるのだから、すべてのアンカーに接頭辞を足してくれればこんなことしなくても済んだのになー、と思いました。