【TOC+】目次作成プラグイン「Table of Contents Plus」の使い方。設定方法とショートコードまとめ!

Table of Contents Plusの使い方10

記事内に自動的に目次を作成&追加してくれるWordpressプラグイン「Table of Contents Plus通称:TOC+」の使い方をまとめました。

プラグインのインストールからおすすめの設定方法、さらにこのプラグインに付属しているサイトマップの作り方と使い方もご紹介。

目次やサイトマップで記事を読みやすく整理してユーザビリティーを向上させましょう!

Table of Contents Plusで使えそうなショートコードも紹介!

既に導入済みの方は”目次”から内容を選んで見てね←早速w

Table of Contents Plus_プラグインの使い方

WordPressで作ったサイトはh1~h6などの見出しタグを利用して目次を作成することが可能です。

テーマによってはテーマ側に目次機能が付いているテーマもありますが、目次機能が付いていないテーマでもプラグインを使って簡単に目次機能を導入することが可能です。

「Table of Contents Plus」を使えば有効化するだけでページ内で使われている見出しタグを解析し、自動的にページ内に目次を表示してくれます。
さらに「TOC+」というウェジェットも追加され、こちらをテーマのウェジェットに組み込むことで、サイドバーなど任意の場所に目次を表示させることも可能です。

また専用のショートコードを使って簡単に機能を制御したり、HTMLサイトマップを作ってくれる機能もあるのでそちらも確認します。

プラグインのインストール

まずインストールして有効化します。
Table-of-Contents-Plusの使い方1サイドバーメニューの
プラグイン > 新規追加 > 検索窓に「Table of Contents Plus」
と入力してインストールし、有効化します。

設定画面

有効化するだけでh系の見出しタグが入っている固定ページのみに自動的に目次機能が付きますが、サイトに合った設定に変更していきましょう。

設定画面は
サイドバーの設定 > TOC+
または
プラグイン > インストール済みプラグイン > Table of Contents Pluの設定
で開けます。

Table of Contents Plus_基本設定

では設定画面を開いて順番に設定していきましょう。
どの項目もすぐに変更できるので、実際にテストしながら試してみるのもいいですね。

Table-of-Contents-Plusの使い方4

Table of Contents Plus(設定前)

デフォルト設定だと見出しが必要以上に表示されたり、固定ページにしか目次が表示されなかったりするので設定します。

Table-of-Contents-Plusの使い方5

Table of Contents Plus(設定後)

設定後の画面です。
コチラを参考に進めていただくと早いです。

位置

デフォルトの「最初の見出しの前」でOKです。始めてH系タグが登場する上部に表示されます。
目次の表示位置を変更したい場合はショートコードで表示位置を変更できるのでそちらの方が汎用性があります。

[toc]

目次を表示したい位置に↑のショートコードを書き込むとその場所に目次が表示されます。(設定の表示位置よりこちらが優先される。)

表示条件

H系タグが記事内にいくつ以上存在すると目次を表示するかの設定。
4→3に変更。
※記事内のH系タグの数が設定した数以下の場合、目次は非表示になる。
(ショートコードも無効)

以下のコンテンツタイプを自動挿入

目次を表示したいページタイプを選びます。
page→postに変更。
pageは固定ページ、postは投稿(記事)ページです。

見出しテキスト

目次機能に関するテキストを設定します。
目次上のタイトルを
Contents→この記事の目次に変更。
表示・非表示のテキストをそれぞれ
show→表示
hide→非表示に変更。

うちのようなハウツーサイトは目次の項目が多く、邪魔になりがちなので、
最初は目次を非表示にチェック
表示を押すと目次が開くように変更しました。

階層表示

目次の項目をH系タグの階層通りに表示するかどうかの設定。
コチラは画像を見てもらった方が早いです。

注意点としてサイドバーに目次を設置した場合、階層表示になりません。

番号振り

目次の項目に1、2、3、という風に番号を振るかどうかの設定。
コチラも画像をご参考下さい。

目次の各項目の頭に番号が振られます。

階層表示と番号振りの参考

「階層表示」と「番号振り」の両方にチェックを入れた場合。
サイトにもよると思いますが両方にチェックを入れると目次が見にくくなることがあります。

昔はSEO的に推奨されていなかった使い方ですが、試しにh3タグやh4タグが登場した後にh2やh1タグを設定した場合でもうまく階層表示されました。

当サイトではサイドバーの表示が気に入らなかったので、番号振りのみにチェックを入れています。

スムーズ・スクロール効果を有効化

「アンカーリンクにジャンプではなくスクロールする」とありますが、要は目次の項目をクリックした時にその目次まで画面をどのように遷移させるかの設定です。

・チェックする→スクロールで遷移
・チェックしない→ジャンプで遷移

一般的にクリック時にジャンプするよりは、スクロールした方が”記事内を移動したんだな”と分かりやすく良いとされていますが、好みです。

【R3.3.16追記】スクロールをONにしている場合、画像の遅延読み込みをサイトに実装しているとスクロール移動中に画像が読み込まれたり、読み込まれなかったりで目次にピッタリと移動することができませんでした。
(特に通信速度の不安定なスマホ閲覧時)

遅延読み込みで画像が表示されたり、されなかったりで高さの計算が狂うようです。

目次の項目が多かったり、挿入している画像が多い場合はチェックせず、ジャンプで移動するように設定しておいた方が良いかもしれません。

ジャンプで完全に解決するわけではありませんが、スクロールよりも随分マシです。

Table of Contents Plus基本設定>外観

続いて、基本設定の下の方にある外観の設定ですが、デフォルトが見やすいので特に変更する必要はないでしょう。
Table-of-Contents-Plusの使い方12ワンクリックで変更できるデザインパターンも用意されているので、サイトに合った外観に設定するのもいいですね!

続いて上級者向けに進みます。(hide)をクリックすると現れます。

Table of Contents Plus_上級者向け設定

上級者向けと書かれていますが「見出しレベル」だけ設定しておきましょう。

Table-of-Contents-Plusの使い方13

上級者向け設定(設定前)

Table-of-Contents-Plusの使い方14

上級者向け設定(設定後)

一応全項目載せていますが、「見出しレベル」と必要に応じて「除外する見出し」を設定するだけでOKです。

小文字-ハイフン

アンカーに小文字を使用したり、ハイフンを使用したりする設定。
Table of Contents Plusの使い方15ここでのアンカーとは目次で使用されている項目のaタグ内のリンク文字のことを指しているものと思われます。
こちらの#以下の設定を変えられるみたい。

ホームページを含める

ここでのホームページとはサイトのトップページらしいです。

CSSファイルを除外

別のCSSを指定して目次関連の外観を大きく変更する場合はコチラをチェックしましょう。

テーマの見出し記号を保持

テーマでリスト要素に背景などを設定している場合に目次のリストにも適用されるようです。

見出しレベル

H系の見出しタグをどのタグまで目次に表示するかどうかの設定です。
ココだけ設定しときましょう!
H2とH3のみのチェック、多くてもH4までのチェックで十分でしょう。

Table of Contents Plusの使い方16

見出しが多いと見にくくなってしまう。

H1タグはタイトルになっていることが多いと思いますし、H5以下の見出しまで目次に追加してしまうと項目が増えすぎて見にくくなります。

除外する見出し

必要に応じてコチラも設定しましょう。
欄に入力した文字に一致する目次が非表示になります。
当サイトではh4タグがまとめとなっているのですが、目次に最終まとめは必要ありませんので「まとめ」と入力し、見出しを除外します。

パス限定

特定のページのみで目次を表示したい場合に使う。
が、目次プラグインを導入するということは基本的に目次が必要で、特定のページに目次を表示したくないときの方が多いと思う...

そこで目次を表示したくない記事にはショートコードを使いましょう。

[no_toc]

上記のショートコードを記事内に書き込むと、目次が非表示になります。
記事内であればどこに追加してもOK!

アンカーのデフォルト接頭辞

先ほどの小文字-ハイフンの時の画像にもありますが、アンカーリンクの#以下の文字に付与される接頭辞と呼ばれるものです。
目録に使用する英数字であるためデフォルトではindexのi?となっています。

以上で基本的な設定は終わりです。適宜試してみてサイトに合ったものにしましょう!

目次をサイドバーに設置する方法

Table of Contents Plusをインストールして有効化するとウィジェットにTOC+というものが追加されています。
コチラを埋め込みたいウィジェットにドラッグ&ドロップすることにより、サイドバーなどに設置することが出来ます。
Table-of-Contents-Plusの使い方17テーマによっては画面をスクロールしたときに追尾してくるサイドバーウィジェットもあるのでそちらに設置するのもアリですね。

ただサイドバーにそのまま設置すると少し見にくいのでcssをカスタムしてもいいかもしれません。

目次アンカーの便利な使い方

Table of Contents Plusによって作成されたアンカーリンクを使用することにより、別のページにある目次(見出し)にリンクを飛ばすことが可能です。
Table of Contents Plusの使い方18目次をクリックするとお尻に#が付いたURLが表示されるので、このURLをリンクとして埋め込むことにより、例のURLですとWP-Optimizeについて書いた記事のWP-Optimize-設定という項目に飛びます。

「記事のURL/#作成されたアンカー」
を使えば別ページの目次にも移動(リンク)が可能。

サイトマップの設定と作成方法

Table of Contents Plusには簡単にサイトマップを作成する機能も付いていますので、そちらもご紹介。
Table-of-Contents-Plusサイトマップの使い方1まず設定から、といっても見出しレベルをh3→h2に変更するくらいです。

固定ページリストを表示

サイトマップに固定ページを表示するかどうかの設定。

カテゴリリストを表示

サイトマップにカテゴリページの一覧を表示するかどうかの設定。

見出し

サイトに使っているH系見出しタグを見出しに使う。
タイトルなどにも使用しているであろうh1かh2タグにしておくと綺麗です。

固定ページのラベル

固定ページ一覧の見出しのテキスト。

カテゴリページのラベル

カテゴリページ一覧の見出しのテキスト。

上級者向け

ショートコードの引数などの使い方なので省略。

サイトマップの作り方

作り方はとても簡単。
固定ページを作り、記事内にTable of Contents Plusのショートコードを埋め込むだけで完成します。
Table of Contents Plusサイトマップの使い方2サイトマップ用の固定ページを作成する。

Table-of-Contents-Plusサイトマップの使い方3記事内に以下のショートコードを書き込む。

[sitemap]

Table-of-Contents-Plusサイトマップの使い方4プレビューで確認するとこのようなページが表示されました。
固定ページとカテゴリーページの一覧だけなので質素...そこで投稿記事を投稿日順に新着表示してみます。
先ほどのページに下記を追加。

[sitemap_posts orderby="date" order="DESC"]

Table-of-Contents-Plusサイトマップの使い方5う~ん記事タイトルの頭文字はないほうが良いのですが、プラグインの仕様のようです。文字化けもしてますね...

サイトマップは別のプラグインで作成するか、自分で作り込んだ方が良さそうです。
ただ下書きとして保持しておくと自分用にはなるかもしれません。

Table of Contents Plus_ショートコード

最後にTable of Contents Plusを使う際に知っておきたいショートコードをまとめておきました。
(よく使うコードのみです。全部ではありません。)

■目次を任意の箇所に表示する。

[toc]

■ページ内に目次を表示しない。

[no_toc]

■目次に表示する見出しを制御する。(例ではH2とH3のみ表示。)

[toc heading_levels="2,3"]

■目次のタイトルを変更する

[toc label="表示したいタイトル"]

■サイトマップを表示する

[sitemap]

■サイトマップに投稿も表示する。(アルファベット順)

[sitemap_posts]

■サイトマップに表示した投稿を新着順に並び替え

[sitemap_posts orderby="date" order="DESC"]

・orderの引数(ダブルクオテーションの中)は"ASC"と"DESC"で昇順と降順にカスタム可能。
・orderbyの引数も変えることでカスタム可能。
"ID"で投稿ID順、"title"でタイトル順などなど...

指定できる値を詳しく見たい方はWordpress Codexをご参照下さい。
【外部リンク】
関数リファレンス_WP_Query_順序づけパラメータ

まとめ

Table of Contents Plus(TOC+)の使い方でした。
インストールから気になるところまで書いちゃったので大作となりました...
自分で記事一つ一つに目次を付けるのは骨が折れるのでこういうプラグインはとても助かります。

また、基本的に記事本文にコードなどを追加する必要が無いのでプラグインを削除した時に修正の手間が省ける点もGOOD!

-Wordpress
-

© 2021 ソロ学