WordPressにWordPressアンカーハイパーリンクを挿入する方法(3つのテクニック)

公開: 2022-04-26

Webサイト全体で行う設計上の決定の多くは、ユーザビリティとコンシューマーエクスペリエンス(UX)を参照しています。 さらに、Webサイトのコンテンツ(標準では、サイトのWebページを調べる)には多くの価格があります。 これらのそれぞれと結婚する場合、あなたはしばしばあなたの情報のUXをサポートする手段について考えるでしょう。 WordPressのアンカーバックリンクは、コンテンツのUXの定番です。

アンカー一方向リンクは、問題の記事のインラインナビゲーションと考えてください。 それらはどこにでも見つけることができますが、見出しは広く使用されています。 これにより、読者は道に迷うことなく、必要に応じてプットに近づくことができます。 これは、考慮すべき一流のUXのことであり、ほとんどのWebサイトの家の所有者が想像すべきことです。

それらを使用することがどれほど複雑でないかを示すために、この記事はWordPressのアンカーバックリンクに表示されます。 あなたがそれらを組み込むことができる多様な技術に入る前に、それらが何であるか、そしてそれらがあなたのために何ができるかについて話し合いましょう。

アンカー接続とは

典型的な意味では、アンカー接続はクリック可能なインラインナビゲーションです。 これはコンテンツ素材とは異なり、Webページのその後のレベルに到達します。 WPKubeでそれらを使用して、チュートリアルの個別のアクションにジャンプできるようにします。

WPKube投稿のWordPressアンカーリンク。

URLをクリックするだけで、サイトは指定した関連部分にスキップします。 これは非常に単純な実装であり、Webサイトのユーザビリティに素晴らしい影響を与える可能性があります。 次に、これらの状況のいくつかについて説明します。

WordPressでアンカー一方向リンクを使用する理由

WordPressのアンカーバックリンクを利用するための重要な動機としてユーザビリティについて言及します。これが、WordPressのアンカーバックリンクを採用する重要な理由です。 一方、それらをWebサイトに追加するための使用シナリオは山ほどあります。 例えば:

  • 読者に膨大な長さの書かれたコンテンツ(この種の3,000期の投稿)を提供したい場合は、目次が頻繁にあります。 これは、アンカーインバウンドリンクのカスタマイズされた使用法です。
  • ブックマークの投稿を共有するときにもアンカーを操作できます。 URL内にアンカーが含まれている場合、リーダーは、表示したいステージに直接バウンスします。
  • ルックフォーエンジン最適化(検索エンジン最適化)は改善される可能性があります。これは主に、条件によっては、ルックアップエンジンがそれらの人々にWordPressアンカーの一方向リンクを異なるエントリとして表示するためです。

一言で言えば、あなたの聴衆があなたのサイトに近づき、あなたの記事と相互作用することを望むなら、WordPressアンカーインバウンドリンクはトラフィックの闘争における重要な武器です。 あなたのウェブサイトにそれらを追加する方法に関しては、セクションの将来の数があなたを示します。

任意のHTMLコードへのアンカーバックリンクを含める方法

WordPressアンカーハイパーリンクを含める基本はHTMLです。 つまり、WordPressだけでなく、どのインターネットサイトでもこれらを使用できます。 アンカーとタグの2つの部分があります。

まず、タグを利用して、他のハイパーリンクと同じようにアンカーバックリンクを増やします。 接続だけの場合は、その直前に「オクトソープ」(別名ハッシュまたはポンド記号)を使用します。

Click on further more down the web page

そうは言っても、これをクリックすると、URLはどこにも行きません。 それをどこかに移動させるために、オクトソープを必要とせずに、後で記事のidと同じhrefハイパーリンクを組み込みます。

固定された見出し

これにより、両方のタグが一緒にバックリンクされ、必要なインラインナビゲーションが構築されます。 この記事では見出しタグを使用していますが、これは任意のHTMLタグであることに注意してください。 段落タグ、画像タグ、またはHTMLの他の側面を使用して、顧客が必要な場所にアクセスできるようにすることができます。

WordPressアンカーリンクを追加する方法(3つの方法)

今すぐWordPressアンカーバックリンクの点で深刻な地球規模のケースを表示します! 次のセクションで扱う可能性が高いものは次のとおりです。

  • ブロックエディタ機能へのアンカー、および他のコンポーネントに確立されたIDを含めることができます。 これは、クラシックエディタでも発生する可能性があります。
  • Elementorのようなこの種のサイトビルダーは、WordPressアンカーの一方向リンクをマテリアルに挿入できるようにするモジュールを提供します。
  • コンテンツへの自動アンカーハイパーリンクを増やすことができるプラグインがあります。これにより、セットアップ時間を節約できます。

最初はオフで、ガイドメソッドを見ていきます。 難しいように見えますが、ブロックエディタを適用すると非常に簡単になります。

1.ガイドテクニックを使用して、アンカーインバウンドリンクをブロックエディタに挿入します

ほとんどのエンドユーザーの場合、ブロックエディターは、WordPressアンカーのインバウンドリンクを情報に増やすために必要なすべてのものを提供します。 開始するには、ハイパーリンクの場合と同様に、Webサイトのリンクを追加するテキストにスポットライトを当てます。

ハイパーリンクとして使用するページ上のテキストを選択します。

次に、これを適切な選択肢を使用してWebサイトのリンクに切り替え、オクトソープの前にアンカータグを挿入します。

オクトソープを使用して、テキストにアンカーリンクを追加します。

バックリンクの横に「内部」という単語が表示されるため、これが適切かどうかがわかります。 これを保存したらすぐに、アンカーを設定する書き込みコンテンツのセクションに移動します。 見出しを使用するために向かっています。

あなたはブロック>理想的な手のサイドバーの高度に開発された部分に向かい、それを成長させたいと思うでしょう。 そこに、 HTMLアンカーの分野が表示されます。

ブロックエディタ内のHTMLアンカーフィールドにIDを追加します。

ここでは、オクトソープを使用せずに、WordPressアンカーURLのテキストを組み込みます。 これがあなたがしなければならないすべてです、そしてあなたがライブプレビューをチェックアウトするならば、あなたはアンカーウェブサイトリンクが作動するのを見るでしょう。

VintageEditorにアンカーバックリンクを追加する

標準エディタの方法は、完全に手動のHTMLソリューションとブロックエディタの方法のハイブリッドのようなものです。 まず、Visibleページだけに資料へのハイパーリンクを挿入します…

クラシックエディタ内のテキストにHTMLアンカーを追加します。

…次に、テキストコンテンツエディタに切り替えて、理想的な要素にアンカーを追加します。

テキストエディタを使用してアンカーリンクIDを追加します。

再びVisibleエディターに戻ると、バックリンクが表示されますが、書き込みをプレビューするまで、意図したとおりに動作しない可能性があります。

2.サイトビルダープラグインを利用してアンカーバックリンクを挿入します

ElementorまたはBeaverBuilderのようなほとんどのページビルダープラグインは、コンテンツマテリアルにアンカーハイパーリンクを含めるためのモジュールを提供します。 これらは、主に他のモジュールが可能なすべての場所に移動できるため、HTMLと同じように用途が広い可能性があります。

たとえば、Elementorでは、MenuAnchor要素を使用します。

Elementorのメニューアンカー要素。

これを使用するには、選択した位置にドラッグします。 見出しの側面の前に、または少なくともアンカーする必要のあるエリアの前に、エリアを設定することをお勧めします。

Elementor内のメニューアンカーにIDを追加します。

バリエーションの保存を手伝うときに、アンカーURLを調べることができます。 ユニークなサイトビルダーは、さまざまなアプローチを使用してWordPressアンカーハイパーリンクを挿入します。また、フロントエンドにさまざまな実装があります。 それにもかかわらず、概念は正確であり、あなたはまた正確な最終的な利益を得るでしょう。

3.プラグインを使用して、サイトへの自動アンカーバックリンクを組み込みます

Webページにはるかに高いパフォーマンスを挿入し、WordPressアンカーのバックリンクを輝かせたい場合は、目次(ToC)プラグインを使用できます。 アクセス可能なものはたくさんありますが、ほとんどの場合、最新のWordPressバージョンの評価がないか、頻繁に更新されることはありません。 それでも、SimpleTOCプラグインはすべての適切なコンテナをチェックします。

SimpleTOCプラグイン。

もちろん、通常の方法でプラグインを設定してアクティブ化してから、ブロックエディタに移動する必要があります。 続いて、記事を保存してから、SimpleTOCブロックを検索します。

WordPress内でSimpleTOCブロックを見つける。

これを公開に追加すると、記事の見出しへのリンクがすぐに取得されます。 ToCには個々の見出しが表示され、ガイドのタグ付けを実行する必要はありません。

SimpleTOCプラグインによる目次の生成。

それでも、必要に応じて、目次からの見出しを制限することができます。 simpletoc-concealed CSSコースをHeadingBlockのFurtherCSSクラス業界に増やすと、ToCからそれが隠されます。 この分野は、HTMLアンカー分野と同様の場所で見つけることができます。ブロック内>革新的なサイドバー:

ブロックエディタ内の追加のCSSクラスフィールド。

これは非常に単純な実装であり、ハンドブックの手順ほど全体的な柔軟性がない可能性がありますが、迅速であり、WordPressアンカーハイパーリンクを通常の方法で使用できます。

要約すれば

ユーザーとの出会いが最も重要であり、この種のように、あなたはあなたがウェブサイトの問題で彼らの時間を作ることができるすべての方法を考えたいと思うでしょう。 WordPressアンカーのインバウンドリンクはこれを達成できます。 彼らはあなたがインラインコンテンツナビゲーションを作成するのを助けます、そしてスイッチで、これはあなたのバイヤーが大騒ぎしたり、延期したりすることなく彼らが持っている必要がある書かれたコンテンツにスクロールするのを助けます。

この投稿は、WordPressアンカーリンクをサイトに組み込むためのいくつかの戦略に登場しています。 これがスピーディーな要約です:

  • WordPressだけでなく、任意のWebサイトのHTMLタグの一部としてそれらを組み込むことができます。
  • ブロックエディタを使用すると、ハイパーリンクを増やすのとまったく同じ方法でアンカーを組み込むことができます。
  • ElementorなどのWebサイトビルダーは通常、アンカーをマテリアルに組み込むことができるように焦点を絞ったモジュールを備えています。
  • SimpleTOCのようなこの種のプラグインは、自動WordPressアンカーリンクを素材に組み込むことができます。 場合によっては、プラグインは投稿の見出しに一致するように目次を更新します。

WordPressのアンカーリンクがSeoと視聴者に利益をもたらすと思いますか?そうでない場合、彼らが関与するのに何が役立ちますか? 以下の回答部分で私たちに知らせてください!