[プラグイン無し] 記事内の見出しから目次を自動生成する

はじめに

Wordpressで記事を投稿した時に、
リンク付きの目次を記事ページにつけてほしいと、依頼がありました。

プラグインを使うと簡単にできますが、
なるべくプラグインは増やしたくないので、
JSで実装しました。

記述例

まずjQueryを読み込みます。

<script src="/asset/js/jquery.js"></script>

HTML

<!-- 目次部分 -->
<div id="contList">
  <ul class="list">
  </ul>
</div>

<!-- 記事内の見出し -->
<div id="l-post">
  <h3>見出し1</h3>
  <h3>見出し2</h3>
  <h3>見出し3</h3>
</div>

JS (jQuery)

$(function(){
  var countId = 1
  $("#l-post h3").each(function(){
    var ttl = $(this).text();
    var lv = this.nodeName.toLowerCase();
    this.id = 'ttl-' + countId;
    countId ++;
    $("#contList .list").append('<li><a href="#'+this.id+'">'+ttl+'</a></li>');
  });
});

出力例

HTML

<!-- 目次部分 -->
<div id="contList">
  <ul class="list">
    <li><a href="#ttl-1">見出し1</a></li>
    <li><a href="#ttl-2">見出し2</a></li>
    <li><a href="#ttl-3">見出し3</a></li>
  </ul>
</div>

<!-- 記事内の見出し -->
<div id="l-post">
  <h3 id="ttl-1">見出し1</h3>
  <h3 id="ttl-2">見出し2</h3>
  <h3 id="ttl-3">見出し3</h3>
</div>

おわりに

脱jQueryの流れが来ていますが、
まだまだjQuery使用のスライド等が設置されていることが多いので、
jQueryを使って実装してみました。（使えるものは使う主義）

記事によって目次が必要ない場合もあったので、
この時はHTMLを「再利用可能ブロック」として保存して、
使いたい時だけエディタ内に追加してもらうようにしていました。
が、時間が経って冷静に考えれば、

• 目次あり／なしの２パターンのテンプレートを選択させる
• カスタムフィールドでチェックボックスを設置してチェックを入れたら目次を表示させる

というようにした方がスマートだったなと思いました^^;
（過去作ったサイトを見直すとなんでこんな構造にしたんだと思うことが多々あります。。）

プラグインではないので、
Wordpress以外のCMSやECサイトでも使えそうですね。