您將圍繞站點(diǎn)參考可用性和用戶體驗(yàn) (UX) 做出許多設(shè)計(jì)選擇。更重要的是，博客內(nèi)容——通常是閱讀您網(wǎng)站的頁面——具有很大的價(jià)值。如果您將這兩者結(jié)合起來，您通常會(huì)考慮幫助您的內(nèi)容用戶體驗(yàn)的方法。wordpress錨鏈接是內(nèi)容用戶體驗(yàn)的主要內(nèi)容。

將錨鏈接視為相關(guān)文章的內(nèi)聯(lián)導(dǎo)航。您可以將它們放在任何地方，但標(biāo)題是一個(gè)常見的用例。這讓讀者可以在不迷路的情況下隨意跳轉(zhuǎn)文章。這是一流的UX考慮因素，也是大多數(shù)網(wǎng)站所有者應(yīng)該考慮的問題。

為了向您展示使用它們是多么簡單，這篇文章將著眼于WordPress錨鏈接。在我們討論添加它們的不同方式之前，讓我們先談?wù)勊鼈兪鞘裁矗约八鼈兛梢詾槟鍪裁础?/p>

什么是錨鏈接

在一般意義上，錨鏈接是可點(diǎn)擊的內(nèi)嵌導(dǎo)航。它特定于一段內(nèi)容，并將帶您到頁面的稍后位置。我們在閃電博使用它們來幫助您跳轉(zhuǎn)到教程中的不同步驟：

如果您單擊該鏈接，該頁面將跳至您指定的相關(guān)部分。這是一個(gè)簡單的實(shí)現(xiàn)，可以對您網(wǎng)站的可用性產(chǎn)生很大影響。接下來我們將討論其中的一些實(shí)例。

為什么要在WordPress中使用錨鏈接

我們提到可用性是使用WordPress錨鏈接的關(guān)鍵動(dòng)力，這是使用它們的主要原因。但是，有很多用例可以將它們添加到您的站點(diǎn)。例如：

• 如果您想向讀者提供超長格式的內(nèi)容（例如3,000字的文章），您通常會(huì)有一個(gè)目錄。這是為錨鏈接量身定制的用途。
• 當(dāng)您共享書簽文章時(shí)，錨點(diǎn)也可以工作。如果您在URL中包含錨點(diǎn)，讀者將直接跳轉(zhuǎn)到您希望他們看到的位置。
• 您的搜索引擎優(yōu)化 (SEO)可以得到提升，因?yàn)樵谀承┣闆r下，搜索引擎會(huì)將這些WordPress錨鏈接顯示為單獨(dú)的條目。

簡而言之，如果您希望您的讀者留在您的網(wǎng)站上并與您的內(nèi)容互動(dòng)，那么WordPress錨鏈接是爭奪流量的重要武器。至于如何將它們添加到您的網(wǎng)站，接下來的幾節(jié)將向您展示。

如何將錨鏈接添加到任何HTML代碼

添加WordPress錨鏈接的基礎(chǔ)是HTML。事實(shí)上，您可以在任何網(wǎng)站上使用這些，而不僅僅是在WordPress中。有兩部分：錨點(diǎn)和標(biāo)簽。

首先，您將像添加任何其他超鏈接一樣添加錨鏈接——使用標(biāo)簽。對于鏈接本身，您將在它之前使用“octothorpe”（也稱為井號(hào)）：

Click further down the page

但是，如果您單擊此鏈接，則該鏈接將無處可去。為了讓它去某個(gè)地方，您將在內(nèi)容中添加與稍后相同的href鏈接id，而不使用octothorpe：

Our Anchored Heading

這會(huì)將兩個(gè)標(biāo)簽鏈接在一起，并創(chuàng)建您需要的內(nèi)聯(lián)導(dǎo)航。請注意，我們在這里使用了一個(gè)標(biāo)題標(biāo)簽，但這可以是任何HTML標(biāo)簽。歡迎您使用段落標(biāo)簽、圖像標(biāo)簽或HTML的任何其他元素，如果這樣可以將用戶帶到他們需要的地方。

如何添加WordPress錨鏈接

我們現(xiàn)在將向您展示W(wǎng)ordPress錨鏈接的真實(shí)示例！以下是我們將在接下來的幾節(jié)中介紹的內(nèi)容：

• 您可以將錨點(diǎn)添加到區(qū)塊編輯器元素，并在其他元素上設(shè)置ID。這在經(jīng)典編輯器中也是可能的。
• Elementor等頁面構(gòu)建器將提供一個(gè)模塊，讓您將WordPress錨鏈接添加到內(nèi)容。
• 有些插件可以為您的內(nèi)容添加自動(dòng)錨鏈接，這可以節(jié)省您一些設(shè)置時(shí)間。

首先，我們將看看手動(dòng)方法。雖然聽起來很難，但使用區(qū)塊編輯器讓這一切變得簡單。

1. 使用手動(dòng)方法將錨鏈接添加到區(qū)塊編輯器

對于大多數(shù)用戶來說，區(qū)塊編輯器提供了將WordPress錨鏈接添加到您的內(nèi)容所需的一切。首先，突出顯示要添加鏈接的一段文本，就像使用超鏈接一樣：

接下來，使用相關(guān)選項(xiàng)將其轉(zhuǎn)換為鏈接，并添加您的錨標(biāo)記，前面有一個(gè)octothorpe：

你會(huì)知道你是否做對了，因?yàn)槟銜?huì)在鏈接旁邊看到“internal”這個(gè)詞。保存后，轉(zhuǎn)到您想要將錨點(diǎn)設(shè)置到的內(nèi)容部分。我們將使用標(biāo)題。

您需要前往右側(cè)邊欄中的Block > Advanced部分，然后展開它。在那里，您將看到HTML錨字段：

在這里，添加WordPress錨鏈接的文本，不帶octothorpe。這就是您需要做的所有事情，如果您查看實(shí)時(shí)預(yù)覽，您會(huì)發(fā)現(xiàn)錨鏈接有效。

將錨鏈接添加到經(jīng)典編輯器

經(jīng)典編輯器的過程是完全手動(dòng)的HTML方法和區(qū)塊編輯器的混合體。首先，您將在Visual頁面中添加指向您的內(nèi)容的鏈接……

…然后您將切換到文本編輯器并將錨點(diǎn)添加到您想要的元素：

切換回可視化編輯器后，您將看到該鏈接，但在您預(yù)覽文章之前，它可能無法按預(yù)期工作。

2.使用頁面構(gòu)建器插件添加錨鏈接

大多數(shù)頁面構(gòu)建器插件，例如Elementor或Beaver Builder都提供模塊來將錨鏈接添加到您的內(nèi)容中。這些可以像HTML一樣靈活，因?yàn)樗鼈兛梢匀ト魏纹渌K可以去的地方。

例如，在Elementor中，您將使用Menu Anchor元素：

要使用它，請將其拖動(dòng)到您選擇的點(diǎn)。我們建議您將其放在任何標(biāo)題元素之前，或者至少在您需要錨定的部分之前。

保存更改后，您可以測試錨鏈接。不同的頁面構(gòu)建器使用不同的方法添加WordPress錨鏈接，您還會(huì)在前端找到不同的實(shí)現(xiàn)。但是，概念是相同的，您也會(huì)得到相同的最終結(jié)果。

3.使用插件將自動(dòng)錨鏈接添加到您的站點(diǎn)

如果您想為您的網(wǎng)站添加更多功能，并幫助您的WordPress錨鏈接上一個(gè)臺(tái)階，您可以使用目錄 (ToC) 插件。有一些可用，但大多數(shù)沒有針對當(dāng)前WordPress版本的測試，或者沒有定期更新。但是，SimpleTOC插件勾選了所有正確的框：

當(dāng)然，您需要以通常的方式安裝并激活插件，然后前往區(qū)塊編輯器。接下來，保存您的內(nèi)容，然后搜索SimpleTOC區(qū)塊：

將其添加到文章后，它將自動(dòng)獲取內(nèi)容中任何標(biāo)題的鏈接。ToC將顯示這些標(biāo)題，您無需執(zhí)行任何手動(dòng)標(biāo)記。

但是，如果您愿意，可以限制ToC中的某些標(biāo)題。如果您將simpletoc-hiddenCSS類添加到Heading Block的Additional CSS class(es)字段，這將從您的ToC中隱藏它。您可以在與HTML錨字段相同的位置找到此字段：在“區(qū)塊”>“高級(jí)”側(cè)邊欄中：

這是一個(gè)簡單的實(shí)現(xiàn)，可能沒有手動(dòng)方法那樣的靈活性，但它很快，讓您無需太多努力就能以典型的方式使用WordPress錨鏈接。

小結(jié)

用戶的體驗(yàn)是最重要的，因此，您需要考慮如何讓他們在網(wǎng)站上的時(shí)間變得重要。WordPress錨鏈接可以實(shí)現(xiàn)這一點(diǎn)。它們幫助您創(chuàng)建內(nèi)聯(lián)內(nèi)容導(dǎo)航，反過來，這將幫助您的用戶滾動(dòng)到他們需要的內(nèi)容，而不會(huì)大驚小怪或延遲。

這篇文章介紹了幾種將WordPress錨鏈接添加到您的網(wǎng)站的方法。這是一個(gè)快速回顧：

• 您可以將它們作為HTML標(biāo)簽的一部分添加到任何網(wǎng)站上，而不僅僅是WordPress。
• 區(qū)塊編輯器允許您以與添加超鏈接相同的方式添加錨點(diǎn)。
• Elementor等頁面構(gòu)建器通常具有專用模塊，可讓您向內(nèi)容添加錨點(diǎn)。
• 諸如SimpleTOC之類的插件可以將自動(dòng)WordPress錨鏈接添加到您的內(nèi)容中。在某些情況下，插件會(huì)更新其目錄以匹配您文章的標(biāo)題。