使いどころ

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;
		}

参考にしたサイト

• https://seous.info/wp-customize/2041