使いどころ

WordPressではプラグイン「Table of Contents Plus」を使えます。でも、Table of Contents Plusはカスタムフィールドに記述したHタグを拾うことが出来ませんでした。

jQueryを使った以下の方法だとカスタムフィールドのHタグも拾ってくれたので、基本的にこの方法でいくほうがら便利かな。

ソース

jQuery

jQueryを読み込んだうえで、headやcommon.jsや個別ファイルに以下を記述する。

jQuery(function(){// H2タグから目次を自動生成
var idcount = 1;
var toc = '';
var currentlevel = 0;
jQuery("article h2,article h4:header",this).each(function(){
this.id = "chapter-" + idcount;
idcount++;
var level = 0;
if(this.nodeName.toLowerCase() == "h2") {
		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 + '">' + jQuery(this).html() + "<\/a><\/li>\n";

});
while(currentlevel > 0) {
	toc += "<\/ol>";
	currentlevel--;
}
jQuery("#toc").html(toc);
});

HTML

目次を表示したい場所に、以下を記述する。

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

css

目次のデザインはお好みで。

	#toc {
		padding:10px 0 5px;
		margin-bottom: 20px;
		background: #efefef;
		border-radius: 10px;
		}

		ol.chapter {
		display:block;
		font-size:14px;
		padding:3px 20px;
		}

		ol.chapter li {
		list-style:circle;
		}