【WordPress】見出しから目次を自動生成。プラグイン不要！コピペでOK

ブログ記事で目次を自動的に見出しから生成する方法を紹介します。WordPressプラグインは使わないで、自力でJavaScriptで設置してみました。

ゆめぴょんです。こんちはっ(^^)/

私のブログでは文字数の多い記事もあるため、目次を設置したいと思ってました。一時期WordPressプラグインを用いて設置していましたが、意外と簡単に自前設置できるので制作してみました。

目次は上に表示されていると思います。クリックするとゆっくりとその見出しまでスクロールしていきます。読者にも便利なナビゲーションになります。

今回は「WordPressプラグインはずし特集」の第8弾です。今までの特集記事は全て下のリンクにまとめています。

今回、不要になるWordPressプラグイン

これまた昨年くらいから、いろんなブログで紹介されている有名プラグイン「Table of Contents Plus」です。

いろいろ設定できるのはいいのですが、機能を絞りたい私にとっては多機能すぎました。シンプルにまとめたかったので自作しました。

ただこのWordPressプラグインもよくできているので、かなりオススメです。下のブログでも紹介されているので参考にしてください。

私が今回設置した目次プラグラムの特徴は次のとおりです。

基本的には元の記事や見出しタグは、何も修正する必要がありません。ただ目次を表示したい場所には、1行加える必要があります。下で説明します。

目次で表示している見出しへのリンクが、Google検索結果に表示される可能性もあります。下記事を参考にしてください。私のブログでは設置から間がないからか、まだ表示されていません。

(2014.4.3追記)この記事のようにJavaScriptで追加した目次では、Google検索結果に反映されない可能性があります。私の方でも様子を見てコードの修正を検討してみます。

テーマファイルを編集します。WordPressで最重要ファイルです。修正前には必ずバックアップをとってください。もし問題が起こったらすぐ元に戻してください。全て自己責任でお願いします。

下のコードをテーマファイルの好きな箇所にコピペするだけです。特に問題がなければ「footer.php」など最下段の</body>（閉じタグ）の直前の方が高速表示も妨げません。

[html]

[/html]

27行目で「jQuery」を読み込んでいますが、重複する場合は行ごと削除してください。重複を確かめる方法は、あなたのブログを表示させて、ソースから「jquery」を検索すればわかります。

上コードは、CSS（スタイルシート）とJavaScriptのパートに分かれています。テーマ編集に慣れている人は、CSSは「style.css」へ、JavaScriptは外部ファイルへ移した方がより効率的です。

もちろんCSSはあなたのブログにあう仕様に変更してください。スクロール速度も61行目で自由に変更可能です。スムーススクロールについては過去記事でも紹介しています。

あとは目次を表示したい記事に、下コードをコピペするだけです。

[html]

[/html]

過去記事にも目次を表示したいのに記事数が多すぎる場合は、1つ1つ編集するのは面倒です。

「こんちはっ！」みたいな冒頭の挨拶が決まっているなら、下のプラグインを使って一括置換するのがおすすめです。例えば下のような感じです。

■置換前：こんちはっ！
■置換後：<div id=”toc”></div>こんちはっ！（”は入力しなおしてください）

WordPressの一括置換に便利なプラグイン「Search Regex」については、下記事を参考にしてみてください。

今回の記事内容をざっくり言うと。

ゆめぴょんでした。ちゃおっ！