(cache) Simplicityで空タグを記述するだけで自動的に目次を追加する

「Simplicityで」と書いたが、WordPressの他のテーマや無料ブログでも、jQueryが使える環境なら使えるはず。

WordPressで目次と言えば「Table of ～」らしいが、勿論これより機能は少ない。

ただ、「Table of ～」は表示位置が自由に設定出来ないらしいので、HTMLタグさえあればどこにでも目次を追加出来る様にした。

目次が見たいシーンとして、記事冒頭は勿論だが、記事途中で見たくなる時もあるので、次の記事では、Simplicityの「Topへ戻るボタン」のツールチップ（吹き出し）として目次を設定する方法を記載する。

ここではまず、目次機能を導入して表示をさせる。

目次の表示例

上記はこの記事の目次となる。記事を書きながら見ていると、徐々に目次が増えて行くのが少し楽しい。

後、ここまでスクロールすると画面右下に「Topへ戻るボタン」が表示されていると思うが、その上部にも同じ目次が表示されていると思う。（詳しくは次記事で）

表示されていない場合や消えてしまった時は、「Topへ戻る」ボタンの上にマウスカーソルを移動すると再度表示される。

目次の機能

記事中の<h>タグ（h1～h6）を見出しとして出力する。
h1～h6のどれを目次として出力するかは設定可能。h1とh3を表示させないことやh3以降を表示すること等も可能。
目次にはリンクが張られ、クリックする事で対象の<h>タグまで移動する。
空のHTMLタグを1つ記述するだけで、そこに目次を出力出来る。
正確には出力先の指定にセレクタ（タグ名やタグのid、class名等）を使用するので、HTMLタグがあればどこにでも出力することが出来る。
記事毎に目次の挿入、削除が容易。
<h>タグが少ない（記事が短い）時などは、取りあえず目次を表示させておいて、不要だと感じたらタグを消せば目次を削除出来る。
過去の記事を修正せずに目次を表示出来る。
次の記事の内容になるが、画面右下の目次の様に、「記事の中」ではなく「記事ページ」に目次用のHTMLタグを仕込めば、過去の記事を修正せずに目次を出力することが出来る。

Simplicity(WordPress)へ目次を組み込む

今回の記事中への目次挿入では以下に追記する。

javascript.js
style.css

jQeryを使用するのでjQueryの読み込みや、Simplicity以外のWordPressテーマや他のブログで使用する場合は「レスポンシブデザインで画面下に移動するサイドバーをスクロールせずに使う方法」と同様にする。

javascript.jsに処理を追加する。

const A_I_TARGET_HEADING_SELECTOR = "article.article :header";
const A_I_DISPLAY_SELECTOR = ".ideware.a-i.a-i_display";
const A_I_INDEX_TITLE = "<div class='a-i_title'>この記事の目次</div>";
const A_I_NOT_FOUND_HEADING_MESSAGE = "この記事に見出しはありません。";

// 初期処理
jQuery(function($) {
    // <h>タグ取得
    var dstIndex = "";
    var hash = {};
    $(A_I_TARGET_HEADING_SELECTOR).each(function(i, e) {
        var tag = $(e).prop("tagName");
        // 一応チェック
        if(tag != "H1" && tag != "H2" && tag != "H3" && tag != "H4" && tag != "H5" && tag != "H6")
            return true;  // （jQueryでは「breakをreturn false」「continueをreturn true」と書くらしい…）

        // hタグレベル（1-6）
        var level = tag.substring(1);

        // インデントで使用する為使用されている<h>タグ（1～6）を保持(value値は不使用)
        if(!hash.hasOwnProperty(level)) {
            hash[level] = null;
        }

        // <h>タグにデータ属性追加（目次クリック時識別用）
        $(e).attr({"data-ideware-a-i-h-number" : i});

        // 目次要素にデータ属性追加（目次クリック時識別用）
        // 目次要素用HTML文字列追加
        dstIndex += "<li class='a-i_idx-level-" + level + "'>" +
                    "<a data-ideware-a-i-h-tag='" + tag + "' " +
                    "data-ideware-a-i-h-number='" + i + "'>" +
                    $(e).text() + "</a></li>\n";
    });

    // 目次用HTMLセット
    if(dstIndex == "") {
        dstIndex = A_I_NOT_FOUND_HEADING_MESSAGE;
    } else {
        dstIndex = A_I_INDEX_TITLE + "<ul id='a-i_%ID%' class='a-i_index'>" + dstIndex + "</ul>";
    }

    // 指定タグに目次挿入
    $(A_I_DISPLAY_SELECTOR).each(function(i, e) {
        $(e).html(dstIndex.replace("%ID%", i));
    });
});


// 目次クリック
jQuery(function($) {
    $("ul.a-i_index li a").click(function(){
        var targetH = $($(this).attr('data-ideware-a-i-h-tag') +
                        "[data-ideware-a-i-h-number='" +
                        $(this).attr("data-ideware-a-i-h-number") + "']");
        var pos = $(targetH).offset().top -5;
        $("html, body").animate({ scrollTop : pos }, { queue : false });
    });
});

const A_I_TARGET_HEADING_SELECTOR = "article.article :header";

const A_I_DISPLAY_SELECTOR = ".ideware.a-i.a-i_display";

const A_I_INDEX_TITLE = "<div class='a-i_title'>この記事の目次</div>";

const A_I_NOT_FOUND_HEADING_MESSAGE = "この記事に見出しはありません。";

// 初期処理

jQuery(function($) {

// <h>タグ取得

var dstIndex = "";

var hash = {};

$(A_I_TARGET_HEADING_SELECTOR).each(function(i, e) {

var tag = $(e).prop("tagName");

// 一応チェック

if(tag != "H1" && tag != "H2" && tag != "H3" && tag != "H4" && tag != "H5" && tag != "H6")

return true; // （jQueryでは「breakをreturn false」「continueをreturn true」と書くらしい…）

// hタグレベル（1-6）

var level = tag.substring(1);

// インデントで使用する為使用されている<h>タグ（1～6）を保持(value値は不使用)

if(!hash.hasOwnProperty(level)) {

hash[level] = null;

}

// <h>タグにデータ属性追加（目次クリック時識別用）

$(e).attr({"data-ideware-a-i-h-number" : i});

// 目次要素にデータ属性追加（目次クリック時識別用）

// 目次要素用HTML文字列追加

dstIndex += "<li class='a-i_idx-level-" + level + "'>" +

"<a data-ideware-a-i-h-tag='" + tag + "' " +

"data-ideware-a-i-h-number='" + i + "'>" +

$(e).text() + "</a></li>\n";

});

// 目次用HTMLセット

if(dstIndex == "") {

dstIndex = A_I_NOT_FOUND_HEADING_MESSAGE;

} else {

dstIndex = A_I_INDEX_TITLE + "<ul id='a-i_%ID%' class='a-i_index'>" + dstIndex + "</ul>";

}

// 指定タグに目次挿入

$(A_I_DISPLAY_SELECTOR).each(function(i, e) {

$(e).html(dstIndex.replace("%ID%", i));

});

// 目次クリック

jQuery(function($) {

$("ul.a-i_index li a").click(function(){

var targetH = $($(this).attr('data-ideware-a-i-h-tag') +

"[data-ideware-a-i-h-number='" +

$(this).attr("data-ideware-a-i-h-number") + "']");

var pos = $(targetH).offset().top -5;

$("html, body").animate({ scrollTop : pos }, { queue : false });

});

いくつか設定項目があるので以下に記載する。

【設定項目】

[1行目]：目次出力対象のタグを取得するセレクタ
目次に出力する<h>タグの範囲をセレクタで指定する。Simplicityではひとつの記事の親要素が<article>タグとなっており、その配下の<h>タグを出力対象としている。

また、記事ページに関連記事等を表示させた場合、関連記事の<article>タグが目次の対象となるのを防ぐために、class属性「.article」をセレクタに追加している。

Simplicityではこのままでいいと思うが、他のテーマではclass属性や、長く続けているブログ等では記事の親要素が<div>タグの場合もあると思うので要素名等の変更が必要になる。
[2行目]：目次を表示するHTMLタグのセレクタ
特にこだわりがなければこのままでいいが、ここで指定したセレクタを目次を挿入する個所に「<div class="ideware a-i a-i_display">」等と書く必要があるので、分かり易いclass属性に変更しても良い。
[3行目]：目次タイトル
目次上部に表示するタイトル。
[4行目]：<h>タグ無し時のメッセージ
1行目で指定したセレクタに<h>タグが無かった時に出力するメッセージ。

style.cssにスタイルを追加する。

cssでは色やインデント（字下げ）幅等を指定しているだけなので、適宜変更する。

.ideware.a-i.a-i_display .a-i_title {
    color: #000;		/* 目次タイトル文字色 */
}
.ideware.a-i.a-i_display,
.ideware.a-i.a-i_display a {
    color: #2098a8;		/* 目次文字色 */
    background-color: #fff;	/* 目次背景色 */
}
.ideware.a-i.a-i_display a:hover {
    color: #cc0033;		/* 目次ホバー色 */
}
.ideware.a-i ul li {
    list-style: none;
}
.ideware.a-i ul li.a-i_idx-level-1 {
    margin-left: 0;
}
.ideware.a-i ul li.a-i_idx-level-2 {
    margin-left: 15px;
}
.ideware.a-i ul li.a-i_idx-level-3 {
    margin-left: 30px;
}
.ideware.a-i ul li.a-i_idx-level-4 {
    margin-left: 45px;
}
.ideware.a-i ul li.a-i_idx-level-5 {
    margin-left: 60px;
}
.ideware.a-i ul li.a-i_idx-level-6 {
    margin-left: 75px;
}
.ideware.a-i ul li a {
    cursor: pointer;
}

.ideware.a-i {
}
.a-i_title {
    margin-top: 15px;
}

.ideware.a-i.a-i_display .a-i_title {

color: #000; /* 目次タイトル文字色 */

}

.ideware.a-i.a-i_display,

.ideware.a-i.a-i_display a {

color: #2098a8; /* 目次文字色 */

background-color: #fff; /* 目次背景色 */

}

.ideware.a-i.a-i_display a:hover {

color: #cc0033; /* 目次ホバー色 */

}

.ideware.a-i ul li {

list-style: none;

}

.ideware.a-i ul li.a-i_idx-level-1 {

margin-left: 0;

}

.ideware.a-i ul li.a-i_idx-level-2 {

margin-left: 15px;

}

.ideware.a-i ul li.a-i_idx-level-3 {

margin-left: 30px;

}

.ideware.a-i ul li.a-i_idx-level-4 {

margin-left: 45px;

}

.ideware.a-i ul li.a-i_idx-level-5 {

margin-left: 60px;

}

.ideware.a-i ul li.a-i_idx-level-6 {

margin-left: 75px;

}

.ideware.a-i ul li a {

cursor: pointer;

}

.ideware.a-i {

}

.a-i_title {

margin-top: 15px;

}

記事に目次を挿入する。

準備が出来たので、目次を記事に挿入する。
挿入方法例は以下。

挿入したい個所に以下のタグを記述する。

<div class="ideware a-i a-i_display"></div>

・使用するタグは<div>でも<p>でも構わない。
・class属性にはjavascript.jsの2行目で指定した属性を記述する。

挿入したい個所に以下のタグを記述する。

・使用するタグは<div>でも<p>でも構わない。

・class属性にはjavascript.jsの2行目で指定した属性を記述する。

挿入個所も1か所だけではなく、複数個所に挿入出来る。

複数個所に挿入出来るので、次の記事では画面右下の戻るボタンのホバーでツールチップの様に表示させる方法を記載する。