jQueryを使いプラグインなしで目次をWordPressの記事に自動追加する

ブログや解説サイトに目次を設定することで、記事の内容をわかりくし情報を見つけやすくすることでユーザビリティを高めることができます。

WordPressには、目次を挿入するためのプラグインも多数ありますが動作が重くなってしまう場合があります。動作を軽くしつつ誤動作をなるべく防ぐために、プラグインを使わずにWordPressテーマに目次を挿入する機能を追加してみましょう。

今回は、jQueryを使用してWordPressで見出しを自動抽出し、目次として表示させる方法についてご紹介します。

目次を動かすためのjQueryを記述する

まずは、目次のベースとなるjQueryの記述をします。WordPressのテーマでjQueryを動かすためには、新たにテンプレートを作成して機能を追加する方法と、footer.phpの</body>前に直接記述する方法の2種類あります。

本記事では書き換えや修正が簡単に行えるように新たにテンプレートを作成する方法で推奨しますが、直接記述しても特に問題はありません。

見出しを自動で抽出し目次として利用するために、まずは新しいjavascriptテンプレートをテーマ内にFTPソフトなどで追加します。私は、『toc.js』という名前で追加しました。(toc = table of contentsの略)

テンプレートの作成が完了したら、下記のソースコードをテンプレート内に記述します。コピペするだけでOKです。
※footer.phpの</body>前に直接記述する場合は、下記のコードの頭に <script type="text/javascript> 最後に </script> を追加してください。

toc.jsに記述

jQuery(function($) {
    var idcount = 1;
    var toc = '';
    var currentlevel = 0;
    jQuery("article h2,article h3", this).each(function() {
        this.id = "toc-" + idcount;
        idcount++;
        var level = 0;
        if (this.nodeName.toLowerCase() == "h2") {
            level = 1;
        } else if (this.nodeName.toLowerCase() == "h3") {
            level = 2;
        }
        while (currentlevel < level) {
            toc += "<ol>";
            currentlevel++;
        }
        while (currentlevel > level) {
            toc += "</ol>";
            currentlevel--;
        }
        toc += '<li><a href="#' + this.id + '">' + jQuery(this).html() + "</a></li>\n";
    });
    while (currentlevel > 0) {
        toc += "</ol>";
        currentlevel--;
    }
    if (jQuery("article h2")[0]) {
        jQuery("#toc").html('<div class="mokuji">CONTENTS</div>'+ toc);
    }
});

WordPressでjqueryの記述をするときには『＄』ではなく『jQuery』を使ってください。『$』を使った場合は、きちんと動作しない可能性があります。

上記のコードを追加することで、h2とh3見出しを自動で抽出し目次を追加する処理を行います。抽出見出しは、上記のコードの5行目～13行目の記述を追加・削除することで変更することができます。

例として、見出し4を追加すると・・・

jQuery("article h2,article h3,article h4", this).each(function() {
    this.id = "toc-" + idcount;
    idcount++;
    var level = 0;
    if (this.nodeName.toLowerCase() == "h2") {
        level = 1;
    } else if (this.nodeName.toLowerCase() == "h3") {
        level = 2;
    }else if (this.nodeName.toLowerCase() == "h4") {
        level = 3;
    }

上記のソースコードのようにarticle h4の記述と『else if{～}』の条件分岐を追加するだけです。必ずlevelの部分も+1した数字に書き換えてください。

目次は数字付きのolタグで出力されるように記述していますが、ソースコードの ol → ul に書き換えることで数字なしのリスト形式で出力することができるようになります。

目次のタイトルは29行目の『<div class="mokuji">CONTENTS</div>』で設定していますので、お好みに合わせて自由に変更してください。

ソースコードの記述が完了したら、functions.phpにjsファイルを読み込ませる記述を追加しましょう。※footer.phpに直接記述する場合は不要。
function.phpに記述を行う際は、必ずバックアップをとってから慎重に記述してください。

functions.phpに記述

function read_toc_scripts(){
  wp_enqueue_script( 'toc', get_template_directory_uri() .'/toc.js', array('jquery') );
}
add_action( 'wp_enqueue_scripts' , 'read_toc_scripts' );

上記のソースコードの2行目の『get_template_directory_uri() .'/toc.js』には、jsファイルがある部分までのパスを記述します。テーマファイルの直下にテンプレートを追加している場合はそのままでOKです。

目次を記事内に追加する

目次を記事内に追加する方法は複数ありますが、ベースは『<div id='toc'></div>』という記述を加えるだけです。

記事ごとに直接追加

記事ごとに直接追加する場合は、記事を編集する際にエディタをテキストモードにして『<div id='toc'></div>』を記述します。この方法は、各記事ごとにコードを挿入していく必要があります。

single.phpにコードを追加する

single.phpに『<div id='toc'></div>』の記述を追加することで、全ての記事に自動で目次を追加することができるようになります。

single.phpの目次を入れたい任意の場所に記述を追加しましょう。ただし、この方法では記事本文の中に挿入することができません。

最初のh2タグの前に自動で追加する

目次を挿入しているブログに一番多いのが、最初のh2タグの前だと思います。目次を最初のh2タグの前に自動で挿入するようにするためには、function.phpに目次を挿入するための関数を定義します。
function.phpに記述を行う際は、必ずバックアップをとってから慎重に記述してください。

functions.phpに記述

function toc_in($the_content) {
  if (is_single()) {
    $toc = "<div id=\"toc\"></div>";

    $h2 = '/<h2.*?>/i';//H2見出し
    if ( preg_match( $h2, $the_content, $h2s )) {
      $the_content  = preg_replace($h2, $toc.$h2s[0], $the_content, 1);
    }
  }
  return $the_content;
}
add_filter('the_content','toc_in');

上記のソースコードを記述することで投稿ページにh2タグがあるかどうかを判別し、ある場合には目次が最初のh2タグの前に自動で挿入されるようになります。

記事の中に目次を追加したら、きちんと出力されているかを確認してみましょう。

上記の画像のように、見出しが目次として出力されていれば、目次の追加は完了です。

目次のデザインを整える

下記の目次のCSSサンプルでは、できるだけシンプルでスタンダードな目次になるようにデザインしました。

style.cssに記述

#toc {
  margin: 30px 40px;
  padding: 20px;
  text-align: center;
  border: solid 1px #ccc;
}

.mokuji {
  font-size: 1.2em;
  font-weight: bold;
  color: #333;
}

#toc ol {
  margin-top: 10px;
  margin-bottom: 0;
  padding: 0;
  text-align: left;
}

#toc ol li {
  font-size: .95em;
  margin-bottom: 1em;
  list-style-position: inside;
  color: #000070;
  border-bottom: 1px dotted #ddd;
}

#toc ol a {
  text-decoration: none;
  color: #000070;
}

#toc ol a:hover {
  opacity: .5;
}

#toc ol>ol {
  margin: 0;
  padding-left: 15px;
}

#toc ol>ol li {
  font-size: 1em;
  font-weight: 500;
}

@media (max-width: 599px) {
  #toc {
    margin: 30px 0;
  }
}

上記のCSSを適応すると下記の画像のようなデザインの目次になります。

自分のブログのデザインや好みに合わせてカラーやサイズを変更してください。

以上をWordPressテーマに追加することで、見出しを自動で抽出し目次として表示させることができます。是非参考にして、あなたのブログに動作の軽い自分好みの目次をプラグインなしで追加してみてください！