ゆめぴょんの知恵ゆめぴょんの知恵
サイト制作、WordPressカスタマイズ、無料アプリ紹介など。海外旅行135ヶ国。知識を知恵にするブログ!

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

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

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

ゆめぴょん(@yume_pyon)です。こんちはっ!

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

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

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

WordPressで13プラグインを減らして高速化する方法まとめWordPressで13プラグインを減らして高速化する方法まとめ105 shares

WordPressプラグインは便利ですが、多用しすぎると高速化を阻害する要因にも…

今回、不要になる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>(閉じタグ)の直前の方が高速表示も妨げません。

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

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

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

コピペでOK!スムーススクロールでページ内リンクやトップへ移動!#なしでコピペでOK!スムーススクロールでページ内リンクやトップへ移動!#なしで24 shares

記事が長い場合、目次やページ先頭「#」へのページ内リンクはとても便利です。しかも…

目次を表示する位置に挿入するコード

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

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

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

■置換前:こんちはっ!
■置換後:<div id=”toc”></div>こんちはっ!(”は入力しなおしてください)

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

【WordPress】Search Regexプラグインは一括検索や置換で過去記事を活用できる【WordPress】Search Regexプラグインは一括検索や置換で過去記事を活用できる

WordPressプラグイン「Search Regex」は、ブログ記事の内容・タ…

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

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

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

次回の記事は「ウェブ制作に役立つチップ」の予定です(^^)。更新を見逃さないためにも、 feedlyの登録をおすすめします(^^)/

ゆめぴょん(@yume_pyon)でした。ばいちゃお! こてっZzz

«前記事:【WordPress】パンくずリスト設置方法!プラグイン不要。複数カテゴリから選択可に【WordPress】OGPとTwitterCardsの設置方法!プラグイン不要でコピペでOK:次記事»
ページ
↑先頭
ホーム