{
  "$type": "site.standard.document",
  "canonicalUrl": "https://blog.nove-b.dev//posts/javascript-wordpress-insert-toc",
  "path": "/posts/javascript-wordpress-insert-toc",
  "publishedAt": "2021-11-30T00:00:00.000Z",
  "site": "at://did:plc:2atly2y5kfyjcj5zap6pv4wd/site.standard.publication/3mmxeqr2tcb2k",
  "tags": [
    "javascript",
    "技術公開",
    "脱プラグイン生活"
  ],
  "textContent": "記事に目次をつけよう\n\n目次があれば、結末まですぐに飛ぶことができる。\n\n時間に追われる現代人にはなくてはならない機能である。\n\nそこで本サイトに目次を導入した。\n\nプラグインは使いたくないよう\n\n個人的にプラグインには頼りたくない。\n\n理由はシンプルで楽しくないからである。\n\nどうせ作るなら自分自身の力で作成したい。\n\nなので今回も自作した。\n\n目次を挿入するための考え方\n\nやりたいことはページが開かれた時に記事に目次を挿入する。\n\nで、対象はh2タグとh3タグとする。\n\nつまり、記事内にh2タグとh3タグがあるかを判定し、あればそれに対応する目次を挿入する。\n\n実現コードはこちら\n\n前提として記事内に、\n\nという要素を書いておく必要がある。\n\n実現コードを書き下してみる\n\n事前に必要な情報を定義する\n\nまずは諸々定義する。\n\nIDに連番を振るので、基準の数字。\n\n記事内にある、h2タグとh3タグ。\n\n連番IDを付与する\n\n事前に定義した情報をもとにh2タグh3タグに連番IDを振る。\n\nIDを振った要素を取得する。\n\n対象を目次に挿入していく\n\nまず、挿入する要素を取得する。\n\n次に先ほど取得したtagertが、H2であればh2に紐づくHTMLを。\n\nH3であればh3に紐づくHTMLをどんどん挿入していく。\n\nクリック時に対象要素にスクールする\n\n上記はヘッダーの高さを取得しているので、そこは適宜変更してほしい。\n\n技術を書く技術がない\n\nうーん。\n\n色々書いたが、うまく伝えられない。\n\n考え方さえわかれば難しくないと思うので、挑戦してみてほしい。\n\nわからなければコメントを残してもらえれば個人的に解説をするので、どんどんコメントしてください。",
  "title": "JavaScriptを使用してWordpressの投稿に目次を挿入する"
}