【WP】記事の目次を作成するプラグイン「Table of Contents Plus」

今回は、記事の最初にメニューを追加するにはどうしたら良いか検索していたら「Table of Contents Plus」と言う便利なプラグインを発見しました。

1.記事の目次を自動生成してくれるプラグイン「Table of Contents Plus」

かなり有名なプラグインみたいです。

「Table of Contents Plus」は記事の見出しタグから目次を自動的に作成してくれるWordpressのプラグインです。

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

WordPressの管理画面 > プラグイン > 新規追加 > 「Table of Contents Plus」で検索 > 今すぐインストール > 有効化

3.使用上の注意点

利用するにあたって、見出し用のHTMLタグ(H1~H6)を階層的に記述する必要があります。

タグが無ければ、記事の目次は生成されません。

4.設定方法

管理画面 > 設定 > TOC+ >

基本設定

位置

◎ 最初の見出しの前(デフォルト)

○ 最初の見出しの後

○ 上(記事タイトルの下)

○ 下(記事の一番下)

表示条件

この場合は4つ以上だと目次が表示されます。

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

post 投稿記事
page 固定ページ
custom_css カスタムCSS
customize_changeset カスタマイズチェンジセット
wpcf7_contact_form 問い合わせフォーム

デフォルトではpage(固定ページ)にしかチェックが付いていませんでした。

投稿記事にもチェックしましょう。

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

有効化すると、目次をクリックした時にジャンプではなく、滑らかにスクロールされます。

見出しの表示数を減らす

H4タグまで増えると目次が見にくいと感じたので、目次は「H1、H2、H3」の三つまで表示する事にしました。

下のほうにスクロールすると上級者向け(hide)とあるので、クリックして表示しましょう。

上級者向け > 見出しレベル

これですっきりしました!

5.その他のカスタマイズ

「Table of Contents Plus」のデフォルトでは変更できないカスタマイズ方法をご紹介します。

目次の位置を中央揃えにする

スタイルシート(CSS)に追記します。

管理画面 > 外観 > テーマの編集

一番下に以下のコードを追加して「ファイルを更新」

こんな感じです。

因みに私は「Simplicity2」と言うテーマの子テーマを使用しています。

中央揃えになりました!

文字の上下の間隔とサイズ

現在デフォルトではこんな目次になっていますが、少しだけカスタムしたいと思います。

  • 文字と文字の間隔を少しあける
  • リンク部分にオンマウスした時のアンダーラインを消す
  • 文字の大きさを少し大きくする

【適用前】

【適用後】

見やすくなった・・・?かな?多少は・・・(笑)

あまり変わっていないですが、一応コードを載せます。

場所は先程と同じです。

管理画面 > 外観 > テーマの編集 > 一番下に以下のコードを追加して「ファイルを更新」

タイトルに自動でつけられる番号を手動に切り替える【2017/10/18追記】

見出しの番号を自動で生成してくれる機能は便利ですが、記事を複数作成していくにつれて見難くなってしまうパターンがあったので、これからは全て手動に切り替える事にしました。

例:こんな風に自分で番号を振ってしまうとダブってしまう。

結果:手動の方が見やすい場合もある

やり方

やり方は簡単です。

管理画面 > 設定 > TOC+ > 基本設定タブ > 番号振りのチェックを外す > 設定を更新

番号が削除されたことで、小見出しに番号を振らない場合は、もう少し右にずらしたいので、一つ前に記述した「文字の上下の間隔とサイズ」と同じ手順でCSSを編集します。

管理画面 > 外観 > テーマの編集 > 以下のコードを追加して「ファイルを更新」


参考記事

https://ikumen-sim.net/table-of-contents-plus

スポンサーリンク
レクタングル広告(大)
レクタングル広告(大)

シェアする

  • このエントリーをはてなブックマークに追加

フォローする

スポンサーリンク
レクタングル広告(大)