Sorairo

WordPressの記事中にプラグインなしで目次を追加しました。

テーマを自作してからも少しづつ機能を追加しているんですが、今日は、記事中にプラグインなしで目次を追加しましたので参考にした記事とともにご紹介します。

advertisement

完成形

今回の完成形は以下の画像の通りです。

実装したかった機能

目次を作成するにあたって実装したかった機能がいくつかありました。

  1. 見出しタグ(h2h3など)から自動的に作成する
  2. ページ内リンクはスムーススクロールさせたい
  3. 過去記事にも自動的に挿入したい(新たに編集する必要がないようにしたい)

以上のイメージでググってみた結果、いくつか参考になりそうな記事が出てきました。

参考にした記事

その中で実際に参考にしたのは以下の記事です。

実装方法

詳細は上の記事を読んでいただくとして、当ブログでの実装方法を記しておきます。

jQuery

最初にjQueryファイルを作成します。
ファイル名はtoc.jsとしました。
目次を英訳したTable of contentsの頭文字を取った略字ですね。
中身は以下の通りです。

ポイントは5行目の

なんですが、ここで見出しタグのh2h3を指定する際に、当ブログでは.post_body内にある見出しタグだけを拾いたいので、見出しタグの前に.post_bodyを付しています。
この辺はご自身のサイトに合わせて拾うべき見出しタグの指定を行ってください。
下の方にはスムーススクロール等の記述があります。
このファイルを保存し、サーバーにアップします。
当ブログではテーマディレクトリのjsフォルダ内にアップしました。

HTML

続いては、先ほどアップしたtoc.jsをHTMLで呼び出します。
任意の場所に以下を追加します。

もちろんjQuery本体も呼び出しといてください。
ここまで順調にいけば、もう少しです。
最後は記事中に以下のようにコードを記載すればその箇所に自動的に目次が表示されます。

CSS

ご参考までに当ブログで指定しているCSSを記載しておきます。

入れ子リストの番号表示の指定ってCSSでできるんですね。
勉強になりました。

最初のh2直前に自動的に表示させる

ここまででも十分なんですが、上記のままだと今後もそうですが過去記事も一つ一つ編集を加えないといけませんので大変です。
そこでWordPressの万能神であるfunctions.php様に以下のように追加します。

これだけで、記事中の最初に出てくるh2タグの直前に目次を自動的に表示してくれますので、過去記事も編集なしでオッケーです。

最後に

いかがでしたでしょうか。
ショートコードを使って自分の好きな位置に挿入する方法でもいいんですが、それだと挿入し忘れたりするのでやっぱり全自動がいいですよね。
あと欲を言えば表示、非表示のボタンを付けたいかなと思っています。
これもできそうっちゃできそうなので時間があればやってみます。

※H30.7.7追記
ボタンは付けてないけど開閉式にしました。

「CONTENTS」の部分をクリックすることで開いたり閉じたりします。
分かりにくいけど果たしてそこまで開閉式が必要かなとも思い始めたので、あえて分かりにくくしました(笑)
実装方法は別記事でご紹介します。

advertisement

related posts

WordPressの記事中に内部リンクと外部リンクを出力するショートコード

WordPressの内外部リンクについてショートコードを実装してみましたのでご紹介します。

今日からまた、WordPress始めます。

心機一転、新たにブログを書き始めます。iPhoneを購入して一変した私の人生を記録していければと思っています。

jQueryを使って記事中の目次を開閉式にしました。

目次が開閉式だとどんなメリットがありますかね。表示領域が広がるくらいですか。

私のブログ更新作業環境まとめ。

ブログを書く環境って大事ですよね。継続することの難しさはその環境のせいもあるかもしれません。

ブログのカテゴリーを見直してみました

新しいテーマに変更しましたので、ついでにカテゴリーも見直してみました。

WordPressのテーマをLION MEDIAに変更しました。

WordPressのテーマをLION MEDIAに変更しましたのでご紹介します。

テーマを自作する〜その③〜アイキャッチ画像に関するあれこれの2回目。

WordPressのアイキャッチ画像に使える写真サイトの紹介と、キャプション表記についてのコツについてご紹介します。

初めての有料テーマ「ALBATROS」を購入しました!

初めて有料のWordPressテーマを購入しました。有料なだけあってデザインもいいし機能満載でブログ執筆意欲を掻き立てられます。

テーマを自作する〜その②〜アイキャッチ画像に関するあれこれの1回目。

テーマを自作するシリーズの第2回目は、WordPressでアイキャッチ画像を使えるようにするために必要なことについて調べてみました。

テーマを自作する〜その①〜投稿日などの日付表示を英語表記にする方法。

WordPressのテーマを自作するにあたり、色々な壁にぶつかります。その解決法について自分の忘備録も兼ねてシェアしていきたいと思います。