[暴満館] 2008年9月のエントリ

Home / Diary / 2008年9月のログ

目次を生成するWordPressプラグイン： Table of Contents for Markdown

目次を生成するWordPressプラグイン： Table of Contents for Markdown

細々と使ってきたけど、自分の環境では安定したようなので公開。

使い方
プラグインの設定
目次の生成について
目次用のCSS
使用上の注意

タイトルまんま。↑のような目次を表示するプラグイン。動作にはPHP Markdown Extraが必要。Wordpressのバージョンは低くても動くような気がしないでもない。

このサイトではWordpressのページ機能を利用した全てのページでは自動的に目次を生成しているのだが、個別ページではなく通常の投稿でもたまーに長い文章を書くときがあるので、そっちでも自動で目次生成してくれたら楽だな～、と思って作った。

toc_for_md.phps

使い方

テンプレートに埋め込んで全ての記事に目次をつけるか、特定の記事にのみ目次をつけるかのどちらかになる。

テンプレートに埋め込む

以下のコードをテンプレートの本文ループ内のどこかに挿入する。

<?php
$toc = new toc_for_markdown;
$toc->create_toc( $post->post_content );
echo $toc->tochtml;
?>

本文に見出しが存在する場合は目次を表示する。

記事に埋め込む

特定の記事にのみ目次を表示させたい場合は、記事本文内に以下のコードを挿入する。

 <!--TOC-->

 or

 <!--TOC min="2" max="3"-->

このコードは前後に文字を入れず、行の内容がこのコードだけになるようにすること。（そうしないとpre要素内に誤爆する）

minの値は取得する見出しの最低レベル、maxは最高レベル。省略した場合は予め設定された最低レベル・最高レベルで取得する。

目次を表示しない

テンプレートに埋め込んで常に目次を生成している場合に、特定の記事で目次を表示したくない場合は、以下のコードを記事本文に挿入する。挿入場所はどこでも構わないが、行の内容はこのコードだけにすること。

<!--disable TOC-->

プラグインの設定

$html_prefix: 目次の直前に追加するHTMLを指定する。
$html_suffix: 目次の直後に追加するHTMLを指定する。
$def_minlv: 取得する見出しの最低レベル。
$def_maxlv: 取得する見出しの最高レベル。
$toc_startcnt: 目次を生成する場合の見出しの最低数。見出しの数がこの値に満たないと目次が生成されない。テンプレートに埋め込んでいる場合にのみ有効。

目次の生成について

例えば以下のような文章があったとする。見出しと見出しの間には適当な文章が存在すると思いねぇ。

# タクティクスオウガ

## Chapter1

### 僕にその手を汚せというのか

## Chapter2

### 誰も僕を責めることはできない

### 思い通りにいかないのが世の中なんて割り切りたくないから

この文章を最低1最高2で目次にすると

<ul>
<li><a href="">タクティクスオウガ</a>
  <ul>
  <li><a href="">Chapter1</a></li>
  <li><a href="">Chapter2</a></li>
  <ul>
</li>
</ul>

このように、h1とh2だけ取得して目次を作成する。作成されたリストには見出しまでのリンクが付き、見出しにも適当なidが振られる。既にidが指定されていたらそのidへリンクするようにする。

Wordpressなら大抵本文のタイトルがh1だと思うので、h2からh3まで取得するのが丁度いいはずだ。h4まで取得すると目次が冗長になってしまう可能性がある。そこら辺は本文によって変えるといいだろう。

目次用のCSS

このCSSを適用することでこの記事トップの見出しにようにそれっぽく見えるようになる。見出しのHTMLはMarkdownを利用して生成しているのでidやclassを振ることができない。プラグインデフォルトのようにdivあたりで囲んでやるとよい。

.index ol {
counter-reset : list;
}
.index ol li {
list-style-type : none;
}
.index ol li:before {
content : counters( list, "." ) ". ";
counter-increment : list;
}