Easy Table of Contents

あまり必要ではないかなーと思っていたんだけど、たまに長い記事を書く事もあるので
自動で目次を作成してくれるプラグイン Easy Table of Contents を追加しました
cssで見た目を変更していますが、アイキャッチ画像(画像元はLink Libraryページ)が
目次を表示させた所です

設定画面

インストール、有効化後の設定はメニュー 設定 から

一般設定で主な条件、サポートや自動挿入ページなどを設定します

外観の設定で表示する見た目の変更

高度な設定画面でどの見出しを使うかや除外する見出しなどが設定できます
各種設定をしたら保存を押して完了です
設定した表示条件以上の見出しがあれば、表示させたい場所に指定した場所へ自動で挿入されます

cssで見た目の変更

ちょっとプラグインのcssを使った見た目を変更したかったので
設定で読み込ませないようにし、自分でテーマのstyle.cssへ以下を追加して変更しました

#ez-toc-container {
    font-size: 16px;
    background: #f9f9f9;
    border: 1px solid #aaa;
    border-radius: 4px;
    -webkit-box-shadow: 0 1px 1px rgba(0, 0, 0, 0.05);
    box-shadow: 0 1px 1px rgba(0, 0, 0, 0.05);
    display: table;
    margin-bottom: 1em;
    padding: 10px;
    position: relative; left: 50px;
    width: auto;
}
ul:not(.ez-toc-list) {
    font-size: 80%;
    line-height: 1.6em;
}
#ez-toc-container ul ul,
.ez-toc div.ez-toc-widget-container ul ul {
    margin-left: 1.5em;
}
#ez-toc-container ul,
#ez-toc-container li {
    margin: 0;
    padding: 0;
}
#ez-toc-container ul,
#ez-toc-container li,
#ez-toc-container ul li,
.ez-toc-widget-container,
.ez-toc-widget-container li {
    background: none;
    line-height: 1.8;
    margin: 0;
    overflow: hidden;
}
.ez-toc-title-container {
    display: table;
    width: 100%;
    font-family: 'Raleway', sans-serif;
}
.ez-toc-title {
    font-size: 24px;
    background-color: #e0e0e0;
    text-align: center;
    margin: -3px -5px;
    padding: 5px 0 0;
}
.ez-toc-title-toggle {
    text-align: left;
    vertical-align: middle;
}
#ez-toc-container div.ez-toc-title-container + ul.ez-toc-list {
    margin-top: 1em;
}
.ez-toc-wrap-left {
    float: left;
    margin-right: 10px;
}
.ez-toc-wrap-right {
    float: right;
    margin-left: 10px;
}
#ez-toc-container a:hover {
    color: #00abdd;
    text-decoration: underline;
}
#ez-toc-container.counter-hierarchy ul,
.ez-toc-widget-container.counter-hierarchy ul,
#ez-toc-container.counter-flat ul,
.ez-toc-widget-container.counter-flat ul {
    counter-reset: item;
}
#ez-toc-container.counter-numeric li,
.ez-toc-widget-container.counter-numeric li {
    list-style-type: decimal;
    list-style-position: inside;
}
#ez-toc-container.counter-decimal ul.ez-toc-list li a::before,
.ez-toc-widget-container.counter-decimal ul.ez-toc-list li a::before {
    content: counters(item, ".") ". ";
    counter-increment: item;
}
#ez-toc-container.counter-roman li a::before,
.ez-toc-widget-container.counter-roman ul.ez-toc-list li a::before {
    content: counters(item, ".", upper-roman) ". ";
    counter-increment: item;
}

リスト表示部分で除外を使っているんだけど、一部リスト表示にも影響が出ちゃってます
そこまで見た目がおかしくなってる訳じゃないので放置してます(；・∀・)

おわり

基本的な設定(サポート、挿入、表示条件など)をしておけば、あとは自動で追加してくれます
自分で書くにはかなり面倒ですからね、これは便利です
目次が必要ない記事の場合は、見出しを設定した条件以下にしたり
投稿編集画面にも設定する所があるので、記事毎に柔軟に調整する事も出来ます
目次挿入プラグインを探している人はお試しあれ

[share]

【LINK】
wordpress.org：
Easy Table of Contents