wordpressでプラグインなしで目次を作成する方法

2016/08/13 2016/11/13

WordPressでよく使われる目次

wordpressを使った記事を見てみると、目次を使ったページをよく見かけると思います。

その目次のほとんどは「Table of Contents Plus」というwordpressのプラグインを使用して自動的に生成されたものです。

とても便利で見栄えがよく、多くのユーザーに愛用されていますが、このプラグインにもデメリットが２つありました。

１つ目はプラグイン導入による負荷。これはどのプラグインにも言えますが、基本的に導入するプラグインは少ない方が少ないだけ良いです。

２つ目・・・これが私に取って一番大きかったのですが、h2〜h6タグを見て、過去記事なども含めて動的に目次を生成してしまう点です。

昔からちゃんとh2〜h6の階層を意識しながら記事を書いていた人には関係ないですが、私の場合昔の記事だと、知識がなかったこともあり階層がぐちゃぐちゃになってる記事も多かったです。同じ様な境遇の人も少しはいるのではないでしょうか。

もちろん、SEO的にも良くないのでなおすべきなんですが、いかんせんなおすのはめんどくさい。

また、そもそも私のブログの場合、目次を必ずしも必要としない記事も多く、プラグインを導入するまでもないかのではと考えました。

なので、このプラグインは導入せず、目次が必要な記事にのみ手動で目次を挿入することにしました。

html、CSSの知識があまりないのでシンプルですがこのような形に。

全て手作業で作成すると味気ないので、excelやgoogle spreadsheetなどで関数を使用して、少しでも自動化・・・。

太字部分をすべてコピーしA1セルに貼付けるとC列、D列に目次・本文のソースコードが出てきます。あとは、A列、B列を適宜修正してから、wordpressの「テキスト」（ビジュアルではない）にコピペ。

更に目次部のコードを「<ol style=”padding-left: 50px;”>（目次部）</ol>」で囲ってあげることによってこのような感じに。

シンプルすぎではありますが、更に線で囲ったりとか少しするだけで見栄えが良くなるかなあと。

当たり前ですが、プラグインなしでも簡単に目次は作成できます。プラグインを使用することで、重くなってしまうリスクも考えると出来る限りプラグインに頼らないでこれからもサイト運営をしようとおもいました。