このページでは、jQueryでH2タグをひろい、自動で目次を表示しています。目次にはアンカーリンクがつきます。
↓自動で表示している目次
使いどころ
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;
}