WordPressのページ内リンクの作り方｜別ページの特定箇所にも移動

長いページの途中へすぐ移動させたいときは、WordPressのページ内リンクを使います。移動先のブロックにHTMLアンカーを設定し、リンク側へ「#アンカー名」を指定するのが基本です。別ページの特定箇所へ飛ばす場合は、ページURLの末尾へ同じ指定を加えます。

作成自体は短い操作ですが、アンカー名の重複、URLの誤り、固定ヘッダーによる位置ずれで動かないことがあります。この記事では、ブロックエディターでの設定から、目次・メニューへの応用、公開後の確認までを順に説明します。

ページ内リンク（アンカーリンク）とは

ページ内リンクは、リンクを押した人を同じ文書内の指定位置へ移動させるリンクです。移動先にはHTMLのid属性を付け、リンク先にはその値を「#」に続けて指定します。アンカーリンク、ページジャンプとも呼ばれます。

たとえば、ページ下部の料金表へ「#price」と付け、冒頭の「料金を見る」から「#price」へリンクすれば、同じページ内を移動できます。別ページなら「https://example.com/service/#price」のように、対象ページのURLとアンカーを組み合わせます。

ページ内リンクは、長い記事の目次、FAQへの移動、サービスページの申込条件、同一ページ型サイトのナビゲーションなどに向きます。短いページへ多用すると、移動先が分かりにくくなるため、リンク文だけで目的地が伝わるようにします。

WordPressでページ内リンクを作る手順

ブロックエディターでは、移動先のブロックにHTMLアンカーを入力し、移動元のテキストやボタンにリンクを設定します。公開前に同じアンカーがほかのブロックへ使われていないか確認してください。

移動先にHTMLアンカーを設定する

見出しブロックを移動先にする手順は次のとおりです。

1. 投稿または固定ページの編集画面を開く
2. 移動先にする見出しブロックを選ぶ
3. 右側のブロック設定で「高度な設定」を開く
4. 「HTMLアンカー」へ半角英字で始まる名前を入力する
5. 更新または公開して保存する

WordPress公式のPage Jumps文書では、アンカーは同じ文書内で一意にし、大文字・小文字を区別し、空白を含めないよう案内されています。ハイフン、アンダースコア、コロン、ピリオドは使用できます。

運用しやすい名前は「半角小文字の英数字とハイフン」です。たとえば、料金ならprice、申込手順ならapplication-stepsのように、内容が分かる短い名前を使います。見出し文を変更しても壊れないよう、アンカーを自動生成された文字列だけに依存させないことも大切です。

テキストやボタンからアンカーへリンクする

同じページから移動させる場合は、次の操作を行います。

1. リンクにする文字列またはボタンブロックを選ぶ
2. ブロックツールバーのリンクボタンを押す
3. リンク先へ「#price」のように入力する
4. 適用してページを保存する
5. 公開ページでクリックし、目的位置へ移るか確認する

リンク文は「こちら」だけにせず、「料金表へ移動」「申込手順を見る」のように目的地を示します。ボタンの配置や文字、別タブ設定まで含めた操作は「ボタンリンクの作り方」で確認できます。

コードエディターやカスタムHTMLを使う場合は、移動先へid属性、リンクへhref属性を設定します。

<h2 id="price">料金</h2>
<a href="#price">料金を見る</a>

idは一つのページ内で重複させません。テーマやプラグインが同名idを出力することもあるため、公開ページのHTMLで重複していないか確認すると確実です。

別ページの特定箇所へリンクする方法

別ページへ移動する場合は、対象ページのURL末尾へ「#アンカー名」を加えます。移動先ページが「https://example.com/service/」、アンカーがpriceなら、「https://example.com/service/#price」がリンク先です。

作業順は次のとおりです。

1. 移動先ページにHTMLアンカーを設定して保存する
2. 公開された移動先ページのURLをコピーする
3. URL末尾に「#アンカー名」を加える
4. 移動元のテキスト、画像、ボタンへ設定する
5. ログアウト状態とスマートフォン幅でも確認する

相対URLとして「/service/#price」を使う方法もありますが、WordPressをサブディレクトリへ設置している場合や、多言語・ステージング環境ではパスが変わることがあります。サイト構成と移行方法に合う形式を選びます。

末尾のスラッシュの有無でサーバーがリダイレクトすると、アンカーが維持されるかも確認してください。通常は引き継がれますが、独自のリダイレクト規則で「#」以降をサーバーへ送ることはできません。フラグメントはブラウザ側で処理されるため、最終URLに目的のidが存在することが重要です。

目次から見出しへジャンプさせる方法

手動の目次は、各見出しに別々のHTMLアンカーを設定し、冒頭の項目から対応する「#アンカー名」へリンクして作ります。見出しの順番と目次の順番をそろえ、文言も近づけると迷いません。

たとえば、次の3見出しがあるなら、アンカーをpurpose、steps、notesのように分けます。

• ページ内リンクを使う目的
• 設定する手順
• 設定時の注意点

見出しを削除・統合したときは、目次のリンクも更新します。存在しないidへのリンクはクリックしても目的位置へ移りません。自動目次プラグインを使う場合は、見出しからidを生成する規則、重複時の処理、見出し除外設定を公式文書で確認します。

目次にはページの構造を示す役割もあります。すべての段落へリンクを付けるより、主要なH2と必要なH3に絞るほうが把握しやすくなります。

メニューからページ内の項目へ移動させる方法

同一ページ型のサイトでは、ナビゲーションメニューから各セクションへ移動できます。メニュー項目のリンク先として、完全URLとアンカーを指定します。トップページ内の会社案内なら「https://example.com/#company」のような形です。

クラシックテーマのメニュー画面では「カスタムリンク」を使います。ブロックテーマではサイトエディターでナビゲーションブロックを選び、カスタムリンクを追加します。使用中テーマによって画面名が異なるため、リンク先URLとラベルを確認して保存します。

トップページを表示中だけ「#company」とする実装もありますが、別ページにいると同じページ内のcompanyを探してしまいます。サイト全体のメニューでは、対象ページを含む完全URLまたはルート相対URLを使うほうが安定します。

管理バーが表示されるログイン状態では、固定ヘッダーの高さが一般訪問者と異なる場合があります。ログアウト状態でも必ず動作を確認してください。

ページ内リンクがずれる・動かないときの対処

動かない場合は、リンク側と移動先側を分けて確認します。次の順で調べると原因を絞れます。

1. リンク先が「#アンカー名」で始まっているか
2. 移動先のHTMLに同じidが実際に出力されているか
3. 大文字・小文字、ハイフン、末尾の空白が一致するか
4. 同じidがページ内に複数ないか
5. キャッシュを消して公開版を確認したか
6. JavaScriptエラーやテーマのスクロール処理がないか

固定ヘッダーの裏へ見出しが隠れる場合は、CSSのscroll-margin-topを移動先へ指定します。固定ヘッダーが80pxなら、余裕を含めた値を設定して各画面幅で確認します。

.entry-content [id] {
  scroll-margin-top: 96px;
}

テーマ全体のすべてのidへ適用すると、タブやフォームの制御に影響することがあります。記事本文の見出しなど対象を限定してください。ヘッダーの高さが画面幅で変わる場合は、メディアクエリやCSSカスタムプロパティで調整します。

URLは変わるのに移動しない場合、移動先が非表示のタブやアコーディオン内にないか確認します。非表示要素を開くJavaScriptが必要なら、アンカーだけでは足りません。プラグインの仕様に沿って開閉とスクロールを連携します。

ページ内リンクを使う際の注意点

ページ内リンクは移動を速くしますが、ページを短くしたり、内容の構造を自動で改善したりする機能ではありません。リンク先の見出し、前後の文章、戻り方まで含めて使いやすさを確認します。

主な注意点は次のとおりです。

• リンク文だけで移動先が分かるようにする
• アンカー名を一意かつ変更しにくい英字名にする
• 見出し変更時にリンク切れを確認する
• キーボード操作でも目的位置を把握できるようにする
• 滑らかなスクロールを強制しすぎない
• URLを共有するときに機密情報をアンカー名へ含めない

CSSのsmooth scrollを使う場合は、動きを減らすOS設定を尊重する実装を検討します。長いアニメーションは、目的位置へすぐ到達したい人には負担になることがあります。

アンカー名を変更すると、外部サイト、メール、資料、ブラウザのお気に入りに保存されたURLが動かなくなります。公開後は可能な限り維持し、変更が必要なら旧idを残す方法も検討します。

内部リンク・外部リンク・ブログカードとの違い

ページ内リンクは「どこへ移動するか」という分類の一つです。表示方法やサイト境界とは別に考えると整理できます。

種類	主な移動先	例
ページ内リンク	同じ文書の特定位置	#price
内部リンク	同じサイトの別URL	/service/
外部リンク	別ドメインのURL	外部の公式サイト
ブログカード	URLをカード型で見せる表現	記事タイトルと概要のカード

別ページのアンカーは、内部リンクであると同時にページ内の位置も指定します。どの形式でも、読者が押す前に移動先を予測できる文言が必要です。サイト内のページ同士をどう結ぶかは「内部リンクのSEO効果」、WordPress標準のリンク挿入やブロック操作は「ブロックエディターの使い方」で確認できます。

よくある質問

まとめ

WordPressのページ内リンクは、移動先へHTMLアンカーを設定し、リンク側に「#アンカー名」を指定して作ります。別ページなら対象ページURLの末尾へ同じ指定を追加します。アンカーは半角英字で始め、同じ文書内で重複させない運用が安全です。

公開後は、リンク文字列とidの一致、別ページURL、固定ヘッダーの位置ずれ、ログアウト状態を確認してください。見出しの追加や削除を行ったときも、目次やメニューに古いアンカーが残っていないか点検します。