記事やページに目次をつけるプラグイン【Table of Contents Plus】
投稿記事や固定ページに目次をつけることが出来るプラグイン「Table of Contents Plus」をご紹介します。
自動で目次の挿入が可能で、設定によって「投稿記事のみ」「固定ページのみ」など表示場所の選択も可能になっています。
目次をつけることでユーザビリティが向上するのでぜひ、導入を検討してみてください。
実際にこのサイトでも使用しており、この文章下に目次が表示されているはずです。
そもそも見出しとは?
<h2>そもそも見出しとは?</h2>
このような<h○○>~</h○○>に囲まれたものを指しています。
Table of Contents Plusを使う上では見出しが使われていることが前提となります。
Table of Contents Plusの導入方法
通常のプラグインと同じように
管理画面の左サイドバー「プラグイン」 > 新規追加 > Table of Contents Plusで検索
Table of Contents Plusをインストールして有効化しましょう
Table of Contents Plusの使い方
インストールが完了したら、表示に関する設定をしていきいましょう。
管理画面の左サイドバー「設定」 > TOC+ から設定します。
これが設定画面になります。重要な部分の設定を解説していきます。
Position
目次を表示する位置を変更可能です。
このサイトではデフォルト設定になっており、最初の見出しの上に表示されます。
Show when
ここで設定した数以上の見出しが出ると目次が作られます。
このサイトでは「3個以上の見出しが出ると目次が作られる」設定をしています。
Auto insert for the following content types
投稿記事・固定ページなど目次が自動生成される場所を選択できます。
このサイトでは「post」のみチェックを入れています。
Heading text
僕はこんな感じで設定をしています。
Show title on top of the table of contents
ここにチェックを入れると「目次」と書いている部分が表示されます。
Allow the user to toggle the visibility of the table of contents
ここにチェックを入れるとユーザーが目次の表示・非表示を選択できます。
Hide the table of contents initially
ここにチェックを入れると目次が最初から閉じている状態になります。
Show hierarchy
見出しの階層を表示するのか、しないのかの設定になります。
このサイトの場合はチェックを入れて階層も表示しています。
Number list items
目次のリストに番号を付ける設定です。
このサイトの場合はチェックを外して番号を非表示にしています。
Scroll rather than jump to the anchor link
移動時のスクロール効果の有無を設定できます。
チェックを外すとスクロール移動せずに、ジャンプ移動します。
Appearance
目次の表示に関して設定ができます。
Width
目次の横幅を%で設定できます。
このサイトでは75%に設定をしています。
Wrapping
light・leftの設定を選ぶと目次の前後の文章が目次と並んで表示されます。
見た目が変になるのでデフォルトをオススメします。
Font size
文字のサイズ設定です。%以外にもpxなどで設定可能。
このサイトでは95%で設定をしています。
Presentation
目次部分のビジュアルです。
このサイトではデフォルトで設定をしています。
Customで自分のサイトデザインにあったものに変更も可能です。
基本的な設定はこれで終了です。
一度、見出しを設定した投稿記事や固定ページで表示を確認しましょう。
見出しレベルの設定
Advancedのshowをクリックすると新たな項目が出現します。
Heading levelsの部分を設定することで目次に出したい見出しを選択できます。
このサイトでは「heading 2 – h2」「heading 3 – h3」を選択しています。
ウィジェットで利用する
管理画面の左サイドバー「外観」 > ウィジェット の一覧にTOC+が追加されています。
表示をさせたい場所に「TOC+」を追加してください。
ウィジェットで利用する場合は、追従するかたちにした方が便利だと思います。
「Strx Magic Floating Sidebar Maker」など追従するプラグインを導入しましょう。
日本語化ファイル
ここまで要点のみを掻い摘んで説明してきました。
英語でわかりにくい場合はプラグインを日本語化をしてしまいましょう。
上記のサイト様で日本語化の方法が解説されています。
まとめ
Table of Contents Plusの解説いかがだったでしょうか?
サイトの作成を頼まれる際は必ずこのプラグインをオススメしています。
目次があると記事が読みやすくなるので簡単にユーザビリティが向上します!
導入していない方はぜひ、サイトに導入してみてはいかがでしょうか。