WordPressの目次、プラグインなしで作れます｜zip配布あり

「WordPressで目次を付けたい」——そう思ったとき、多くの人はまずプラグインを探します。実際、便利なものがたくさんあります。でも、ちょっと待ってください。その目次、プラグインを入れなくても作れます。

今回は、AIに相談してつくった「目次」のお話です。

なぜ「プラグインを入れない」目次にしたのか

目次プラグインは、探せばいくらでも見つかります。どれも高機能で、よくできています。でも、実際に使ってみると、こんなことを感じるかもしれません。

• 設定項目が多すぎて、どこをいじればいいのか分からない
• 使わない機能まで、たくさん付いてくる

この3つだけあれば十分。それなら、必要な分だけを自分で作ったほうが、かえってすっきりする。そう考えて、AIに相談しながら、自分専用の目次を作ることにしました。

「プラグインを自作するなんて大変そう」と思うかもしれませんが、やりたいことがはっきりしていれば、意外とすんなり形になります。その頼み方や考え方は、別の記事にまとめてあります。

PHPが書けなくても大丈夫｜AIと作る「自分だけの」WordPressプラグインここまでのカスタマイズで、フォントを変えたり、囲みボックスを作ったり、少しずつ「自分の手で整える」感覚が育ってきたと思います。いよいよ最後は、その集大成。 「自…

この目次がやってくれること（完成イメージ）

この目次は、記事に置いておくだけで、こんなふうに働いてくれます。

• 見出しを自動で拾う
  記事の中の見出し（H2）を自分で探し出して、目次を組み立てます。こちらで一覧を手入力する必要はありません。
• クリックで開いたり閉じたり
  目次は最初たたまれた状態。「目次」の文字を押すと、するっと開きます。▶マークが、くるっと回って下を向くのが、ちょっとかわいいポイントです。
• 短い記事では、しゃしゃり出ない
  見出しが2つに満たない記事では、目次を自動で出しません。「見出し1個だけなのに、大げさな目次が付く」——そんな不格好を、自分で避けてくれます。
• 記事ごとに、切り替えられる
  編集画面に専用のスイッチが付いていて、「この記事は目次オフ」「この記事はH3まで細かく出す」を、記事ごとに選べます。

仕組みをざっくり（雰囲気だけ）

「自動で目次ができる」と聞くと、なんだか難しそうに思えます。でも、やっていることは、実はとてもシンプルです。3つの動作に分けると、こうなります。

1. 探す … 記事の本文から、見出し（H2）をぜんぶ見つけ出す
2. 並べる … 見つけた見出しを、上から順にリストにする
3. 差し込む … できたリストを、記事のいちばん上に置く

「探して、並べて、差し込む」。たったこれだけです。人間が手でやっていたら面倒な作業を、代わりに黙々とやってくれている——そんなイメージです。

もうひとつ、目次には「押すとその場所へ飛ぶ」しかけがあります。これも、種を明かせば単純です。目次を作るとき、それぞれの見出しにこっそり目印を付けておくのです。そして目次のリンクに「あの目印まで飛んでね」と行き先を教えておく。だからクリックひとつで、読みたい場所へジュンプできるわけです。

なお、「記事ごとにオン・オフを切り替えるスイッチ」。あれはメタボックスというしくみで作っています。編集画面に、本文とは別の「専用の入力欄」を足す機能です。
このメタボックスをはじめ、WordPressの「構造」を自分で作る話は、別の記事でまとめています。

WordPressの「構造」を自分で作る｜投稿タイプ・タクソノミー・メタボックスの3点セットこれまで、テーマの「見た目」を自分で整える方法を、いろいろとお話ししてきました。色、文字の大きさ、囲みのデザイン——壁紙や家具を選ぶような、たのしいカスタマイズ…

仕組みの話は、これくらいで十分です。「へぇ、そんなふうに動いているんだ」——そう思ってもらえたら、もうバッチリです😊

使い方は「入れるだけ」（zip配布）

ここからは、実際にこの目次を使う手順です。とはいえ、やることは「入れるだけ」。3ステップで終わります。

• zipファイルをダウンロードする
  下のボタンから、目次プラグインのzipファイルを保存してください。解凍（展開）は不要です。zipのまま使います。
• WordPressにアップロードする
  管理画面の「プラグイン → 新規追加 → プラグインのアップロード」を開き、さっきのzipファイルを選びます。
• 「有効化」ボタンを押す
  アップロードが終わったら、「有効化」をクリック。これで完了です。

たったこれだけで、準備は終わりです。あとはいつもどおり記事を書くだけ。見出し（H2）を2つ以上入れておけば、記事の頭に目次が自動で表示されます。

もっと自分好みにしたい人へ

この目次、そのままでも十分使えますが、「枠の色を変えたい」「もう少し余白がほしい」と思ったら、あとから自由に調整できます。my-toc.css を1か所いじれば、過去に表示した全記事の目次が、いっせいに新しい見た目に変わります。この「大元をひとつ直すだけ」という身軽さこそ、自作プラグインのいちばんおいしいところです。