WordPressでの目次の作り方（プラグインなしでHTMLアンカーを使用）

WordPressブロックエディタで、記事の目次を作成する方法です。

目次の項目がリンクになっていて、クリックするとその箇所に飛べる仕組みのものですね。

プラグインは使わず、ブロックエディタに備わっている「HTMLアンカー」をいう機能を使ったやりかたです。

作りかた

記事の見出しをリストにする

まずは、記事を全部書いてしまいましょう。

そして、記事冒頭にリストタグを追加。リストの項目に、記事に振った見出しを並べます。

見出しに「HTMLアンカー」を設定

次に見出しを選択して、「高度な設定」→「HTMLアンカー」に任意の文字を入力します。

この例では、見出しが「桃太郎の誕生」なので、「birth-momotaro」としてみます。

自分が分かりやすければOKです。

こちら正確にはid属性と呼ばれるもので、一応どんな文字を使っても問題はないようですが、半角英数字、記号はハイフン・アンダースコア・コロン・ピリオドを使っておくのが良いと思います。

目次にHTMLアンカーのリンクを貼る

次に、先ほどリストで作った目次の同じ項目「桃太郎の誕生」を選択して、「リンク」をクリックします。

リンク先のURL入力欄が出てきますので、そこに#マークを付けてから、先ほど見出しに設定したHTMLアンカー「birth-momotaro」と入力します。

#birth-momotaroと、#マークを忘れないでください。

これで目次と見出しが紐づいて、目次をクリックすれば「birth-momotaro」の見出しまでリンクしてくれる、という仕組みが出来上がりました。

あとは、すべての目次リストと見出しを同じ手順で紐付ければ完成です。