記事やページに目次をつけるプラグイン【Table of Contents Plus】

投稿記事や固定ページに目次をつけることが出来るプラグイン「Table of Contents Plus」をご紹介します。

自動で目次の挿入が可能で、設定によって「投稿記事のみ」「固定ページのみ」など表示場所の選択も可能になっています。

目次をつけることでユーザビリティが向上するのでぜひ、導入を検討してみてください。
実際にこのサイトでも使用しており、この文章下に目次が表示されているはずです。

スポンサーリンク

そもそも見出しとは?

<h2>そもそも見出しとは?</h2>

このような<h○○>~</h○○>に囲まれたものを指しています。
Table of Contents Plusを使う上では見出しが使われていることが前提となります。

見出しについてよくわからない方は下記を御覧ください。

見出しタグとはhtmlでは「h1」~「h6」で表現され、通常は文章構造をわかり易くするための見出しとして使用します。例えばブログの記事を書いるときに文章が長くなって読みにくいと感じたときは、見出しタグを使って適切に文章を分けてあげると読みやすくなります。

見出しについてわかりやすく解説がされています。

Table of Contents Plusの導入方法

https://wordpress.org/plugins/table-of-contents-plus/

通常のプラグインと同じように

管理画面の左サイドバー「プラグイン」 > 新規追加 > Table of Contents Plusで検索
Table of Contents Plusをインストールして有効化しましょう

Table of Contents Plusの使い方

インストールが完了したら、表示に関する設定をしていきいましょう。
管理画面の左サイドバー「設定」 > TOC+ から設定します。

table-of-contents-plus2

これが設定画面になります。重要な部分の設定を解説していきます。

Position

目次を表示する位置を変更可能です。
このサイトではデフォルト設定になっており、最初の見出しの上に表示されます。

Show when

ここで設定した数以上の見出しが出ると目次が作られます。
このサイトでは「3個以上の見出しが出ると目次が作られる」設定をしています。

Auto insert for the following content types

投稿記事・固定ページなど目次が自動生成される場所を選択できます。
このサイトでは「post」のみチェックを入れています。

Heading text

table-of-contents-plus3

僕はこんな感じで設定をしています。

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+」を追加してください。

table-of-contents-plus4

ウィジェットで利用する場合は、追従するかたちにした方が便利だと思います。
Strx Magic Floating Sidebar Maker」など追従するプラグインを導入しましょう。

Strx Magic Floating Sidebar Makerは、サイドバーを画面の移動に合わせてスクロール移動(追尾)させることができるプラグインです。 サイドバーの全部又は一部分をスクロール移動(追尾)させること・・・

日本語化ファイル

素晴らしいプラグインがあったので日本語化を鋭意製作中。     WordPress › Table of Contents Plus « WordPress Plugins htt…

ここまで要点のみを掻い摘んで説明してきました。
英語でわかりにくい場合はプラグインを日本語化をしてしまいましょう。

上記のサイト様で日本語化の方法が解説されています。

まとめ

Table of Contents Plusの解説いかがだったでしょうか?

サイトの作成を頼まれる際は必ずこのプラグインをオススメしています。
目次があると記事が読みやすくなるので簡単にユーザビリティが向上します!

導入していない方はぜひ、サイトに導入してみてはいかがでしょうか。

この記事をお届けした
O3 WEBの最新ニュース情報を、
いいねしてチェックしよう!
スポンサーリンク