creatersnest

WordPressで記事の目次を自動作成してくれる「Table of Contents Plus」がすごい


こんにちは!
WordPressを使ったサイトのなかに、目次があるものを見たことある方も多いのではないでしょうか。これは「Table of Contents Plus」という機能で、見出しにしたい文字を自動で見出しにしてくれ、もちろんハイパーリンクもつけてくれる、とっても便利なプラグインです。

今回は、そのプラグインの機能をご紹介したいと思います。

当サイトでもそのプラグインが使われています。

では実際に、この記事を例にして、特徴・使い方を説明していきましょう。

以下のように目次を設定したいとします。

◯:大見出し

・:小見出し

◯「Table of Contents Plus」の特徴

  • 目次を自動で作成する
  • 見出しが自動でハイパーリンクになり、ページ内を移動できる
  • あとから項目を追加することもできる

◯「Table of Contents Plus」のインストール

  • サイトからインストール
  • 「Table of Contents Plus」の設定

◯まとめ

上のように設定したいとします。さて、このサイトも「Table of Contents Plus」を使っていますので、下に完成形をお見せできます。

ご覧の通り、目次を開いたり閉じたりできますね↓

 

「Table of Contents Plus」の特徴

目次を自動で生成する

「Table of Contents Plus」はこんな風に、目次を自動で生成してくれます。

さて、投稿画面はどうなっているかおわかりですか。

スクリーンショット 2015-08-26 0.29.02

こうなっています!おわかりでしょうか。
当サイトの文章は、「見出し2」、「見出し3」、「段落」の3つの構成で書かれていて、「見出し2」と「見出し3」に設定した文字が、それぞれ目次に組み込まれるわけです。「見出し2」が章となり、「見出し3」が項となります。写真中の「段落」と書かれた部分に「見出し1」〜「見出し6」までが項目として入っていますが、当サイトでは目次に含むのは章と項のみの設定にしています。

見出しが自動でハイパーリンクになり、ページ内を移動できる

スクリーンショット 2015-08-26 0.43.15

さて、今はこのような形になっています。

それぞれの章・項にカーソルをあてていただくと、クリックできるようになっているのがおわかりですか。

「Table of Contents Plus」の見出しは、クリックするとその章や項にサイト内でジャンプができるようになっているのです。例えば、「Table Of Contents Plusの特徴」をクリックすると、「Table Of Contents Plusの特徴」の真下の部分、つまり「目次を自動で生成する」のところから読めるようになっています。

あとから項目を追加することもできる

あぁ…これも入れたかったんだ…と後から気づいてしまったとき、今までの説明を理解していただけたのなら、おわかりでしょう。「Table of Contents Plus」を使うと、文を書いて見出しの設定を入れるだけで、すぐに目次になります。とってもカンタンですね。

「Table of Contents Plus」のインストール

サイトからインストール

インストールはカンタンです。サイドバーにあるプラグインから、キーワードに「table of」と打つだけで、一番最初に出てきます。とっても人気のプラグインなんですね。

画像2 Table of contents plus

インストールされたプラグインを、有効化することもお忘れなく!

プラグインの有効か

「Table of Contents Plus」の設定

さて、インストールほやほやの「Table of Contents Plus」がこちら。

デフォルトの状態がこうなっています。

プラグイン設定1

基本的な設定は、Main Contentsのみで済みます。一つひとつ見ていきましょう!

Position:目次を表示する位置のこと
ちなみに

「Before first heading (default)」は、最初の見出しの上部

「After first heading」は、最初の見出しの下部

「Top」は、記事の最上部

「Bottom」は、記事の最下部

のことを指します。多くのサイトではデフォルトの「Before first heading」を選択しているようです。

Show when:目次として表示させる見出しの数

デフォルトでは「4」になっています。今回は「見出し2」と「見出し3」を使っているので「2」です。

見出しが2つ以上ある際に目次を表示させる、ということです。

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:目次の項目に番号を振るかどうか

当サイトの「1.〜、1.1〜」などのことを言います。

Enable smooth scroll effect:目次の項目をクリックした際になめらかなスクロールをするかどうか

これも、当サイトで採用しています。目次の項目を押すと、すーっと画面が下にいく動きのことですね。

まとめ

いかがでしたか。たくさんあるプラグインのなかでも、比較的利用しやすいものなのが「Table of Contents Plus」です。

ぜひためしてみてくださいね!

本サイトが運営するWebデザインのオンラインスクールが公開中!
以下のリンクからお申込みで、特別料金の70%OFF!

未経験からプロのWebデザイナーになる! 400レッスン以上の完全マスターコース
こちらのコースは全くの未経験の方が、プロのWebデザイナーとして働けるレベルになることを目的としたコースです。
・全422レッスン & 42時間! 通学スクール80万円相当の内容
・授業×チャレンジ課題で実践的なスキルが身につく!
・過去1100名以上のスクール卒業生を輩出した、 Webサービス運営企業・デザイナー輩出企業だからこそ作れるプログラム

Webやアプリの最新デザインツール Sketch3 |100レッスンの完全マスターコース
Sketch3未経験からプロレベルを目指す、充実したコースです。
Sketch3の単なる機能説明をするような、つまらないコースではなく、アイコン制作、ボタン作成、メインビジュアル制作、Webページの制作など、実際の制作をしながら実践力を身につけます。
1000名以上の卒業生がいる実績ある日本のWebデザインスクールが提供しています。


Next ArticleWordPressとは何かがわかる、入門者さんにまず読んでほしいおすすめ記事50選