テーマ「Ace」 – カスタムウィジェット「Table of Contents」

「TOC」と略される、所謂「目次」ウィジェットです。

記事内の見出しを纏めて目次を生成し、クリックすることでその見出しにジャンプすることができるようになっております。

このページにも生成されていると思います。

  • Table of Contents

JavaScriptで生成

サーバー側でHTMLを生成してしまってもいいとは思いますが、ウィジェットエリアでコンテンツをパースして読み取らせるのもどうかと思いましたので、JavaScriptで生成する形を採用しています。

当然ブラウザなどのJavaScriptが有効でないユーザーには表示されませんのでご留意ください。

設定項目は2点

ウィジェット「TOC」の設定

設定項目はこれだけです。

タイトルを入力するだけですので、配置したい位置に放り込むだけです。

必要でしたら、条件を設けるのもいいと思います。

また、単一ページ以外、あるいは見出しの無いページでは何も表示されません。

実はプラグインの「Table of Contents Plus」もサポート

TOCをプラグインにより出力される場合もあると思いましたので、「Table of Contents Plus」のみですが、スタイルをサポートしております。

また、テーマ「Ace」ではブログページのブロックエディタによる編集をサポートしておりますので、ブログページで「TOC+」が自動出力されないようにするなどのプラグイン個別の対応もしております。

ブロックエディタで編集するにしても、ブログページの投稿リストの各タイトルは見出しとして出力されますので、それらを使用されて目次が生成されるのを回避するためです。

こちらのプラグインを使用する際はCSSを出力しないようにしていただいて大丈夫です。