WordPressでページ内リンクを設定する方法｜見出しへ移動する手順を初心者向けに解説

WordPressの記事が長くなると、「この文字をクリックしたら、同じページ内の見出しまで移動させたい」という場面があります。

そんなときに使えるのがページ内リンクです。

WordPressでは、移動先にHTMLアンカーを設定し、リンク元の文字に「#アンカー名」を指定することで、同じページ内の好きな場所へ移動できます。

目次

• WordPressのページ内リンクとは
• WordPressでページ内リンクを設定する方法
• ページ内リンクが動かないときの確認ポイント
• ページ内リンクはChatGPTに設定させることもできる
• WordPressの記事作成全体を減らしたいならValue AI Writerという選択肢もある
• まとめ｜WordPressのページ内リンクはHTMLアンカーで設定できる

WordPressのページ内リンクとは

ページ内リンクとは、同じページの中にある指定した場所へ移動するリンクです。

別の記事へ移動する一般的な内部リンクとは違い、この記事で扱うページ内リンクは、今開いているページ内の指定した場所へ移動します。

たとえば、記事の上にある「料金を見る」という文字をクリックして、ページ下部の「料金について」という見出しまで移動させるような使い方ができます。

WordPressのブロックエディターでは、基本的に次の2つを設定すればページ内リンクを作れます。

• 移動先の見出しにHTMLアンカーを設定する
• リンク元の文字に「#アンカー名」を設定する

今回は実際に、リンク元の「ページ内リンクの移動先へ」という文字をクリックして、指定したH2見出しへ移動する形で確認します。

WordPressでページ内リンクを設定する方法

ここから、実際のWordPress画面を使ってページ内リンクを設定します。

先に移動先の見出しを設定し、そのあとリンク元の文字を設定する順番で進めます。

移動先の見出しにHTMLアンカーを設定する

まず、リンクをクリックしたときに移動させたい見出しを選択します。

見出しブロックを選択した状態で、右側の設定画面から「高度な設定」を開きます。

すると「HTMLアンカー」という入力欄が表示されます。

今回はHTMLアンカーに「page-link-test」と入力しました。

リンク元の文字にページ内リンクを設定する

次に、クリックする側の文字へページ内リンクを設定します。

今回は「ページ内リンクの移動先へ」という文字をリンク元として使います。

リンク元にしたい文字をドラッグして選択します。

文字を選択した状態で、ツールバーに表示されるリンクのアイコンをクリックします。

リンク先の入力欄に、先ほど設定したHTMLアンカーの先頭へ「#」を付けて、「#page-link-test」と入力します。

候補として表示された「#page-link-test」をクリックするか、Enterキーを押してリンクを確定します。

リンク設定後、リンク先が「#page-link-test」になっていることを確認します。

プレビューでページ内リンクが動くか確認する

リンクを設定したら、最後にプレビュー画面で実際に動作するか確認します。

プレビュー画面で「ページ内リンクの移動先へ」をクリックします。

指定した「ページ内リンクの移動先へ」の見出しまで移動できれば設定完了です。

編集画面だけで判断せず、公開前には実際のプレビューでリンクをクリックして確認しておきましょう。

ページ内リンクが動かないときの確認ポイント

ページ内リンクを設定しても指定した場所へ移動しない場合は、まずHTMLアンカーとリンク先の設定を確認します。

今回の例なら、移動先のHTMLアンカーは「page-link-test」、リンク元は「#page-link-test」です。

特に「#」を付ける場所を間違えたり、アンカー名の文字が1文字でも違ったりすると正常に移動できません。

設定を直したあとは、もう一度プレビューを開いて実際にリンクをクリックして確認してください。

ページ内リンクはChatGPTに設定させることもできる

ここまで手動でページ内リンクを設定する方法を紹介しましたが、私は普段、このようなWordPressの設定もChatGPTに指示してGutenberg HTMLへ組み込ませています。

実際にこの記事でも、目次から各H2へのジャンプや「↑ 目次に戻る」などのページ内リンクを、ChatGPTに設定させる方法を使っています。

毎回WordPress上でHTMLアンカーとリンクを1つずつ設定する必要がないため、同じようなページ内リンクを何度も使う場合は作業を減らせます。

ただし、ChatGPTに任せる場合でも、今回紹介した「移動先のHTMLアンカー」と「#アンカー名」の関係を知っておくと、リンクが動かないときに確認しやすくなります。

なお、H2・H3から目次を自動で作りたいだけなら、目次プラグインを使う方法もあります。今回は、好きな文字から好きな位置へ移動する単発のページ内リンクを中心に紹介しています。

WordPressの記事作成全体を減らしたいならValue AI Writerという選択肢もある

今回のページ内リンクだけを目的にValue AI Writerを使う必要はありません。

一方で、記事作成そのものからWordPressへの投稿までの作業をまとめて減らしたい人には、Value AI Writerという選択肢もあります。

Value AI Writerでは、生成した見出し構成と本文をHTML形式へ変換でき、WordPressと連携して直接投稿することもできます。

ただし、今回紹介したような任意の文字から指定した見出しへ移動する単発のページ内リンクを自動設定する機能としては紹介していません。

ページ内リンクの設定は今回の手順やChatGPTを使い、記事作成全体の時短にはValue AI Writerを使うというように、目的に合わせて使い分ける方法もあります。

▼ Value AI Writer byGMOを確認する

高品質SEO記事生成AIツール【Value AI Writer byGMO】

記事作成のどの工程を減らしたいかで、自分に合う方法を選ぶのが分かりやすいです。

まとめ｜WordPressのページ内リンクはHTMLアンカーで設定できる

WordPressのページ内リンクは、移動先にHTMLアンカーを設定し、リンク元に「#アンカー名」を指定すれば作れます。

目次のように複数の見出しへ移動するリンクを作りたい場合は、目次用の記事で詳しく紹介しています。今回のような単発リンクと使い分けてください。