WordPressにアンカーリンクを「簡単に」追加する方法(ステップバイステップ)

WordPressの長い投稿でアンカーリンクを使用することで、ユーザーが読みたいセクションにすばやくジャンプできるようにします.


アンカーリンクは、ユーザーがページを再読み込みせずに長い記事を上下に移動できるようにするため、コンテンツセクションのテーブルでよく使用されます。 Googleが検索リストの下に表示してナビゲーションを簡単にするため、SEOにも役立ちます(これについては後で詳しく説明します)。.

このステップバイステップガイドでは、アンカーリンクとは何かを説明し、WordPressでアンカーリンクを簡単に追加する方法を示します.

WordPressにアンカーリンクを追加する

準備はいい?アンカーリンクの実際の例から始めましょう.

以下は、このガイドで取り上げるすべてのトピックのリストです。先に進み、これらのリンクのいずれかをクリックすると、その特定のセクションに移動します.

    アンカーリンクとは?

    アンカーリンクは、同じページの特定の場所に移動するページ上のリンクの一種です。これにより、ユーザーは最も興味のあるセクションにジャンプできます.

    以下のアニメーションのスクリーンショットをご覧ください。

    アンカーリンクのプレビュー

    ご覧のように、アンカーリンクをクリックすると、ユーザーは同じページの特定のセクションに移動します.

    アンカーリンクは、ユーザーが読みたいセクションにすばやくジャンプできる目次として、より長い記事で一般的に使用されます。.

    アンカーリンクを使用する理由と時期?

    平均的なユーザーは、ウェブサイトに留まるかサイトを離れるかを決める前に数秒もかかりません。ほんの数秒でユーザーを説得することができます.

    そのための最善の方法は、探している情報をすばやく確認できるようにすることです。.

    アンカーリンクを使用すると、ユーザーは残りのコンテンツをスキップして、興味のある部分に直接ジャンプできるため、これが簡単になります。これによりユーザーエクスペリエンスが向上し、新しい顧客や読者を獲得するのに役立ちます.

    アンカーリンクは、WordPress SEOにも最適です。 Googleは検索結果のアンカーリンクを「ジャンプしてリンク」として表示できます.

    検索結果のリンクにジャンプ

    Googleは、そのページのリンクを複数のリンクへのジャンプとして表示することもできます。これにより、検索結果のクリック率が向上することが証明されています。つまり、ウェブサイトへのトラフィックが増える.

    検索結果の下のリンクへの複数のジャンプ

    それでは、WordPressでアンカーリンクを簡単に追加する方法を見てみましょう.

    WordPressでアンカーリンクを手動で追加する方法

    記事にいくつかのアンカーリンクを追加するだけの場合は、手動で簡単に追加できます。.

    基本的に、アンカーテキストが意図したとおりに機能するには、2つのことを追加する必要があります。.

    1. アンカーテキストの前に#記号を付けてアンカーリンクを作成する.
    2. ユーザーを表示するテキストにid属性を追加します.

    アンカーリンク部分から始めましょう.

    ステップ1.アンカーリンクを作成する

    まず、リンクするテキストを選択してから、WordPress Gutenbergエディターでリンクの挿入ボタンをクリックします。.

    WordPressにリンクを追加する

    これにより、通常はURLを追加するか、リンクする投稿またはページを探すリンク挿入ポップアップが表示されます.

    ただし、アンカーリンクの場合は、#をプレフィックスとして使用し、ユーザーがジャンプするセクションのキーワードを入力します.

    アンカーリンクを作成する

    その後、Enterボタンをクリックしてリンクを作成します.

    アンカー#リンクとして使用するテキストを選択する際の役立つヒント:

    • リンク先のセクションに関連するキーワードを使用してください.
    • アンカーリンクを不必要に長くしたり複雑にしたりしないでください.
    • ハイフンを使用して単語を区切り、読みやすくする.
    • アンカーテキストで大文字を使用すると、読みやすくすることができます。例:#Best-Coffee-Shops-Manhattan.

    リンクを追加すると、作成したリンクをエディターで表示できるようになります。ただし、リンクをクリックしても何も起こりません.

    これは、ブラウザがアンカーリンクをIDとして見つけられないためです.

    ユーザーがアンカーリンクをクリックしたときに表示する領域、セクション、またはテキストにブラウザーをポイントすることで、問題を修正しましょう.

    ステップ2.リンクされたセクションにID属性を追加する

    コンテンツエディターで、ユーザーがアンカーリンクをクリックしたときに移動するセクションまでスクロールします。通常、それは新しいセクションの見出しです.

    次に、ブロックをクリックして選択し、ブロック設定で[詳細設定]タブをクリックして展開します。見出しブロック設定の下にある[詳細設定]タブをクリックするだけです.

    HTMLアンカー

    その後、[HTMLアンカー]フィールドにアンカーリンクとして追加したのと同じテキストを追加する必要があります。 #接頭辞なしでテキストを追加してください.

    プレビュータブをクリックして、投稿を保存し、アンカーリンクの動作を確認できます.

    表示したいセクションが見出しではなく、通常の段落またはその他のブロックの場合?

    その場合は、ブロック設定のその他メニューをクリックし、[HTMLとして編集]を選択する必要があります。.

    HTMLとして編集

    これにより、その特定のブロックのHTMLコードを編集できます。指し示す要素のHTMLタグを見つけるを選択する必要があります。例えば,

    記事の場合、または

    それがテーブルブロックなどの場合.

    ここで、次のコードのように、そのタグのID属性としてアンカーを追加する必要があります。

    このブロックに予期しないまたは無効なコンテンツが含まれているという通知が表示されます。行った変更を保存するには、HTMLへの変換をクリックする必要があります.

    HTMLに変換

    クラシックエディターでアンカーリンクを手動で追加する方法

    WordPressの古いクラシックエディターをまだ使用している場合、アンカーリンクを追加する方法は次のとおりです.

    ステップ1.アンカーリンクを作成する

    まず、アンカーリンクに変更するテキストを選択し、[リンクを挿入]ボタンをクリックします.

    クラシックエディターでのアンカーリンクの追加

    その後、#記号の接頭辞の後にアンカーリンクを追加し、その後にリンクに使用するスラッグを追加する必要があります。.

    ステップ2.リンクされたセクションにID属性を追加する

    次のステップは、ユーザーがアンカーリンクをクリックしたときに表示するセクションにブラウザーをポイントすることです.

    そのためには、クラシックエディターで「テキスト」モードに切り替える必要があります。その後、表示したいセクションまでスクロールします.

    クラシックエディターでアンカーIDを追加する

    次に、ターゲットにするHTMLタグを見つけます。例えば,

    ,

    ,

    , 等々.

    次のように、#プレフィックスのないアンカーリンクのスラッグを使用して、ID属性をそれに追加する必要があります。

    変更を保存してプレビューボタンをクリックすると、アンカーリンクの動作を確認できます.

    HTMLでアンカーリンクを手動で追加する方法

    WordPressの古いクラシックエディターのテキストモードでの記述に慣れている場合は、HTMLでアンカーリンクを手動で作成する方法を次に示します。.

    まず、次のように、通常のタグを使用して#接頭辞を持つアンカーリンクを作成する必要があります。

    マンハッタンで最高のコーヒーショップ

    次に、ユーザーがリンクをクリックしたときに表示するセクションまで下にスクロールする必要があります。.

    通常、このセクションは見出し(h2、h3、h4など)ですが、他のHTML要素や単純な段落でもかまいません

    鬼ごっこ.

    HTMLタグにID属性を追加し、#接頭辞なしでアンカーリンクスラグを追加する必要があります。.

    マンハッタンで最高のコーヒーショップ

    変更を保存してWebサイトをプレビューし、アンカーリンクをテストできます.

    WordPressのアンカーリンクとして見出しを自動的に追加する方法

    この方法は、長い記事を定期的に公開し、アンカーリンクを使用して作成する必要があるユーザーに適しています。.

    最初に行う必要があるのは、Easyプラグインをインストールしてアクティブにすることです。詳細については、WordPressプラグインのインストール方法に関するステップバイステップガイドをご覧ください。.

    このプラグインを使用すると、アンカー付きリンクを自動的に生成できます。見出しを使用してコンテンツセクションを推測し、ニーズに合わせて完全にカスタマイズできます.

    アクティベーション後、単にに行きます 設定 ” プラグイン設定を構成するページ.

    簡単なプラグイン設定

    最初に、追加する投稿タイプに対して有効にする必要があります。デフォルトでは、プラグインはページに対して有効になっていますが、投稿に対しても有効にすることができます.

    自動挿入オプションを有効にすることもできます。これにより、プラグインは、条件に一致する古い記事を含むすべての記事のを自動的に生成できます.

    特定の記事のみを自動的に生成する場合は、このオプションをオフのままにします.

    次に、少し下にスクロールして、表示する場所とトリガーするタイミングを選択します。.

    表示する場所とタイミングを選択します

    ページの他の詳細設定を確認し、必要に応じて変更できます.

    [変更を保存]ボタンをクリックして設定を保存することを忘れないでください.

    自動挿入オプションを有効にすると、指定した数の見出しを持つ既存の記事を表示できるようになります.

    記事の最初の見出しの前にプラグインが自動的に表示されることがわかります.

    特定の記事を手動で生成する場合は、アンカーリンク付きで表示する記事を編集する必要があります。.

    投稿の編集画面で、エディターの下にある[]タブまでスクロールします.

    アンカーリンクを使用して手動で追加する

    ここから、[挿入]オプションをオンにして、アンカーリンクとして含める見出しを選択できます.

    変更を保存して、記事をプレビューできます。プラグインは自動的にアンカーリンクのリストを表示します .

    下見

    詳細な手順については、WordPressに追加する方法に関する記事を参照してください.

    この記事を参考にして、WordPressにアンカーリンクを簡単に追加する方法を学んでください。また、SEO向けにブログの投稿を適切に最適化するためのヒントと、WordPressのページビルダープラグインのベストピックもご覧ください。.

    Jeffrey Wilson Administrator
    Sorry! The Author has not filled his profile.
    follow me
      Like this post? Please share to your friends:
      Adblock
      detector
      map