こんにちは、”はふぃ”です。

ネットで情報を探している際に記事やブログを探ると思いますが、長文のものだと自分が欲しい情報がどこに書かれているかわからないですよね?

そんな時に便利なのが目次です。目次の中に関係ありそうなものがあればそこまで読み飛ばし、必要な情報を最短で取得することができます。

つまり記事を書く側にとっても目次は必須のものであり、このサイトにまだ組み込んでいなかったので実際に組み込みながらやり方を説明したいと思います!

目指すこと

WordPressのプラグインを利用して、記事内の見出しから目次を自動生成する

使用するプラグイン

今回はEasy Table of Contentsというプラグインを使用します。

※ ネット上で「WordPress 目次」と検索するとTable of Contents Plus(TOC+)が多く紹介されていますが、こちらのプラグインは最終更新日が3年前(2019/03/09現在)となっており、今後いつ使えなくなるかわからない状態に思えたので避けました。

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

WordPressの管理画面の左サイドバーから「プラグイン → 新規追加」と押下し、プラグインのインストール画面に進みます。

右上の検索窓に「Easy Table of Contents」と入力し、該当のプラグインをインストールします。

インストール後、「有効化」をクリックしてプラグインを有効にします。

Easy Table of Contentsの設定

再度左サイドバーから「設定 → 目次」で設定画面にうつります。

ここで目次の様々な設定が行えるので順番に見ていきます。

項目名項目の説明実際の設定
サポートを有効化どのページに目次を入れたいかを選択投稿のみチェック
自動挿入自動的に目次を挿入するページを選択。サポートを有効で選択した中で特定のページにのみ目次を入れたい場合はオフ、全てのページに目次を入れたい場合はオン投稿のみチェック
位置目次を入れる位置を選択最初の見出しの前(デフォルト)
見出しラベルを表示目次にタイトルを入れるかどうかチェック(デフォルト)
見出しラベル目次のタイトル「目次」
折りたたみ表示目次を開閉するボタンを表示するかどうかチェック(デフォルト)
初期状態最初から目次を閉じた状態で表示するかどうかチェックしない(デフォルト)
ツリー表示見出しタグを階層化するかどうかチェック(デフォルト)
カウンターツリー表示時に見出しにどのような番号を振るか(または振らない)を選択小数点表示(デフォルト)
スクロールを滑らかにするユーザーが見出しをクリックした際にスクロールで移動したいかどうか(チェックをつけない場合はジャンプする)チェック(デフォルト)

※ この続きにある外観高度に関してはお好みで設定してください。

設定が完了したら一番下の「変更を保存」をクリックすることで全て(過去・未来)の記事で目次が表示されます!

まとめ

プラグインを使うことで簡単に目次を自動生成することができますが、シンプルなものなのでデザインにこだわりたい場合は目次を自作するcssをいじる必要がありそうです。

投稿者: はふぃ

若手のWEBフロントエンジニア。最近はバレーボールにハマってます!

コメントを残す

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です

CAPTCHA