您將圍繞站點參考可用性和使用者體驗 (UX) 做出許多設計選擇。更重要的是，部落格內容——通常是閱讀您網站的頁面——具有很大的價值。如果您將這兩者結合起來，您通常會考慮幫助您的內容使用者體驗的方法。WordPress錨連結是內容使用者體驗的主要內容。
將錨連結視為相關文章的內聯導航。您可以將它們放在任何地方，但標題是一個常見的用例。這讓讀者可以在不迷路的情況下隨意跳轉文章。這是一流的UX考慮因素，也是大多數網站所有者應該考慮的問題。
為了向您展示使用它們是多麼簡單，這篇文章將著眼於WordPress錨連結。在我們討論新增它們的不同方式之前，讓我們先談談它們是什麼，以及它們可以為您做什麼。
什麼是錨連結
在一般意義上，錨連結是可點選的內嵌導航。它特定於一段內容，並將帶您到頁面的稍後位置。我們在閃電博使用它們來幫助您跳轉到教程中的不同步驟：
如果您單擊該連結，該頁面將跳至您指定的相關部分。這是一個簡單的實現，可以對您網站的可用性產生很大影響。接下來我們將討論其中的一些例項。
為什麼要在WordPress中使用錨連結
我們提到可用性是使用WordPress錨連結的關鍵動力，這是使用它們的主要原因。但是，有很多用例可以將它們新增到您的站點。例如：
- 如果您想向讀者提供超長格式的內容（例如3,000字的文章），您通常會有一個目錄。這是為錨連結量身定製的用途。
- 當您共享書籤文章時，錨點也可以工作。如果您在URL中包含錨點，讀者將直接跳轉到您希望他們看到的位置。
- 您的搜尋引擎優化 (SEO)可以得到提升，因為在某些情況下，搜尋引擎會將這些WordPress錨連結顯示為單獨的條目。
簡而言之，如果您希望您的讀者留在您的網站上並與您的內容互動，那麼WordPress錨連結是爭奪流量的重要武器。至於如何將它們新增到您的網站，接下來的幾節將向您展示。
如何將錨連結新增到任何HTML程式碼
新增WordPress錨連結的基礎是HTML。事實上，您可以在任何網站上使用這些，而不僅僅是在WordPress中。有兩部分：錨點和標籤。
首先，您將像新增任何其他超連結一樣新增錨連結——使用<a>標籤。對於連結本身，您將在它之前使用“octothorpe”（也稱為井號）：
<a href="#anchor-link">Click further down the page</a>
但是，如果您單擊此連結，則該連結將無處可去。為了讓它去某個地方，您將在內容中新增與稍後相同的href連結id，而不使用octothorpe：
<h2 id="anchor-link">Our Anchored Heading</h2>
這會將兩個標籤連結在一起，並建立您需要的內聯導航。請注意，我們在這裡使用了一個標題標籤，但這可以是任何HTML標籤。歡迎您使用段落標籤、影象標籤或HTML的任何其他元素，如果這樣可以將使用者帶到他們需要的地方。
如何新增WordPress錨連結
我們現在將向您展示WordPress錨連結的真實示例！以下是我們將在接下來的幾節中介紹的內容：
- 您可以將錨點新增到區塊編輯器元素，並在其他元素上設定ID。這在經典編輯器中也是可能的。
- Elementor等頁面構建器將提供一個模組，讓您將WordPress錨連結新增到內容。
- 有些外掛可以為您的內容新增自動錨連結，這可以節省您一些設定時間。
首先，我們將看看手動方法。雖然聽起來很難，但使用區塊編輯器讓這一切變得簡單。
1. 使用手動方法將錨連結新增到區塊編輯器
對於大多數使用者來說，區塊編輯器提供了將WordPress錨連結新增到您的內容所需的一切。首先，突出顯示要新增連結的一段文字，就像使用超連結一樣：
接下來，使用相關選項將其轉換為連結，並新增您的錨標記，前面有一個octothorpe：
你會知道你是否做對了，因為你會在連結旁邊看到“internal”這個詞。儲存後，轉到您想要將錨點設定到的內容部分。我們將使用標題。
您需要前往右側邊欄中的Block > Advanced部分，然後展開它。在那裡，您將看到HTML錨欄位：
在這裡，新增WordPress錨連結的文字，不帶octothorpe。這就是您需要做的所有事情，如果您檢視實時預覽，您會發現錨連結有效。
將錨連結新增到經典編輯器
經典編輯器的過程是完全手動的HTML方法和區塊編輯器的混合體。首先，您將在Visual頁面中新增指向您的內容的連結……
…然後您將切換到文字編輯器並將錨點新增到您想要的元素：
切換回視覺化編輯器後，您將看到該連結，但在您預覽文章之前，它可能無法按預期工作。
2.使用頁面構建器外掛新增錨連結
大多數頁面構建器外掛，例如Elementor或Beaver Builder都提供模組來將錨連結新增到您的內容中。這些可以像HTML一樣靈活，因為它們可以去任何其他模組可以去的地方。
例如，在Elementor中，您將使用Menu Anchor元素：
要使用它，請將其拖動到您選擇的點。我們建議您將其放在任何標題元素之前，或者至少在您需要錨定的部分之前。
儲存更改後，您可以測試錨連結。不同的頁面構建器使用不同的方法新增WordPress錨連結，您還會在前端找到不同的實現。但是，概念是相同的，您也會得到相同的最終結果。
3.使用外掛將自動錨連結新增到您的站點
如果您想為您的網站新增更多功能，並幫助您的WordPress錨連結上一個臺階，您可以使用目錄 (ToC) 外掛。有一些可用，但大多數沒有針對當前WordPress版本的測試，或者沒有定期更新。但是，SimpleTOC外掛勾選了所有正確的框：
當然，您需要以通常的方式安裝並啟用外掛，然後前往區塊編輯器。接下來，儲存您的內容，然後搜尋SimpleTOC區塊：
將其新增到文章後，它將自動獲取內容中任何標題的連結。ToC將顯示這些標題，您無需執行任何手動標記。
但是，如果您願意，可以限制ToC中的某些標題。如果您將simpletoc-hiddenCSS類新增到Heading Block的Additional CSS class(es)欄位，這將從您的ToC中隱藏它。您可以在與HTML錨欄位相同的位置找到此欄位：在“區塊”>“高階”側邊欄中：
這是一個簡單的實現，可能沒有手動方法那樣的靈活性，但它很快，讓您無需太多努力就能以典型的方式使用WordPress錨連結。
小結
使用者的體驗是最重要的，因此，您需要考慮如何讓他們在網站上的時間變得重要。WordPress錨連結可以實現這一點。它們幫助您建立內聯內容導航，反過來，這將幫助您的使用者滾動到他們需要的內容，而不會大驚小怪或延遲。
這篇文章介紹了幾種將WordPress錨連結新增到您的網站的方法。這是一個快速回顧：
- 您可以將它們作為HTML標籤的一部分新增到任何網站上，而不僅僅是WordPress。
- 區塊編輯器允許您以與新增超連結相同的方式新增錨點。
- Elementor等頁面構建器通常具有專用模組，可讓您向內容新增錨點。
- 諸如SimpleTOC之類的外掛可以將自動WordPress錨連結新增到您的內容中。在某些情況下，外掛會更新其目錄以匹配您文章的標題。
評論留言