投稿本文へ自動で「目次」を作成するプラグイン「Table of Contents Plus」

公開日: コンテンツ追加


 もはやできないことはない!とさえ言えそうなCMSツールのWordpressですが、数あるプラグインの中にも「ここまでできるの?」というものがあったので早速インストールということで、設定などの備忘録です。

今回導入した「Table of Contents Plus」は、記事の見出しに応じてページや記事を表示する際に自動で目次を作ってくれる便利なプラグインです。

目次を使っているサイトと言えば、有名なのがウィキペディア(Wikipedia)ですね。Wikipediaのサイトではタイトル下に目次があって、その下に各項目の説明があるという定番スタイル、見慣れている方も多いと思います。これをWordpressに、しかも簡単な設定で設置できるのであれば是非導入したいところです。

【Table of Contents Plus】プラグインの基本的な機能・できること

目次の自動作成

 このプラグインの最大の特徴は自動で目次を作ってくれるところです。h1~h6の見出しタグに応じて階層上に目次を作成してくれます

 この目次は画面に表示される際に作られるので、後からページや投稿記事の内容を修正した場合でもきちんと対応してくれます。ただし、キャッシュ系プラグインの導入環境ではテストしていませんので、正常に動作するかは不明です。

 もちろん、「このタグはあえて目次にしなくてもいい」という場合には、例えばh6のタグは目次にしない・・・といった設定ができます。

目次の表示位置やデザインが選べる

 目次の表示位置は、「記事タイトルの下」「最初の目次に表示されるタグの下」「本文の後ろ」「最初の目次に表示されるタグの上」が選択できます。当サイトでは「最初の目次として扱われているタグの上」にしてあります。

 また、デザインについても変更が可能です。

サイトマップページも作れる

 Google-XML-Sitemapのように要約などは表示できないものの、ページのタイトル、投稿それぞれのカテゴリーまでは表示できます。固定ページにタグを入れるだけで自動的にサイトマップができるので、プラグインを最小限に抑えたい場合にはこのプラグインで目次とサイトマップを両方使うようにしましょう。

目次生成に対する負荷が少ない

 あくまでも個人的見解ですが、この手のプラグインはコンテンツを生成するのにすごく負荷がかかって表示が遅くなるものが多いのですが、このTable of Contents Plusに関してはプラグイン導入後の表示遅延はないように思われます。

この記事を参考にプラグインの導入をする際以下に留意ください

このプラグイン紹介記事は簡易的に動作テストをした上で紹介していますが以下の点にご注意願います
  1. すべての環境で動作するとは限りません
  2. できる限り最新のバージョンの情報を紹介するようにしておりますが、閲覧される時期によってはバージョンが変わり、仕様が大きく変更されている場合があります
  3. 有料版と無料版がある場合、テストは原則無料版のみで実施しています
  4. テスト環境については本文中に記載しています
  5. 使用方法で紹介しているショートコードやコードなどをコピーして使用すると、環境によっては記号などが文字化けすることがあります。コピーしたのに動作しない場合は特に「"」「'」などの記号を入力し直してみてください。

【Table of Contents Plus】プラグインの設定画面や表示の日本語化と翻訳

【Table of Contents Plus】プラグインは有効化すると日本語で使用できるようになっていますので、英語が分からない方でも安心して使えます

【Table of Contents Plus】プラグインのインストールと設定

インストール方法

インストールはプラグインの新規追加でプラグイン名で検索してインストールするか、ページ先頭の画像をクリックして表示されるWordpressのプラグイン公式配布ページがダウンロードしてからアップロードインストールします。

インストール方法の詳しい解説は

を参照ください

【Table of Contents Plus】プラグインの基本的な使い方

 設定はダッシュボード左サイドバーの「設定」↣「TOC+」で行います。出てくる設定画面の項目について順に説明します。

※アップデートにより動作方法の改善が行われ、インストールして有効化した後、標準で目次を表示する/しないが選択できるようになりました。

以前は全てのコンテンツに目次が出てしまい、投稿や固定ページの確認や修正が必要でしたが、デフォルトで「表示しない」にしておけばメンテナンスしたものに対して表示していったり、必要のないものは表示しないままにしておいたりとより細かく設定ができます。

少し脱線しますが、投稿などのコンテンツを修正したかどうかを投稿一覧ですぐにわかるようにマークするプラグイン

を上手に使えば、確認したものに☆マークをつけておくことでどのコンテンツが未確認なのかを簡単に把握することができます。

設定項目

Main optionタブ

目次作成に関する設定項目です

Position
目次を表示する位置です。
Before First heading/目次対象となるタグの直前に表示されます

After First heading/目次対象となるタグの直後に表示されます

Top/本文の先頭に表示されます

Bottom/本文の末尾に表示されます

Show when □ or more headings are present
目次表示対象となるタグが□の数量以上であれば目次を表示します

Auto insert for the following content types
目次の表示を「固定ページのみ」「投稿のみ」「両方」から選択できます

Heading text
「Show title on top of the table of contents」にチェックを入れると空欄に入れた文字が目次のタイトルとして表示されます

Allow the user to toggle the visibility of the table of contents
表示しない/表示するボタンを目次の中に表示するかどうかを選択します

Show hierarchy
Number list items
Enable smooth scroll effect
この3つはお好みで

Width
目次の幅を設定します。特に問題なければautoでOKです。

Wrapping
左寄せ、右寄せ、センタリングなど水平方向の位置を設定します。

font size
目次を表示する文字サイズを指定します。

Presentation
表示デザインを選択します。

Advanced
ここで表示しないタグの種類を設定できます。

Sitemapタブ

サイトマップを作成する際の設定です。項目については読めばわかると思いますので割愛します。

Wordpress関連の本

いちばんやさしいWordPressの教本 第4版 5.x対応 人気講師が教 える本格Webサイトの作り方 (「いちばんやさしい教本」シリーズ)
インプレス
大きな画面の操作手順で迷わない。人気のテーマで、パソコン&スマホ両対応のWebサイトを作れる!ソーシャルメディアとの連携やSEO対策、バックアップなどの運用面も丁寧に解説。
※表示している価格は単行本のものです
参考価格:1,738
※参考価格です。サービスやショップ、掲載時期などにより価格は異なりますのでご注意ください
できるWordPress WordPress Ver. 5.x対応 本格ホームページが簡単に作れる本 できるシリーズ
インプレス
WordPressは無料かつ高機能で、シェア率No.1のCMS(コンテンツ管理システム)です。その拡張性の高さから企業のホームページ制作にも利用されているほどで、ホームページで情報発信をするに当たって、個人でも本気度の高い方はWordPressを利用していることが多いです。本書はそんなWordPressの初期設定から制作、カスタマイズ、運用のノウハウまで幅広く学べる1冊です。
※表示している価格は単行本のものです
参考価格:1,628
※参考価格です。サービスやショップ、掲載時期などにより価格は異なりますのでご注意ください

  • 記事の作者: ひまあーと(管理人)

  • ☆最後までお読みいただきありがとうございました。記事作者のひまあーとです。
    ☆Wordpressでサイトをカスタマイズしていく上で有用な情報を配信しつつ、「ココナラ」でサイトカスタマイズのお手伝い、不具合の修復、サイト引っ越し代行などをさせていただいております。
    ☆Wordpressネタが多いですが、趣味の「園芸」「卓球」などの情報や日々の出来事などもどんどん増やしていきますのでよろしくお願いいたします。


QR Code

このページはモバイル端末でもご覧いただけます

左のQRコードを読み取っていただくと、このページのURLが表示され、簡単にアクセスできます。ぜひモバイル端末でもご覧ください。

いつでもご相談・サイトカスタマイズの依頼を受け付けています

Wordpressのカスタマイズ、不具合解消のご相談はすべてココナラのダイレクトメッセージからお受けしております。まずはこちらのバナーからお気軽にお問い合わせください。

※一度もココナラを使ったことがない方はココナラへの無料登録が必要です。こちらから登録後、上のリンクをクリックする、またはココナラトップページから「ひまあーと」を検索してお問い合わせください。


【スポンサーリンク】