WordPressでプラグインTable of Contents Plusを使って目次を作る方法について解説します！
WordPressで作られたサイトには良く目次がついています。
h2やh3タグ等の見出しを並べたこんな目次ですね。
目次があると次のような効果を期待できます。
- なんとなくそれっぽい感じが出る。
- 目次がリンクになっているので見たい場所へ飛べる。
- 記事の内容がなんとなくわかってもらえる。
こうしてみると重要ですよね。
目次も意識して記事を作らないといけないって事が感じられますね！
- WordPressでプラグインTable of Contents Plusを使って目次を作る方法がわかる！
- Table of Contents Plusのオプション設定がわかる！
以下、Table of Contents Plusを略記のTOC+で表現します。
基本的なプラグインなので、後者の使い方がこの記事のポイントになると思います。
TOC+
h1～h6のタグ（見出し）から目次を作るプラグインです！
TOC+はh1～h6タグの見出しで目次を作るプラグインです。。
なお、この対象のタグについてはh2とh3のみにするという指定もできます。
これは設定とオプションの説明の中で解説します。
という事でインストール、設定、使うところまで画像を使って解説していきます！
インストール
まずはWordPress管理画面にログインします。
プラグインの「新規追加」をクリックします。
キーワードに「Table of Contents Plus」を入力します。
全部入れなくても途中で出てくるとは思いますが、一応コピペしやすいように全部書きました。
Table of Contents Plusが表示されるので「今すぐインストール」をクリックします。
※なぜか下の方に出てきますね。
インストールが完了するとボタンが変わります。
「有効化」をクリックします。
プラグイン画面に変わります。
有効化されたことを確認します。
インストール完了です！
プラグインのインストールはどれも一緒ですから特に問題ないですね！
- インストールはTable of Contents Plusで検索すると少し下の方に出てくるかもしれません！
設定
続いて設定です。
設定の「TOC+」をクリックします。
位置～番号
まずは基本設定です。
位置
目次を表示する位置です。
「最初の見出しの前」がデフォルトになっています。
この設定では最初に使った見出しの位置に目次が表示されます。
他には、「最初の見出しの後」、「上」、「下」を選ぶことができます。
なお、この「最初」というのは、後で設定する「h2」や「h3」でTOC+で対象とする見出しの中で最初です。
「h2⇒文章⇒h3⇒文章⇒h4⇒文章」の順で、h3とh4を見出しに設定し「最初の見出しの前」にすると、h3が最初の見出しになります。
「h2⇒文章⇒見出し⇒h3⇒文章⇒h4⇒文章」となります。
「上」や「下」は見出しに関係なく、「本文の上」、「本文の下」に表示されます。
「h2⇒文章⇒h3⇒文章⇒h4⇒文章」の順で、h3とh4を見出しに設定し「下」にすると、h3が最初の見出しになります。
見出しに関係なく目次は本文の下に来るので、「h2⇒文章⇒h3⇒文章⇒h4⇒文章⇒見出し」となります。
表示条件
目次を表示する条件を、見出しの個数で選択できます。
見出しが1つしかないのに目次があるって、ちょっと変ですからね。
デフォルトで「3」つ以上見出しがあるときになっています。
「h2⇒文章⇒h3⇒文章⇒h4⇒文章⇒h2⇒文章」の順で、h3とh4を見出しに設定するとh3とh4の2つが見出しになります。
「3」つ以上見出しにすると、見出し数の条件に合わず、目次は表示されません。
見出しに関係なく目次は本文の下に来るので、「h2⇒文章⇒h3⇒文章⇒h4⇒文章⇒見出し」となります。
以下のコンテンツタイプを自動挿入
目次をどのコンテンツタイプに挿入するかを選択できます。
コンテンツタイプは、「投稿」や「固定ページ」、そのほか追加したカスタム投稿タイプ等を選択できます。
ここでチェックを付けたものは、先の表示条件を満たしたときに目次が表示されます。
デフォルトではPageのみチェックされており、固定ページでのみ目次を使う設定になっています。
固定ページにも表示したい場合はそのままにします。
投稿で作成した記事に目次を追加したい場合は「post」にチェックをつけます。
見出しテキスト
目次のタイトルみたいなものです。
目次の上にタイトルを表示にチェックを付けると、次のように「目次」と表示されます。
この「目次」というタイトル名を変更する場合はテキストボックスの「目次」を変更します。
「ユーザーによる目次の表示・非表示を切り替えを許可」にチェックを入れると目次の表示／非表示が変更できるようになります。
その切り替えるテキストが「テキストを表示」のテキストボックスの「show」と「テキストを非表示」のテキストボックスの「hide」です。
「最初は目次を非表示」にチェックを入れると、ページを開いたときに目次は非表示状態になります。
こちらが非表示状態です。
階層表示
見出しが段になります。
デフォルトではチェックが入っています。
こんな感じで段になっています。
チェックを外したものです。
番号ふり
見出しに番号が付きます。
デフォルトではチェックが入っています。
先の階層表示をご確認頂くとわかると思いますが、階層表示に番号は関係しています。
階層表示にチェックがついている場合、この番号も階層で番号が割り振られます。
スムーズ・スクロール効果を有効化～プレゼンテーション
この画面の上級者向けの表示をクリックすると上級者向けの設定を変更できます。
ちなみに、別に上級者でなくても変更しても良いと思える設定はあります。
スムーズ・スクロール効果を有効化
デフォルトでチェックは外れています。
見出しがページ内のリンクになっているのですが、そのリンク時のアクションが変わります。
チェックを入れると、「ギュイーン」と指定の場所までスクロールします。
チェックを外すと、「パッ」と指定の場所に切り替わります。
好みですね。
横幅
横幅をピクセル指定、%指定で変更できます。
デフォルトでは「自動」になっています。
自動は見出しの文字数の表示できる長さになっていますね。
好みで変更しましょう。
回り込み
目次を回り込みにできますので、目次の横からテキストや画像が始まります。
「なし」がデフォルトになっています。
「左」にすると目次は右に寄せられ、テキストや画像が目次の左側から描画されます。
「右」にすると目次は左に寄せられ、テキストや画像が目次の右側から描画されます。
回り込みはレイアウトが崩れやすいです。
画像等で回り込みの知識のある方なら大丈夫だと思います。
そのためちょっと上級者向けです。
文字サイズ
文字サイズを変更できます。
デフォルトは「95%」です。
値を変えれば変更できるのですが･･･。
階層表示になっていると、「140%」でこんな感じになります。
階層分この%が乗算されるみたいです。
普通はデフォルトの95%の様に、ちょっとずつ小さくしていく想定なのでしょうね。
プレゼンテーション
見た目を変更できます。
お好みで変更しましょう。
小文字～除外する見出し
小文字、ハイフン
「アンカーに必ず小文字を使用」、「アンカーでアンダースコアではなくハイフンを使用」難しいですね。
アンカーは目次のリンク（アンカー）の事です。
リンクのテキストは見出しですが、この事を言っているわけではありません。
htmlの<a>タグについている内部リンクを作るためのidの事を言っています。
少し詳しく書いておきます。
<a href=”#見出しのid”></a>が目次のリンクになっています。
各h2タグ等の見出しにこのidが自動で割り振られる仕組みです。
そしてこのidは見出しの英数字から作られます。
日本語しか使っていなければ後の「アンカーのデフォルト接頭辞」が使われます。
被っていれば番号が割り振られます。
チェックを入れると、下記の様に「ABC_AB1」が「abc-ab1」として作られます。
デフォルトではチェックが外れています。
基本的には変更する必要はないかと思います。
自動で作ってくれる見出しのidなんて、そんなところ余り気にしないですもんね？
ホームページを含める
WordPressの設定の表示設定でホームページにしているページに目次を出すか選択できます。
デフォルトではチェックは外れています。
CSS ファイルを除外
チェックを入れるとTOC+のCSSが除外されてしまいます。
デフォルトはもちろんチェックが外れています。
TOC+のCSSを自分で作る場合やテーマ等でカスタマイズされたCSSがある場合にチェックを入れるのでしょうか。
この状態ですとTOC+がh2やh3タグから目次のリンクを生成し、TOC上のclass等を挿入した状態で作成されます。
基本的にはチェックを外したままで問題ないでしょう。
テーマの見出し記号を保持
少しわかりにくい表現ですよね。
さすが上級者向けの設定です。
これはliとかulタグの事を言っています。
チェックを外した状態だとtocでオリジナルのulタグのclassを作ってくれます。
チェックを入れると何もclassの指定をせずにulを使います。
※厳密にはtoc全体のdivのclassのno_bulletsとhave_bulletsを切り替えています。
チェックを入れてみるとテーマでulを使ったときのドット・が表示されると思います。
基本的にはチェックを外しておくことで問題ないでしょう。
見出しレベル
h1～h6タグのどれを目次として使うかを選択できます。
デフォルトではすべてにチェックがついています。
なおここで設定しても後で各ページで表示させるときにオプションで指定し直すことはできます。
除外する見出し
これは設定のページに説明がありますね。
見出しの文字列で除外できるという設定になります。
パス限定、アンカーのデフォルト接頭辞
設定が完了したら「設定を更新」で忘れずに保存しましょう。
パス限定
カンマ区切りで特定のページにのみ目次を表示できます。
アンカーのデフォルト接頭辞
こちらは「小文字、ハイフン」で説明したアンカーの内容です。
一応説明書きにもありますが、先に解説したように、自動でidが作られるときの接頭辞になります。
デフォルトは「i」です。
「見出し」⇒「見出し」から作られるアンカーは「i」、「i-1」です。
基本的にはデフォルトのままで良いと思います。
サイトマップ
一応サイトマップ機能もあるので紹介しておきます。
まず[sitemap]として記事中にTOC+のショートコードを入力するとサイトマップが表示されます。
このサイトマップに関する設定になります。
ショートコードは4種類あります。
- [sitemap]：固定ページとカテゴリーページ
- [[sitemap_papes]]：固定ページ
- [sitemap_posts]：投稿ページ
- [sitemap_categories]：カテゴリーページ
[sitemap]はjetpackでも設定されるショートコードです。
競合した場合は正常に動作しない可能性があるのでご注意ください。
[sitemap_posts]ではそれぞれの記事タイトル毎に見出しが付きます。
[[sitemap_papes]]や[sitemap_categories]はそれぞれこの設定で設定した見出しが付きます。
こんな感じで表示されます。
固定ページリストを表示
[sitemap]を使ったときに[[sitemap_papes]]を表示します。
デフォルトではチェックが入っています。
カテゴリリストを表示
[sitemap]を使ったときに[sitemap_categories]を表示します。
デフォルトではチェックが入っています。
見出し
先の説明の通り、見出しが付きます。
見出しのタグをh1～h6で指定します。
固定ページのラベル
固定ページの見出しです。
カテゴリページのラベル
カテゴリーページの見出しです。
一つ一つ動作検証して確認しました！
- TOC+の設定はシンプルですが好みが出てくるので恐れずいじりましょう！
- 上級者向けの設定も、「ホームページを含める」や「見出しレベル」は好みで設定しておくと良いかもしれません！
- サイトマップの説明はここまでで、使い方は特に解説しません！
使い方
まず、先程の設定で条件を満たしているページには自動的に目次が挿入されます。
このままで問題が無ければ、設定をするだけで目次が使えています。
ただ、ページ毎に少しいじりたい場合があります。
そんなときのためにショートコードが用意されています！
基本
まず基本は2つです。
[toc]は入力した場所に目次を表示させます。
いくつも記載した場合、最初の[toc]が優先されます。
ただし設定で設定した見出しの位置は非優先です。
設定で「上」を選択していても、記事中にショートコードがあれば、ショートコードの位置が優先されます。
[no_toc]はページに目次を表示させません。
これで記事に目次を付けたくないページから目次を除けます。
オプション
後は[toc]のショートコードのオプションになります。
labelオプション
[toc label="目次タイトル"]で、目次タイトルがタイトルの目次を表示できます。
no_labelオプション
[toc no_label="true"]で、目次タイトルを非表示できます。
逆に[toc no_label="false"]で目次タイトルを付けることもできないようです。
※ヘルプを見るとできそうなんですが、うまくいきませんでした。
※コードを見ても”true”を入力して非表示にする事しかできなさそうでした。
wrappingオプション
[toc wrapping="left"]で、回り込みを「左」にすることができます。
[toc wrapping="right"]で、回り込みを「右」にすることができます。
heading_levelsオプション
[toc heading_levels="2,3,4"]とするとh2,h3,h4の見出しタグが目次として使われます。
excludeオプション
[toc exclude="*除外しちゃうよ*"]とすると「除外しちゃうよ」の文字が入った見出しを目次から除外します。
*を付ける事で「任意の文字列」になるので、「この見出しは除外しちゃうよ」も除外されます。
*を付けないと「除外しちゃうよ」に一致する見出しなので「この見出しは除外しちゃうよ」は除外されません。
classオプション
[toc class="toc_maruhi_class"]で、目次のdivタグに指定のclassが追加されます。
CSS等で目次を記事によってカスタマイズしたいときは有効かもしれませんね。
基本的な設定はTOC+の設定から行えますが、個々の記事でも少しずつカスタマイズできるんですね！
- 目次の挿入を切り替える[no_toc]は覚えておきましょう！
- 目次に使う見出しレベルを変更するheading_levelsオプションも使いこなせると良いと思います！
- 見出しの一部を除外できるexcludeオプションも必要になる場面があるかもしれないですね！
まとめ
いかがでしたでしょうか？
とっても簡単に目次を作れます。
設定の内容をきちんと見ておければ、TOC+はとっても便利なプラグインだとわかってもらえると思います。
[no_toc]とheading_levelsオプションというものがあるのもポイントですね。
- デフォルトでも良いけど、設定に目を通しておくと良いと思います！
- [no_toc]とheading_levelsオプションはおさえておきましょう！
ここまでお読みくださりありがとうございました！