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

WordPressブロックエディタで、記事の目次を作成する方法です。
目次の項目がリンクになっていて、クリックするとその箇所に飛べる仕組みのものですね。
プラグインは使わず、ブロックエディタに備わっている「HTMLアンカー」をいう機能を使ったやりかたです。
作りかた
記事の見出しをリストにする
まずは、記事を全部書いてしまいましょう。
そして、記事冒頭にリストタグを追加。リストの項目に、記事に振った見出しを並べます。


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

この例では、見出しが「桃太郎の誕生」なので、「birth-momotaro」としてみます。
自分が分かりやすければOKです。

こちら正確にはid属性と呼ばれるもので、一応どんな文字を使っても問題はないようですが、半角英数字、記号はハイフン・アンダースコア・コロン・ピリオドを使っておくのが良いと思います。
目次にHTMLアンカーのリンクを貼る
次に、先ほどリストで作った目次の同じ項目「桃太郎の誕生」を選択して、「リンク」をクリックします。

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

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

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

WordPressに時間を取られすぎていませんか?
「ブログやるなら、HP持つならWordPress!と聞いて始めたけれど『これどうやるの?』のオンパレード。分からなくてググってみれば『下手なカスタマイズはサイトが真っ白になります』『ハッキングされるかも?』って、何それ?!なんかもういいや‥」
‥というあなたへ朗報です!
WordPressブログに関するトラブル解決の専門家「ブログサポーターがみたか」さんが提供されているサービス
が助けてくれます。
WordPressのトラブル対応やカスタマイズにお強く、これまでのべ1,000件以上の解決実績をもとに
- 使い方が分からない
- カスタマイズしたい
- ブログ運用の仕方、WordPressの使い方が間違っていないか不安
- ハッキングに遭ってしまった‥
などさまざまな要望・問題に、丁寧迅速に対応してくださいます(がみたかさんは10年近く前から存じ上げていますが、本当に丁寧で優しいです)
ブロガーさんなら記事を書くこと、事業者さんなら本来の業務が時間を割くべきことで、「WordPress、これどうやるの?」とググって悩んでいるのは時間の無駄です。
きちっと必要な部分には投資をして”餅は餅屋”に任せ、できた時間でしっかり本業に集中し、より大きな収益を生みましょう。
安心して、快適にサイトを運営するために、ぜひ活用してください。