目次の自動作成

Javascript
	<?php if ( is_single() ) : ?>
		<nav id='table_of_contents'></nav>
		<script>
		document.addEventListener('DOMContentLoaded', function(){
			var count = 1;
			var toc = '<ol>';
			var h2 = document.querySelectorAll('article h2');
			
			for ( var i = 0; i < h2.length; i++ ) {
				// 各H2タグにIDを設定する
				h2[i].id = 'chapter' + count;
				// 目次に項目を追加する
				toc += '<li><a href="#chapter' + count + '">' + h2[i].innerHTML + '</a></li>\n';
				count++;
			}
			toc += '</ol>';
			
			if ( h2.length > 0 ) {
				document.getElementById('table_of_contents').innerHTML = '<div>目次</div>' + toc;
			}
		});
		</script>
	<?php endif; ?>
BACK