錨鏈接，也稱為跳轉(zhuǎn)鏈接或跳過鏈接，通過減少滾動改善了較長或文本較多的 WordPress 頁面和帖子的導(dǎo)航和用戶體驗。它們允許用戶通過單擊鏈接快速跳轉(zhuǎn)到同一頁面上的特定內(nèi)容部分。

在本指南中，我們將詳細介紹在 WordPress 中添加錨鏈接的所有步驟和注意事項，包括經(jīng)典編輯器、Gutenberg 編輯器和 WPBakery 頁面構(gòu)建器中的實現(xiàn)方法。

什么是錨鏈接？

錨鏈接是一種超鏈接，它不會將你帶到新頁面，而是跳轉(zhuǎn)到同一頁面的特定部分。例如，如果你正在閱讀一篇較長的文章，并且頂部有一個目錄，可以點擊鏈接直接轉(zhuǎn)到你感興趣的部分。

通常，錨點被添加到文本元素，如標題或段落，但也可以添加到菜單項、按鈕、圖像或表單。

為什么要使用錨鏈接？

使用錨鏈接可以改善你網(wǎng)站的用戶體驗，讓用戶無需無休止?jié)L動即可快速找到他們所需內(nèi)容，并且還有利于網(wǎng)絡(luò)可訪問性。錨鏈接可以幫助 Google 等搜索引擎更好地理解你的頁面結(jié)構(gòu)，從而提高網(wǎng)站的排名。

錨鏈接的結(jié)構(gòu)

為了理解錨鏈接，讓我們分解一下它們的結(jié)構(gòu)。錨鏈接由兩個主要部分組成：

1. ID（標識符）

這是你添加到要鏈接到的元素的唯一標識符。在 HTML 中，可以像這樣向元素添加 ID：

<h2 id="section1">section1</h2>

這里，id="section1" 是唯一標識符。

2. 鏈接

這是可點擊的部分，可跳轉(zhuǎn)到你創(chuàng)建的 ID。使用井號（#）后跟 ID。例如：

<a href="#section1">Go to Part 1</a>

href="#section1" 部分告訴瀏覽器在點擊鏈接時跳轉(zhuǎn)到 ID 為“section1”的元素。

如何在 WordPress 中創(chuàng)建錨鏈接

使用 WordPress 經(jīng)典編輯器

首先介紹在 TinyMCE 的經(jīng)典編輯器中添加錨鏈接的方法，這是在 WordPress 中編輯帖子和頁面的經(jīng)典方式。

1、為元素添加唯一 ID

1. 打開要添加錨鏈接的帖子或頁面。
2. 從可視模式切換到文本模式，可直接編輯 HTML。
3. 找到要附加錨點的內(nèi)容部分。
4. 為元素添加唯一 ID，例如：

<h2 id="section1">第 1 節(jié)</h2>

如果你想在某個段落中為特定單詞或短語添加 ID，可以像這樣添加：

<p>這是一個 <a id="specificWord">特定單詞</a> 的示例。</p>

2、鏈接到錨點

1. 從文本模式切換回可視模式。
2. 選擇將用作鏈接的文本，然后單擊工具欄中的“插入/編輯鏈接”。
3. 在彈出窗口中，使用井號（#）后跟你創(chuàng)建的 ID：

<a href="#section1">Go to section 1</a>

單擊“添加鏈接”，保存更改，就完成了在經(jīng)典編輯器中創(chuàng)建錨鏈接。

3、從導(dǎo)航欄添加錨點

1. 在 WordPress 信息中心中，轉(zhuǎn)到“外觀”，然后轉(zhuǎn)到“菜單”。
2. 在菜單編輯器中，點擊“自定義鏈接”將其展開。
3. 添加指向目標頁面的鏈接，將井號（#）與元素 ID 一起添加到你的鏈接：

<a href="#section1">Go to section 1</a>

保存更改并查看結(jié)果。

使用 Gutenberg 編輯器

接下來介紹如何在 Gutenberg 編輯器中創(chuàng)建錨鏈接，這是 WordPress 中較新的基于塊的編輯器。

1、為元素添加唯一 ID

1. 打開要添加錨鏈接的帖子或頁面。
2. 選擇要添加錨點的塊。
3. 在區(qū)塊設(shè)置中，向下滾動并點擊“以 HTML 格式編輯”。
4. 找到要附加錨點的內(nèi)容部分，為元素添加唯一 ID：

<h2 id="section1">第 1 節(jié)</h2>

或者，你也可以通過選擇塊，轉(zhuǎn)到右側(cè)塊設(shè)置中的“高級”部分，然后在那里輸入你的唯一 HTML 錨點。

2、鏈接到錨點

1. 單擊“可視化編輯”切換回文本塊。
2. 選擇將用作鏈接的文本，然后單擊工具欄中的“鏈接”。
3. 在彈出窗口中，使用井號（#）后跟你創(chuàng)建的 ID：

<a href="#section1">轉(zhuǎn)至第 1 部分</a>

按“Enter”鍵，保存更改，就完成了在 Gutenberg 中添加錨鏈接。

在 WPBakery 頁面構(gòu)建器中創(chuàng)建錨鏈接

最后，讓我們探索如何在 WPBakery Page Builder 中添加錨鏈接，這使你可以將錨點添加到 WordPress 頁面或帖子中的任何元素。

1、為元素添加唯一 ID

1. 選擇并添加要添加錨點的元素（或者換句話說，鏈接將跳轉(zhuǎn)到的目的地）。
2. 打開元素的編輯窗口。
3. 向下滾動到“元素 ID”部分并添加你的唯一 ID：

<h2 id="section1">section 1</h2>

2、鏈接到錨點

1. 選擇并添加要添加錨鏈接的元素（換句話說，單擊時將跳轉(zhuǎn)到目的地的元素），例如“按鈕”。
2. 打開元素的編輯窗口。
3. 導(dǎo)航至“URL（鏈接）”部分并點擊“選擇 URL”。
4. 在彈出窗口中，使用井號（#）后跟你創(chuàng)建的 ID：

<a href="#section1">Go to section 1</a>

單擊“設(shè)置鏈接”，保存更改，并檢查您的錨鏈接如何工作！

錨鏈接的最佳實踐

以下是在 WordPress 中使用錨鏈接的一些最佳做法：

1. 確保唯一 ID

創(chuàng)建元素 ID 時，確保它們在頁面（或同一 HTML 文檔）上是唯一。重復(fù)的 ID 可能導(dǎo)致意外的跳轉(zhuǎn)行為。

2. 避免在 ID 中使用特殊字符

元素 ID 不能包含空格、標點符號和特殊字符，也不能以數(shù)字或破折號 (-) 開頭。雖然 HTML 允許這樣做，但這可能會在其他情況下造成麻煩，例如 CSS 和 JavaScript，因此最好盡量避免這樣做。

3. 鏈接以“#”開頭，但 ID 中不包含“#”

例如，鏈接應(yīng)為“#section1”，ID 應(yīng)為“section1”。這是一個常見錯誤，會導(dǎo)致錨鏈接無法正常工作。

4. 避免使用裸錨鏈接

裸錨鏈接或原始錨鏈接是使用 URL 本身作為錨點的鏈接，例如 https://example.com。雖然在某些情況下可能需要它們，但它們?nèi)狈ι舷挛?，并且不能提供與描述性錨文本相同的 SEO 優(yōu)勢。

5. 使錨文本清晰且具有描述性

不要使用“了解更多”、“單擊此處”或“繼續(xù)”等含糊不清的短語，而要使用更具體的文本，例如“單擊此處下載用戶手冊 PDF”或“了解有關(guān)我們團隊的更多信息”。這可以提高網(wǎng)絡(luò)可訪問性，幫助用戶了解鏈接將帶他們?nèi)ツ睦铩?/p>

6. 測試錨鏈接是否正常工作

始終測試錨鏈接以確保其正常工作。無效鏈接會讓用戶感到失望，并損害你的 SEO。

何時使用錨鏈接？（示例）

WordPress 中的錨鏈接在很多情況下都非常有用。以下是一些示例：

1. 目錄

如果您有一篇很長的文章，頂部帶有錨鏈接的目錄可以幫助讀者跳轉(zhuǎn)到他們想要閱讀的部分。

2. 單頁導(dǎo)航

對于單頁網(wǎng)站，錨鏈接可以幫助用戶快速到達不同的部分，如“關(guān)于”、“服務(wù)”和“聯(lián)系”。

3. 行動呼吁 (CTA)

使用錨鏈接引導(dǎo)用戶執(zhí)行特定操作，例如填寫表格或查看產(chǎn)品。

4. 長篇內(nèi)容

將長篇內(nèi)容分成帶有錨鏈接的部分，以便讀者可以輕松找到所需的信息。

5. 滾動回到頂部

引入“滾動回到頂部”按鈕（通常位于網(wǎng)站的右下角），可以幫助用戶返回頂部并快速采取行動。

常見問題解答

1. 錨鏈接和常規(guī)鏈接有什么區(qū)別？

錨鏈接指向同一頁面的特定部分，而常規(guī)鏈接通常會將你帶到不同的頁面。

2. 錨鏈接能改善 SEO 嗎？

是的，錨鏈接是內(nèi)部鏈接策略的一部分，它可以幫助搜索引擎了解頁面內(nèi)容的結(jié)構(gòu)和重要性，從而改善 SEO。

3. 錨鏈接可以提高可訪問性嗎？

是的，錨鏈接可以幫助用戶（尤其是殘障人士）更有效地瀏覽長內(nèi)容，從而提高可訪問性。

4. 我如何測試我的錨鏈接是否有效？

可以通過點擊錨鏈接來測試它們是否將你帶到正確的部分。還可以使用瀏覽器開發(fā)人員工具來檢查是否存在任何問題。

5. 有什么插件可以幫助我向 WordPress 添加錨鏈接嗎？

是的，有一些插件可以幫助你創(chuàng)建并添加錨鏈接至 WordPress 布局中的任何元素，例如 WPBakery Page Builder。

結(jié)論

在 WordPress 中添加錨鏈接可以極大地改善您網(wǎng)站的導(dǎo)航、用戶體驗、SEO 和可訪問性。通過遵循本指南中概述的方法，可以使用經(jīng)典編輯器、Gutenberg 編輯器或 WPBakery 頁面構(gòu)建器輕松地在 WordPress 中創(chuàng)建錨鏈接。每種方法都有其優(yōu)點，但如前所述，WPBakery 脫穎而出，允許你將錨鏈接添加到頁面上的任何元素。

聯(lián)系我們
教程看不懂？聯(lián)系我們?yōu)槟赓M解答！免費助力個人，小企站點！	客服微信
① 電話：020-2206-9892
② QQ咨詢：1025174874
③ 郵件：info@361sale.com
④ 工作時間：周一至周五，9:30-18:30，節(jié)假日休息