WordPress 目次を自動生成する方法

WordPressで目次を自動生成する方法です。使用テーマはBizVektorです。

子テーマ内に｢footer.php｣ファイルを作る

① 親テーマ内にある｢footer.php｣をコピーします。

② 子テーマ内に｢footer.php｣をペーストします。

子テーマの｢footer.php｣にコードを追記する

① ｢外観｣｢テーマの編集｣を選択します。

② ｢子テーマ｣｢footer.php｣を選択します。

③ 次のコードを追記します。追記する場所は、最下段の</body>（閉じタグ）の直前がよいそうです。

<style type=”text/css”>
#toc {
margin: 0 auto;
width: 90%;
background: #f0f0f0;
}
.mokuji_wrap {
position: relative;
border: 2px solid #888888;
border-radius: 4px;
padding: 1em 0.5em 0.5em 0.5em;
margin: 48px auto;
}
.mokuji {
color: #666666;
text-align: center;
font-size: 18px;
}
#toc ol {
border: 0;
font-size: 11px;
font-size: 1.0rem;
}
#toc li {
line-height: 1.2
}
</style>
<script src=”//ajax.googleapis.com/ajax/libs/jquery/2.0.3/jquery.min.js”></script>
<script type=”text/javascript”>
$(function() {
var idcount = 1;
var toc = ”;
var currentlevel = 0;
$(“.entry-content :header”,this).each(function(){
this.id = “toc_” + idcount;
idcount++;
var level = 0;
if(this.nodeName.toLowerCase() == “h3”) {
level = 1;
} else if(this.nodeName.toLowerCase() == “h4”) {
level = 2;
} else if(this.nodeName.toLowerCase() == “h5”) {
level = 3;
} else if(this.nodeName.toLowerCase() == “h6”) {
level = 4;
}
while(currentlevel < level) {
toc += “<ol>”;
currentlevel++;
}
while(currentlevel > level) {
toc += “</ol>”;
currentlevel–;
}
toc += ‘<li><a href=”#’ + this.id + ‘”>’ + $(this).html() + “<\/a><\/li>\n”;
});
if(toc){ toc = ‘<div class=”mokuji_wrap”><div class=”mokuji”>目次</div>’ + toc + ‘</div>’; }
$(“#toc”).html(toc);
//ページ内リンク#非表示。加速スクロール
$(‘a[href^=#]’).click(function(){
var speed = 1000,
href= $(this).attr(“href”),
target = $(href == “#” || href == “” ? ‘html’ : href),
position = target.offset().top;
$(“html, body”).animate({scrollTop:position}, speed, “swing”);
return false;
});
});
</script>

memo

wrap	基本枠
position	配置
border	枠線
border-radius	角丸
padding	枠線内の余白
margin	枠線外の余白
ol ul	番号付リスト並列列挙リスト
li	リストの構成項目
line-height	行間