OpenByt - 您免費 WordPress 知識的終極來源

如何在 WordPress 中建立和使用錨點連結：全面指南

tomsqum

錨點連結是改善較長 WordPress 頁面或文章導覽的簡單但強大的工具。它們可讓使用者透過點擊連結快速跳到同一頁面上的特定區段，而無需捲動大量內容。錨點連結可以提升使用者體驗和 SEO，因此是長篇內容或單一頁面網站必須使用的功能。

This guide will walk you through creating anchor links in WordPress using the Classic Editor, Gutenberg Editor, and WPBakery Page Builder. We’ll also discuss the structure of anchor links, best practices, and common use cases.

什麼是錨點連結？

錨點連結是一種超連結，可將使用者導向同一頁面上的特定區段，而不是將他們導向不同的頁面。例如，在一篇冗長的部落格文章中，您可以建立一個表 內容 在頂部，每個連結都會跳到文章的相關部分。

範例：

<h2 id="section1">第 1 節：什麼是錨點連結？</h2>
<a href="#section1">前往第 1 節</a>

In this example, when users click on “Go to Section 1,” they are taken directly to the part of the page where the heading “Section 1: 什麼是錨點連結？” is located.

使用錨點連結的好處：

  1. 改善可讀性： 在長篇文章中，讀者可以快速跳到他們感興趣的部分，而不必無止盡地捲動。
  2. 更好的導航： Anchor links can be used to create easy-to-navigate sections on single-page websites, such as “關於” “服務、” and “聯絡人。"
  3. 增強使用者參與度： 如果使用者可以快速找到他們想要的資訊，他們就更有可能在您的頁面上停留更長的時間。
  4. SEO 提升： Search engines like Google use anchor links to understand your page’s structure better, potentially improving your SEO rankings.

錨點連結的結構

錨點連結由兩個基本部分組成：錨點和錨點連結。 ID (識別碼) 和 連結.

  1. ID (識別碼)

ID 是一個唯一的識別碼，您可以將其加入要連結到的 HTML 元素（如 標題 或 段落).舉例來說：

<h2 <mark class="has-inline-color has-vivid-cyan-blue-color amp-wp-cefb454" data-amp-original-style="background-color:rgba(0, 0, 0, 0)">id="section1"</mark>&gt;第 1 節：技術性 SEO</h2>

id= “section1” 使此標題可識別為 錨點.

https://www.openbyt.com/wp-content/uploads/2024/10/Action-2024-10-24-16-14-25.mp4
  1. 連結

The clickable part that directs the user to the ID. It’s created using the hashtag # 接著是 ID.例如：

前往第 1 節。

的 href=” #section1″ 會告訴瀏覽器向下捲動到 ID 為 section1 的元素。

行動範例：

If you’re writing a detailed article about SEO, 您可以在每個主要部分加入錨點連結：

<h2 id="on-page-seo">網頁 SEO</h2>
<h2 id="off-page-seo">頁外 SEO</h2>
<h2 id="technical-seo">技術性 SEO</h2>

在文章的頂端，您就可以加入連結到這些部分的目錄：

<ul>
   <li><a href="#on-page-seo">網頁 SEO</a></li>
   <li><a href="#off-page-seo">頁外 SEO</a></li>
   <li><a href="#technical-seo">技術性 SEO</a></li>
</ul>

Users who click “網頁 SEO” will be taken straight to that section.

為什麼要使用錨點連結？

  1. 強化使用者體驗

讀者可以輕鬆地導覽到他們感興趣的內容，這對長篇內容尤其有用。這可減少沮喪感，讓您的網站更容易使用。

  1. 在單一頁面網站上提供更好的導覽

對於單一頁面的網站，可以使用錨點連結來模擬導覽選單。按一下選單項目，使用者就會順暢地捲動到對應的部分，創造出完美的瀏覽體驗。

  1. 改善 SEO

錨點連結有助於內部連結，這有助於 Google 等搜尋引擎更好地瞭解您的頁面結構。這可以改善您內容的索引，並帶來更好的排名。

  1. 提高使用者參與度

Enabling users to find the content they’re looking for quickly can increase their time on your site and reduce bounce rates, which is beneficial for user engagement metrics.

  1. 無障礙

錨點連結也能讓您的網站更容易存取，讓殘障使用者或使用螢幕閱讀器的使用者更有效率地瀏覽您的內容。

如何在 WordPress 中建立錨點連結

Here’s how to create anchor links using different WordPress editors.

在經典編輯器中建立錨點連結

If you’re using the 經典編輯器您必須手動編輯 HTML to add anchor links. Here’s how:

步驟 1：為您的目標元素加入唯一 ID

  1. 在 Classic Editor 中開啟您要編輯的文章或頁面。
  2. Switch to the “正文” mode to edit the HTML.
  1. 找出您要連結的元素 (如標題或段落)，並加入唯一的 ID。例如
<h2 id="section1">第 1 節：什麼是錨點連結？

步驟 2：建立錨點連結

  1. Switch back to the “視覺” mode.
  1. 在您文章的頂端 (或任何您想要連結的地方)，反白您想要點選的文字。
  1. 按一下" "。插入/編輯連結” button in the toolbar.
  2. 在 URL 欄位中，輸入 #section1 (您之前設定的 ID）。
<a href="#section1">前往第 1 節</a>

步驟 3：儲存與預覽

Once you’ve saved the changes, you can preview your page to ensure the link works as expected. Clicking the link should scroll the page to the section with the matching ID.

https://www.openbyt.com/wp-content/uploads/2024/10/Action-2024-10-24-16-40-55.mp4

在 Gutenberg 編輯器中建立錨點連結

Gutenberg is WordPress’s block editor, offering a more streamlined way to create anchor links.

步驟 1：為區塊新增 ID

  1. 在 Gutenberg 中開啟您要編輯的文章或頁面。
  2. 選擇要加入錨點的區塊（例如標題區塊）。
  3. In the right-hand sidebar, under “進階,” find the “HTML 錨點" 欄位。
  1. 輸入您的唯一 ID（例如 section2）。

步驟 2：新增錨點連結

  1. 回到您的文章頂端或任何您想加入連結的地方。
  2. 反白顯示您想要點選的文字，然後點選工具列上的連結圖示。
  1. 在 URL 欄位中，輸入 #section2。
  1. Press “Enter” to create the link.

步驟 3：儲存並測試

儲存您的文章並預覽。當您按一下時，連結應該會跳到具有錨點 ID 的區段。

在 WPBakery Page Builder 中建立錨點連結

WPBakery 是一款著名的 WordPress 拖放頁面建構工具。您可以使用此工具輕鬆建立錨點連結。

步驟 1：為元件新增唯一 ID

  1. 在 WPBakery Page Builder 中開啟頁面或文章。
  2. 按一下您要連結的元素，並進入其設定。
  1. In the settings, find the “元素 ID” field and enter a unique ID (e.g., section1).

步驟 2：建立錨點連結

  1. 選取要連結的文字或按鈕。
  2. 開啟連結設定並輸入 #第1節 作為 URL。
  1. 儲存變更。

步驟 3：儲存與預覽

儲存您的工作後，預覽頁面以測試連結。

使用錨點連結的最佳實務

要充分利用錨點連結，請遵循這些最佳實務：

  1. 確保唯一 ID

Each ID must be unique within a page. If two elements have the same ID, the browser won’t know where to scroll, and the link may not work properly.

  1. 避免使用特殊字元

ID 不應包含空格、標點符號或特殊字符。堅持使用字母、數字和連字符。例如，section-1 沒問題，但 section 1 或 section#1 可能會造成問題。

  1. 使用清晰的錨文字

Avoid vague anchor text like “Click here” or “Learn more.” Instead, use descriptive text that tells users exactly where the link will take them. For example, “Go to the On-Page SEO section” is much more informative.

  1. 測試您的連結

Always test your anchor links before publishing. Make sure that each link scrolls to the correct section. Your browser’s developer tools can help diagnose any issues.

  1. 避免裸露 URL

避免在文字中顯示原始的錨點 URL (如 https://example.com/#section1)。取而代之的是，使用清楚、描述性的連結文字，為使用者提供上下文。

錨點連結使用案例

錨點連結在許多情況下都很有用。以下是幾個常見的範例：

  1. 目錄

對於篇幅較長的部落格文章，在開頭加入目錄可讓使用者不需捲動就能跳到特定部分。這可改善導覽功能，讓內容更容易消化。

  1. 單頁網站

Anchor links are a great way to create navigation menus on single-page websites. Clicking on menu items like “About Us” or “Services” will scroll the user to those sections on the same page.

  1. 呼叫行動 (CTA) 按鈕

Use anchor links to direct users to specific actions, such as filling out a form or viewing a product. For example, a “Learn More” button can link to a detailed section further down the page.

  1. 捲動至頂端按鈕

Adding a “Scroll to Top” button allows users to quickly return to the top of a long page without manually scrolling.

常見問題

  1. 錨點連結與一般連結有何不同？

錨點連結會在同一頁面內導航，而一般連結通常會帶您到不同的頁面。錨點連結通常會強化長篇內容或單一頁面網站的導航功能。

  1. 錨點連結對 SEO 有幫助嗎？

Yes, anchor links can be part of a good internal linking strategy, helping search engines understand your page’s structure and improving your page’s accessibility and user experience.

  1. 如何測試錨點連結？

最簡單的方法是按一下連結，看看它是否會帶您到正確的區段。您也可以使用瀏覽器開發工具來檢查錨點連結，並排除任何問題。

  1. 有任何建立錨點連結的外掛程式嗎？

是的，許多頁面建立工具如 WPBakery 和 Elementor 都允許您輕鬆建立錨點連結。您也可以使用專門的目錄外掛程式，自動為標題產生錨點連結。

總結

錨點連結對於改善使用者導覽非常重要，尤其是長篇內容和單一頁面的網站。允許使用者直接跳到特定區段可增強可讀性、提高參與度，並對 SEO 有正面貢獻。無論您使用的是 Classic Editor、Gutenberg 還是 WPBakery Page Builder，添加錨點連結都是一個簡單的過程，可以顯著改善網站的用戶體驗。透過遵循最佳實務，例如使用獨特的 ID、清晰的錨文字，以及測試您的連結，您可以確保瀏覽順暢，並為您的訪客提供更好的可用性。

退出行動版