WordPress目次の作り方｜プラグインなしで手動作成する方法を実画面で解説

WordPress目次を作りたいけれど、「目次用のプラグインを増やしたくない」「自分で設定する方法が分からない」と迷っていませんか？

WordPressの標準ブロックだけでも、目次から各見出しへ移動できるリンクを作れます。必要なのは、リストブロックとHTMLアンカー、ページ内リンクの設定です。

この記事では、実際のWordPress画面を使って、プラグインなしで目次を手動作成する方法を順番に解説します。

さらに、各見出しから目次へ戻れる「↑ 目次に戻る」ボタンまで設定し、公開画面でリンクが正常に動くところまで確認します。

目次

• WordPress目次はプラグインなしでも作れる
• WordPressで目次を作る手順
• 「↑ 目次に戻る」ボタンを作る方法
• HTMLアンカーを設定するときの注意点
• 目次とページ内リンクの違い
• プラグインを使う方法との違い
• まとめ

WordPress目次はプラグインなしでも作れる

WordPressの目次は、専用プラグインを使わなくても作れます。

たとえば、見出しにHTMLアンカーとして「example」という名前を設定した場合、目次側のリンク先には「#example」と入力します。

これで、目次の文字をクリックすると同じページ内の指定した見出しへ移動できます。

今回はこの仕組みを使って、目次だけでなく、各見出しから目次へ戻れるボタンも作ります。

WordPressで目次を作る手順

ここからは、WordPressの標準ブロックだけを使って目次を作る手順を、実際の画面で順番に説明します。

目次にHTMLアンカーを設定する

まず、目次の見出しを選択します。

右側のブロック設定から「高度な設定」→「HTMLアンカー」を開き、「toc」と入力します。

この「toc」が、あとで各見出しから目次へ戻るための移動先になります。

リストブロックで目次項目を作る

次に、目次へ表示する項目を作ります。

ブロック追加ボタンを押し、「リスト」と検索してリストブロックを追加します。

リストブロックを追加したら、記事内のH2見出しを目次に表示したい順番で入力します。

この時点ではまだ文字を並べただけなので、クリックしても見出しへ移動しません。

各見出しにHTMLアンカーを設定する

次に、目次から移動する先となる各H2見出しへHTMLアンカーを設定します。

見出しを選択し、右側の「高度な設定」→「HTMLアンカー」へ、その見出し専用の名前を入力します。

たとえば「あいうえお」という見出しに「aiueo」と設定した場合、この「aiueo」が目次から移動するときの目印になります。

目次項目から見出しへリンクする

見出し側のHTMLアンカーを設定したら、目次の文字と見出しをつなぎます。

目次の対象文字を選択してリンクボタンを押し、リンク先に「#アンカー名」を入力します。

先ほど見出し側に「aiueo」と設定した場合は、目次側では「#aiueo」と入力します。

公開画面で目次リンクを確認する

目次を設定したら、プレビューまたは公開画面で目次の項目を実際にクリックし、設定したH2見出しへ正しく移動できることを確認します。

正しい見出しへ移動できれば、目次リンクの設定は完了です。

「↑ 目次に戻る」ボタンを作る方法

記事が長くなると、見出しまで移動したあとに目次へ戻りたくなることがあります。

その場合は、各H2の下に「↑ 目次に戻る」ボタンを置いて、目次見出しへ戻れるようにしておくと便利です。

今回は、最初に目次見出しへ設定したHTMLアンカー「toc」を使います。

ボタンに「#toc」を設定する

「↑ 目次に戻る」と入力したボタンを選択し、リンク先に「#toc」を設定します。

これで「↑ 目次に戻る」ボタンをクリックすると、記事内の目次まで戻れるようになります。

目次へ戻るボタンは必須ではありませんが、見出し数が多い記事では読者が別の項目へ移動しやすくなります。

設置する場合は、公開前に実際にクリックして目次へ戻れることを確認してください。

HTMLアンカーを設定するときの注意点

HTMLアンカーは、目次やページ内リンクの移動先を指定するための名前です。

設定自体は簡単ですが、アンカー名の付け方を間違えると、リンクをクリックしても目的の見出しへ移動できません。

• 同じページ内で同じアンカー名を重複させない
• アンカー名にスペースを入れない
• 見出し側では「#」を付けない
• リンク元では「#アンカー名」の形で指定する

WordPress公式でも、ページ内リンクを設定するときはHTMLアンカーとリンク先を対応させる方法が案内されています。

WordPress公式｜ページ内リンク（ページジャンプ）の設定方法

目次とページ内リンクの違い

目次とページ内リンクは、どちらも同じページ内の指定した場所へ移動する仕組みですが、使い方が少し違います。

• 目次：複数の見出しを一覧で並べ、読みたい項目へ移動するために使う
• ページ内リンク：本文中の好きな文字やボタンから、特定の1か所へ移動するために使う

今回の記事では、複数のH2見出しを一覧化して移動できる「目次」の作り方を中心に解説しています。

プラグインを使う方法との違い

WordPressの目次は、今回紹介した手動作成だけでなく、目次用プラグインを使って自動生成する方法もあります。

どちらが正解というわけではなく、目次を自分で管理したいか、自動化したいかで選び方が変わります。

方法	向いている人	注意点
プラグインなしで手動作成	目次項目や配置を自分で決めたい人	記事ごとにアンカーやリンクを設定する必要がある
目次プラグインを使う	目次作成をできるだけ自動化したい人	プラグインの追加・設定・管理が必要になる

今回の方法は、追加プラグインを使わず、WordPress標準ブロックだけで目次を作りたい場合に向いています。

一方、記事数が多く、毎回アンカーや目次項目を設定する手間を減らしたい場合は、目次を自動生成できるプラグイン方式も選択肢になります。

まとめ

WordPressの目次は、専用プラグインを追加しなくても、標準ブロックだけで手動作成できます。

WordPressの目次以外にも、記事作成や公開時の作業を減らす方法をWordPressシリーズで紹介しています。