hタグでスムーススクロール付きページインデックスを自動で生成する

WordPressでページ内目次を見出しタグから自動生成（プラグインなし）

2013/07/03
タグ: ユーザビリティ, 中級

Wikiをはじめ、記事の先頭にリストの目次（インデックス）をつけているサイトを目にしたことがあると思います。
記事の内容がざっと理解でき、さらにクリックすることでスクロール移動できます。
訪問者にはとても優しい構成ですね。
ただし、このリストの目次は手作業で行うとかなり面倒です。
ユーザービリティの向上につながるとはいえ、投稿時に手間が掛かってはいただけません。

このサイトでも実装していますが、WordPressの場合は「Table of Contents Plus」などのプラグインで機能追加することができます。
今回はjQueryを使って、自前で実装してみたいと思います。

jQueryの確認

前提としてjQueryがロードされている必要があります。ソースのヘッダ内で下記のようにjQuery.jsが出力されているか確認してください。

<script type='text/javascript' src='http://example.com/wp-includes/js/jQuery/jQuery.js'></script>

WordPressではあらかじめjQueryのライブラリが用意されていますが、お使いのテーマでロードされていないようでしたら、ヘッダ内にjQueryを読み込む関数を入れてください。
場所は他のスクリプト類よりも先に読み込むようwp_head()のすぐ上でよいと思います。

<?php wp_enqueue_script('jQuery'); ?>
<?php wp_head(); ?>
</head>

スクリプトの追加

jQueryの確認ができたら、hタグを抽出してページ内リンクを自動生成させるスクリプトを加えます。

メインスクリプト

ソース6行目でどの見出しを目次として取得するかを指定しています。下記のソースではarticleタグ内のh3とh4と定義していますので、必要に応じて変更ください。
例えば、ただのh3という形で指定するとページ内のサイドバーやメニューなど、すべての見出しタグが対象となりますので、ご注意ください。

<script>
jQuery(function($) { // h3～h4タグから目次を自動生成
  var idcount = 1;
  var toc = '';
  var currentlevel = 0;
  $("article h3,article h4:header", this).each(function() {
    this.id = "chapter-" + idcount;
    idcount++;
    var level = 0;
    if (this.nodeName.toLowerCase() == "h3") {
      level = 1;
    } else if (this.nodeName.toLowerCase() == "h4") {
      level = 2;
    }
    while (currentlevel < level) {
      toc += '<ol class="chapter">';
      currentlevel++;
    }
    while (currentlevel > level) {
      toc += "<\/ol>";
      currentlevel--;
    }
    toc += '<li><a href="#' + this.id + '">' + $(this).html() +
      "<\/a><\/li>\n";
  });
  while (currentlevel > 0) {
    toc += "<\/ol>";
    currentlevel--;
  }
  jQuery("#toc").html(toc);
});
</script>

スムーススクロール用スクリプト

上記のスクリプトで目次自体は出力されますが、せっかくなのでリンク先までスムーススクロールさせてみます。

<script>
jQuery(document).ready(function($) {
  $('a[href^="#"]').click(function(event) { // #で始まるアンカー
    var id = $(this).attr("href"); // 移動先を取得
    var offset = 60;
    var target = $(id).offset().top - offset;
    jQuery('html, body').animate({
      scrollTop: target
    }, 400); // スクロールの速度
    event.preventDefault();
    return false;
  });
});
</script>

これでリンク先まで視覚的に移動させることができます。

外部ファイルとして読み込む

外部JSファイルとして読み込む場合はjavascriptタグの中身を別ファイルとして保存して以下のようにヘッダ内に読み込みます。（ルートのjsフォルダにauto-link.jsとしてアップロード）

<script type="text/javascript" src="http://example.com/js/auto-link.js"></script>

目次のデザインに関してはスタイルシートでカスタマイズすることができます。
参考までにこのサイトで使っている目次部分のCSSは下記です。

#toc {
  padding: 5px 0 25px;
}
ol.chapter {
  display: block;
  font-size: 14px;
  padding: 3px 20px;
}
ol.chapter li {
  list-style: circle;
}

自動生成見出しの使い方

通常どおり記事を書いていって構いません。目次にしたい部分にh3とh4タグを使用します。
そして、目次を表示したい部分に以下のタグを挿入します。記事投稿時にはこれだけの手順で見出しに対する目次が指定カ所に出力されます。

<div id="toc"></div>

なお、この以前紹介したAddQuicktagを使用するとワンクリックでタグ挿入することができます。

見出しにhタグを使い、指定タグを挿入するだけ

動かない場合はここをチェック！

6行目("article h3,article h4:header",this)内のメインスクリプトの対象範囲はご自身のソースによって変更する必要があります。

例えば、WordPressで人気のデフォルトテーマ「Twenty Fourteen」であれば、メインコンテンツの記事部分はentry-contentというクラス内にありますので、ここのh3とh4からを目次を作りたければ、(".entry-content h3,.entry-content h4:header",this)となります。

ちなみにjQueryのライブラリさえ使えれば、静的HTMLでもこの見出しメニュースクリプトは使えます。