(記事内リンクにPR含む場合があります)

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

目次プラグインが不要にと指摘する女性 WordPressテーマ作成

目次プラグインが不要にと指摘する女性

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

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

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

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

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

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

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

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

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

【WordPress】ブログ記事や固定ページに目次をつける便利なプラグイン「Table of Contents Plus」 – cocowa
h2やh3等の見出しから自動的に目次を作ってくれるプラグイン「Table of Contents Plus」が時間短縮かつ親切でとてもよい! | frasm

設置する目次プログラムの特徴

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

  1. h2、h3などの見出しタグから自動的に目次を生成
  2. 目次はh2、h3…の順番で階層表示
  3. 目次をクリックすると、見出しまでスムーススクロール
  4. 目次クリックしても、URLに「#」を残さない

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

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

WordPressで目次を自動生成してくれるプラグイン「TOC」を導入すると、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」については、下記事を参考にしてみてください。

まとめ:今日のゆめぴょんの知恵

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

  • ブログ記事の目次は、読者にも便利なナビゲーションになる
  • プラグイン「Table of Contents Plus」が不要になる
  • 特徴は見出しから自動生成、階層表示、スムーススクロール、#なしURL
  • 目次プログラムは、コピペだけで設置できる
  • 大量な過去記事への目次設置は「Search Regex」なら一瞬で完了

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

タイトルとURLをコピーしました