WordPressでページ内リンクを作る方法｜同じ記事の見出しへ移動

長い記事の冒頭から「料金の説明」「よくある質問」などへ案内したいときは、ページ内リンクを使います。別の記事を開くリンクと違い、同じページの指定した見出しへ移動できます。

ここではクラシックエディターの「コード」タブで設定します。プラグインの追加は不要です。別の記事へのリンクは記事にリンクを貼る方法をご覧ください。

このページの「公開前の確認項目」へ移動すると、動きを試せます。

1．移動先の見出しにIDを付ける

1. 管理画面の投稿 → 投稿一覧から編集したい記事を開きます。
2. 本文のコードタブを押し、移動先の見出しを探します。
3. 見出しの開始タグを、下の例のように書き換えます。見出しの文章や終了タグは残します。

<h2 id="sample-check">公開前の確認項目</h2>

idには「#」を付けません。名前は半角英字とハイフンなどで短く付けると管理しやすくなります。同じ記事で同じIDを2回使わないでください。すでにidがある見出しには、2つ目を足さず既存の名前を使います。

2．案内する文章からIDへリンクする

1. 同じコード画面で、案内を置きたい段落を探します。
2. 次の例を入力し、リンクの文章を内容に合わせて変更します。
3. hrefの「#」の後ろと、見出しのidを同じ名前にします。

<p><a href="#sample-check">公開前の確認項目へ移動</a></p>

「こちら」だけでは移動先が分かりにくいため、「公開前の確認項目へ移動」のように内容が伝わるリンク文字にしましょう。ページ内の移動なので、別タブで開く設定は不要です。

3．保存してプレビューで移動を試す

1. 下書きなら下書き保存、公開済みの記事なら更新を押します。
2. プレビューを開き、作った案内リンクを押します。編集画面の本文中だけで動作を判断しません。
3. 目的の見出しへ移動することを確認します。公開後は通常の記事URLでも試し、スマホで見出しが読めるか確認します。

移動しない・違う位置へ移動するとき

• 名前の違い：大文字・小文字、ハイフン、余分な空白を見比べます。
• #の付け方：リンクのhrefには付け、見出しのidには付けません。
• IDの重複：同じ名前を複数の見出しに使っていないか確認します。
• 保存前の表示：保存・更新した後のページを開き直します。
• 固定メニューで隠れる：移動はできても見出しが上部メニューの下に隠れる場合があります。まずスマホの表示も確認し、テーマ側の余白調整が必要かを切り分けます。具体的な設定は固定メニューで見出しが隠れるときの直し方で説明します。

公開前の確認項目

• リンク文字から移動先の内容が分かる
• 目的の見出しへ移動する
• PCとスマホで見出しを読める
• 通常の記事URLでも動作する

見出しの整理は見出し2・見出し3の付け方、記事全体の確認は公開前チェックリストへ進んでください。ほかの編集操作は記事づくりガイドにまとめています。

これからWordPressのサイトを用意する方へ

この記事の操作はWordPressの編集機能です。すでにサイトがある方は契約し直す必要はありません。新しく始める方はサーバーとドメインの選び方で更新費用・バックアップ・サポートを確認しましょう。サーバーにドメインが含まれる場合もあるため、二重契約を避けます。