こんにちは、tapunです。

技術ブログを書いていると、1つの記事に対して情報量が多くなってしまいがちですよね。

他のブログを見ているとよくある目次！アジェンダ！

めんどくさいタグ使いが必要かな～と思っていたのですが、案外簡単にプラグインで実装できることがわかったので、その流れをご紹介します 😀 

使うプラグインは？

スタンダードになっているらしい「Table of Contents Plus」を使います。

こんな感じの、Wikipedia風な見出しを作ってくれます。

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

1. プラグインの新規インストール画面で「Table of Contents Plus」をインストールします。
   
2. 「今すぐインストール」をクリックします
3. インストールが終わったら、プラグインを有効化します。
   

プラグインの設定

設定 – [TOC+] からプラグインの設定を行います。

このブログでは投稿ページに３つ以上の見出しがあるときにh1 ~ h2のタグを見出しにするようにしています。

設定箇所はこちら↓

• 表示条件：3つ以上の見出しがあるとき
• 次の投稿タイプのときに表示： Post　のみ
• 見出しテキスト：目次　（見出しの上に表示されます）
• 上級者向け
  • 見出しレベル：h1とh2にのみチェック
  • 除外する見出し：Share this* | 関連

 

こんな感じです↑

除外する見出しって？

デフォルトの設定では、h1~h6タグがついている全ての見出しを目次に入れ込んでしまいます。

例えば、こんな感じに「Share this：」や「関連の投稿」に関する見出しも作成されてしまいます。

この２つは見出しには不要なので、設定画面で除外するようにしています。

 

• 除外する見出し：Share this* | 関連

 

アスタリスクでの正規表現が使えますので、「share*」とかでも除外できます！

プラグインを使う上での注意点

このプラグインは、もともとの記事に見出しをつけていないと機能しません。

テキストエディタで書く場合には<h1>~<h6>の見出しを、ビジュアルエディタで書く場合には段落設定で見出しを作っておかないといけません。

単純に文字を大きくしたり、改行しているだけの記事では見出しが作成されないので、注意しましょう！

私も最初に書いた記事は見出しがないので後で直そう・・・。

まとめ

WordPressで書いた投稿の目次は、プラグイン「Table of Contents Plus」で簡単に作成できます！

ただし、もともとの投稿で見出しを綺麗に<h1>~<h6>で作成しておかないと見出しがゴチャゴチャするので気をつけないといけません。

以上です！