ジャンプリンクやスキップリンクとしても知られるアンカーリンクは、スクロールを減らすことで、長いページやテキストが多いWordPressのページや記事のナビゲーションやユーザー体験を向上させます。アンカーリンクは、ユーザーがリンクをクリックすることで、同じページ内のコンテンツの特定のセクションにすばやくジャンプできるようにします。

このガイドでは、WordPressでアンカーリンクを追加するためのすべての手順と考慮事項について説明します。クラシックエディター、グーテンベルグエディター、WPBakeryページビルダーの実装方法は

アンカーリンクとは何か？

アンカーリンクはハイパーリンク新しいページに移動するのではなく、同じページの特定の部分にジャンプします。例えば、長い記事を読んでいて、上部に目次がある場合、リンクをクリックすれば、興味のあるセクションに直接飛ぶことができる。

通常、アンカーは見出しや段落などのテキスト要素に追加されますが、メニュー項目やボタン、画像、フォームに追加することもできます。

なぜアンカーリンクを使うのか？

アンカーリンクを使用することで、ウェブサイトのユーザーエクスペリエンスが向上し、ユーザーは無限にスクロールすることなく、探しているものをすぐに見つけることができます。アンカーリンクは、Googleのような検索エンジンがあなたのページ構造をより理解するのに役立ち、ひいてはあなたのサイトのランキングを向上させます。

アンカーリンクの構造

アンカーリンクを理解するために、その構造を分解してみましょう。アンカーリンクは主に2つの部分で構成されています：

1.ID（識別子）

これは、リンクしたい要素に追加する一意の識別子です。HTMLでは、このように要素にIDを追加します：

<code><h2 id="section1">セクション1</h2>

ここだよ。id="section1" は一意の識別子である。

2.リンク

例えば、ウェル番号（#）の後にIDを使用します：

<code><a href="#section1">パート1へ</a>

href="#section1" セクションは、リンクをクリックするとID "section1 "の要素にジャンプするようにブラウザに指示します。

WordPressでアンカーリンクを作成する方法

WordPressクラシックエディターの使用

まず、TinyMCEのクラシックエディタ（WordPressの投稿やページを編集する定番の方法）でアンカーリンクを追加する方法を紹介します。

1、要素にユニークなIDを追加する

1. アンカーリンクを追加したい投稿またはページを開く。
2. HTMLを直接編集するために、ビジュアルモードからテキストモードに切り替えます。
3. アンカーを付けたいコンテンツのセクションを見つける。
4. 要素にユニークなIDを追加する：

<code><h2 id="section1">第1節</h2>

段落内の特定の単語や語句のIDを追加したい場合は、次のように追加します：

<code><p>それは <a id="specificWord">特定語</a> の例。</p>

2.アンカーポイントへのリンク

1. テキストモードからビジュアルモードに戻る。
2. リンクとして使用するテキストを選択し、" をクリックします。リンクの挿入/編集".
3. ポップアップウィンドウで、ウェル番号（#）の後に作成したIDを入力します：

<code><a href="#section1">セクション1へ</a>

をクリックしてください。リンクの追加"をクリックし、変更を保存すれば、クラシックエディターでのアンカーリンクの作成は完了です。

3.ナビゲーションバーからアンカーを追加する

1. WordPressインフォメーションセンターの"外装状態"に進み、"メニュー".
2. メニューエディターで"カスタムリンク「広げろ。
3. ターゲットページへのリンクを追加するには、要素IDとともにウェル番号（#）をリンクに追加してください：

<code><a href="#section1">セクション1へ</a>

変更を保存し、結果を表示する。

Gutenbergエディターの使用

次は、WordPressの新しいブロックベースのエディターであるGutenbergエディターでアンカーリンクを作成する方法です。

1、要素にユニークなIDを追加する

1. アンカーリンクを追加したい投稿またはページを開く。
2. アンカーポイントを追加したいブロックを選択します。
3. ブロックの設定で、下にスクロールして「HTML形式で編集」をクリックする。
4. アンカーを取り付けたいコンテンツセクションを見つけ、その要素に一意のIDを追加する：

<code><h2 id="section1">第1節</h2>

または、右側のブロック設定から"ハイレベル"セクションに独自のHTMLアンカーポイントを入力する。

2.アンカーポイントへのリンク

1. ビジュアル編集」をクリックして、テキストブロックに戻る。
2. リンクとして使用するテキストを選択し、ツールバーの「リンク」をクリックします。
3. ポップアップウィンドウで、ウェル番号（#）の後に作成したIDを入力します：

<code><a href="#section1">パート1へ</a>

プレス "入る"ボタンをクリックし、変更を保存すれば、Gutenbergへのアンカーリンクの追加は完了です。

WPBakeryページビルダーでアンカーリンクを作成する

最後に、WordPressのページや投稿のあらゆる要素にアンカーを追加できるWPBakery Page Builderで、アンカーリンクを追加する方法を探ってみよう。

1、要素にユニークなIDを追加する

1. アンカーを追加したい要素（言い換えれば、リンクのジャンプ先）を選択して追加します。
2. 要素の編集ウィンドウを開きます。
3. 要素ID」セクションまでスクロールダウンし、固有のIDを追加する：

セクション1

2.アンカーポイントへのリンク

1. アンカーリンクを追加する要素（言い換えれば、クリックされたときにリンク先にジャンプする要素）を選択して追加します。ボタン".
2. 要素の編集ウィンドウを開きます。
3. URL（リンク）」セクションに移動し、「」をクリックします。URLを選択".
4. ポップアップウィンドウで、ウェル番号（#）の後に作成したIDを入力します：

<code><a href="#section1">セクション1へ</a>

リンクを設定」をクリックして変更を保存し、アンカーリンクがどのように機能するかを確認する！

アンカーリンクのベストプラクティス

WordPressでアンカーリンクを使用する際のベストプラクティスをご紹介します：

1.ユニークなIDの確保

要素IDを作成する際は、ページ内（または同じHTMLドキュメント内）で一意であることを確認してください。IDが重複すると、予期せぬジャンプ動作につながる可能性があります。

2.IDに特殊文字の使用を避ける

要素IDにはスペース、句読点、特殊文字を含めることはできず、数字やダッシュ（-）で始めることもできません。HTMLでは許されますが、CSSやJavaScriptなど他の文脈では問題を引き起こす可能性があるため、できるだけ避けたほうがよいでしょう。

3.リンクは「#」で始まるが、IDに「#」が含まれていない。

例えば、リンクは "#section1 "とし、IDは "section1 "とします。これは、アンカーリンクが正しく機能しない原因となる一般的なエラーです。

4.むき出しのアンカーリンクの使用は避ける

裸のアンカーリンクまたは生のアンカーリンクとは、URLそのものをアンカーとして使用するリンクのことです。 https://example.com。状況によっては必要かもしれないが、文脈を欠き、アンカーテキストと同じ説明的なアンカーテキストは提供されない。 SEOの優位性。

5.アンカーテキストを明確で説明的なものにする

詳しく知る」「ここをクリック」「続ける」といった曖昧な表現は使わないこと。代わりに、「ユーザーマニュアルのPDFをダウンロードするにはここをクリックしてください」や「私たちのチームについてもっと知ってください」など、より具体的なテキストを使用してください。こうすることで、ウェブ・アクセシビリティが向上し、ユーザーはリンクの行き先を理解しやすくなります。

6.アンカーリンクが正しく機能しているかテストする

アンカーリンクが正しく機能しているか、常にテストしましょう。効果的でないリンクはユーザーをイライラさせ、SEOにも悪影響を及ぼします。

アンカーリンクはいつ使う？例

WordPressのアンカーリンクは様々な場面でとても便利です。以下はその例です：

1.カタログ

長い記事の場合、上部にアンカーリンクのある目次があれば、読者は読みたいセクションにジャンプしやすくなる。

2.シングルページ・ナビゲーション

1ページのウェブサイトの場合、アンカーリンクはユーザーが「会社概要」、「サービス」、「お問い合わせ」など、さまざまなセクションにすばやく到達するのに役立ちます。

3.コール・トゥ・アクション（CTA）

アンカーリンクを使って、フォームへの入力や商品の閲覧など、ユーザーを特定のアクションに誘導しましょう。

4.長編コンテンツ

読者が必要な情報を簡単に見つけられるように、長いコンテンツをアンカーリンク付きのセクションに分割する。

5.トップに戻る

スクロールしてトップに戻る」ボタン（通常、ウェブサイトの右下隅にある）を導入することで、ユーザーはトップに戻り、素早く行動を起こすことができる。

よくある質問

1.アンカーリンクと通常のリンクの違いは何ですか？

アンカーリンクは同じページの特定の部分を指し、通常のリンクは別のページに移動します。

2.アンカーリンクはSEOを改善できるか？

そう、アンカーリンクは内部リンク戦略の一環であり、検索エンジンがページコンテンツの構造と重要性を理解するのを助け、SEOを向上させる。

3.アンカーリンクはアクセシビリティを改善できるか？

はい、アンカーリンクは、ユーザー（特に障害者）が長いコンテンツをより効率的にナビゲートするのに役立ち、アクセシビリティを向上させます。

4.アンカーリンクが機能しているかどうかをテストするには？

アンカーリンクは、クリックして正しいセクションに飛ぶかどうかテストすることができる。また、ブラウザの開発ツールを使って、問題がないかチェックすることもできます。

5.WordPressにアンカーリンクを追加できるプラグインはありますか？

WordPressレイアウト上のあらゆる要素にアンカーリンクを作成・追加できるプラグインがあります。 WPBakeryページビルダー。

評決を下す

WordPressでアンカーリンクを追加すると、サイトのナビゲーション、ユーザーエクスペリエンス、SEO、アクセシビリティを大幅に向上させることができます。このガイドで説明する方法に従えば、クラシックエディタ、グーテンベルグエディタ、またはWPBakeryページビルダーを使用して、WordPressで簡単にアンカーリンクを作成できます。それぞれの方法にはメリットがありますが、先に述べたように、WPBakeryはページ上のどの要素にもアンカーリンクを追加できる点で優れています。