【WordPress】記事に自動で目次を出力する Javascript。

最近、wordpress でブログサイトを作成していますが（このサイトも含めて）、記事に目次を自動生成する Javascript のプラグインを作成してみました。

そんなプラグインは沢山あるので、それを使用すればいいのですけどね。車輪の再発見が好きな僕としては、自分で作ってみようかな、と。

サンプル

目次出力

前提条件

• Jquery が必要
• h2、h3 を目次にする
• 目次はリスト（ul、li）タグで出力される
• [<p>目次出力</p>] という部分に出力される
• [.single] という class が存在しない場合は、処理しない

ソース

if (!window.makeMokuzi) {

  // グローバルに登録されてなければ登録
  window.makeMokuzi = (function () { // 即時関数（スコープを作るため）

    // プライベート関数
    function makeMokuzi() {

      // 目次作成
      $('p').each(function(){
        if ($(this).html() == '目次出力') {
          $(this).html('<div class="mokuziArea"></div>');
          $('.mokuziArea').append('<div class="title">目次</div>');
          $('.mokuziArea').append('<ul id="mokuzi" class="mokuzi"></ul>');
        }
      });

      var ul_item_current = $('#mokuzi');
      var tag_current = "";
      var tag_previous = "";
      $('h2, h3').each(function(index){

        // 現在のタグを取得
        tag_current = $(this)[0].nodeName;

        // リンク用にIDを付ける
        var anchor_id = 'anchor-'+index;
        $(this).attr('id', anchor_id);

        // li を追加する ul を決定する
        if (tag_current.toUpperCase() === 'H2') {
          if (tag_previous.toUpperCase() === 'H3') {
            ul_item_current = $('#mokuzi');
          }
        } else if (tag_current.toUpperCase() === 'H3') {
          if (tag_previous.toUpperCase() === 'H2') {
            // 初めての h3 だったら ul を追加
            $('#mokuzi > li:last').append('<ul id="mokuzi-'+index+'" class="mokuzi"></ul>'); // 最後の li 要素に
            ul_item_current = $('#mokuzi-'+index);
          }
        }

        // li 追加
        ul_item_current.append('<li><a href="#'+anchor_id+'">'+$(this).html()+'</a></li>');
        
        tag_previous = tag_current;
      });
    }

    return {
      // パブリックメソッド
      setEvent : function() {
        if ($('.single').length > 0) {
          // 記事ページの場合のみ目次作成
          makeMokuzi();
        }
      }
    }
  })();
}

// 実行
window.makeMokuzi.setEvent();