如何“輕鬆”在WordPress中添加錨定鏈接(逐步操作)


我們有時會在較長的WordPress帖子中使用錨鏈接,以幫助用戶快速跳至他們要閱讀的部分。

內容鏈接表中經常使用錨鏈接,因為它們可幫助用戶在不重新加載頁面的情況下上下較長的文章。 它也可以幫助SEO,因為Google可能會將它們顯示在您的搜索列表下方,以便於導航(稍後會詳細介紹)。

在本逐步指南中,我們將解釋什麼是錨鏈接,並向您展示如何輕鬆地在WordPress中添加錨鏈接。

在WordPress中添加錨鏈接

準備? 讓我們從錨鏈接的實際示例開始。

以下是我們將在本指南中涵蓋的所有主題的列表。 繼續並單擊這些鏈接中的任何一個,您將被帶到該特定部分。

定位鏈接是頁面上的一種鏈接,可將您帶到同一頁面上的特定位置。 它允許用戶跳到他們最感興趣的部分。

看看下面的動畫截圖:

錨鏈接預覽

如您所見,單擊錨點鏈接會將用戶帶到同一頁面上的特定部分。

錨鏈接通常在較長的文章中用作目錄,使用戶可以快速跳至要閱讀的部分。

為什麼以及何時應使用錨鏈接?

普通用戶在決定是否要停留或離開您的網站之前花費少於幾秒鐘的時間。 您只有短短的幾秒鐘就可以說服用戶留下來。

最好的方法是幫助他們快速查看所需的信息。

通過允許用戶跳過其餘內容並直接跳到他們感興趣的部分,錨鏈接使此操作變得更加容易。 這可以改善用戶體驗,並幫助您贏得新客戶/讀者。

錨鏈接也非常適合WordPress SEO。 Google可以在搜索結果中顯示錨鏈接,作為“跳轉鏈接”。

跳轉到搜索結果中的鏈接

有時Google還會顯示該頁面上的幾個鏈接,以跳轉到鏈接,這被證明可以提高搜索結果中的點擊率。 換句話說,您將獲得更多的網站訪問量。

多次跳轉到搜索結果下方的鏈接

話雖如此,讓我們看一下如何輕鬆地在WordPress中添加錨鏈接。

如果您只想在文章中添加一些錨鏈接,則可以輕鬆地手動進行。

基本上,您需要添加兩件事來使錨文本按預期工作。

  1. 在錨文本之前創建帶有#號的錨鏈接。
  2. 添加 id 屬性分配給您希望用戶進入的文本。

讓我們從錨鏈接部分開始。

步驟1.創建錨鏈接

首先,您需要選擇要鏈接的文本,然後在WordPress Gutenberg編輯器中單擊“插入鏈接”按鈕。

在WordPress中添加鏈接

這將彈出插入鏈接彈出窗口,您通常會在其中添加URL或尋找要鏈接的帖子或頁面。

但是,對於錨鏈接,您只需使用#作為前綴,然後輸入要用戶跳轉到的部分的關鍵字。

創建錨鏈接

之後,單擊輸入按鈕以創建鏈接。

有關選擇用作錨點鏈接的文本的一些有用提示:

  • 使用與您鏈接到的部分相關的關鍵字。
  • 不要使錨鏈接不必要地冗長或複雜。
  • 使用連字符來分隔單詞並使它們更具可讀性。
  • 您可以在錨文本中使用大寫字母以使其更具可讀性。 例如: #Best-Coffee-Shops-Manhattan

添加鏈接後,您將能夠看到在編輯器中創建的鏈接。 但是,單擊鏈接不會執行任何操作。

那是因為瀏覽器找不到錨鏈接作為ID。

通過將瀏覽器指向用戶單擊錨鏈接時要顯示的區域,部分或文本來解決此問題。

步驟2.將ID屬性添加到鏈接的部分

在內容編輯器中,向下滾動到您希望用戶單擊錨鏈接時導航到的部分。 通常,它是新章節的標題。

接下來,單擊以選擇塊,然後在塊設置中單擊“高級”選項卡以將其展開。 您只需單擊標題欄設置下的“高級”標籤。

HTML錨

之後,您需要在“ HTML錨點”字段下添加與錨點鏈接相同的文本。 確保添加不帶#前綴的文本。

現在,您可以保存您的帖子,並通過單擊“預覽”選項卡來查看錨鏈接的運行情況。

如果您要顯示的部分不是標題,而只是常規段落或任何其他塊,該怎麼辦?

在這種情況下,您需要單擊塊設置上的三點菜單,然後選擇“編輯為HTML”。

編輯為HTML

這將允許您編輯該特定塊的HTML代碼。 您需要選擇要指向的元素的HTML標籤。 例如,

如果是pagraph,或者

如果它是一個表塊,等等。

現在,您需要將錨作為ID屬性添加到該標籤,如以下代碼所示:

現在,您將看到一個通知,指出此塊包含意外或無效的內容。 您需要單擊“轉換為HTML”以保留所做的更改。

轉換成HTML

如何在經典編輯器中手動添加錨鏈接

如果您仍在使用舊的WordPress經典編輯器,則可以通過以下方法添加錨點鏈接。

步驟1.創建錨鏈接

首先,選擇要更改為錨鏈接的文本,然後單擊“插入鏈接”按鈕。

在經典編輯器中添加錨鏈接

之後,您需要添加帶有#號前綴的錨鏈接,後跟要用於鏈接的段塞。

步驟2.將ID屬性添加到鏈接的部分

下一步是將瀏覽器指向用戶單擊錨鏈接時要顯示的部分。

為此,您需要在經典編輯器中切換到“文本”模式。 之後,向下滾動到要顯示的部分。

在經典編輯器中添加錨點ID

現在找到您要定位的HTML標籤。 例如,

, 等等。

您需要使用不帶#前綴的錨鏈接的slug向其添加ID屬性,如下所示:

現在,您可以保存更改,然後單擊“預覽”按鈕以查看您的錨鏈接。

如何在HTML中手動添加錨鏈接

如果您習慣使用WordPress中舊的經典編輯器的“文本”模式編寫文字,那麼這裡就是您手動在HTML中創建錨鏈接的方法。

首先,您需要使用通常的#前綴創建錨鏈接 標籤,如下所示:

Best Coffee Shops in Manhattan

接下來,您需要向下滾動到用戶單擊鏈接時要顯示的部分。

通常,此部分是標題(h2,h3,h4等),但是它可以是任何其他HTML元素甚至是簡單的段落

標籤。

您需要將ID屬性添加到HTML標記,然後添加不帶#前綴的錨鏈接段。

Best Coffee Shops in Manhattan

現在,您可以保存更改並預覽網站以測試錨鏈接。

該方法適用於定期發布長篇文章並需要創建帶有錨鏈接的目錄的用戶。

您需要做的第一件事是安裝並激活Easy Table of Contents插件。 有關更多詳細信息,請參閱有關如何安裝WordPress插件的分步指南。

該插件可讓您自動生成帶有錨鏈接的目錄。 它使用標題來猜測內容部分,您可以完全自定義它以滿足您的需求。

激活後,只需轉到 設置»目錄 頁面以配置插件設置。

簡易目錄插件設置

首先,您需要為要添加目錄的帖子類型啟用它。 默認情況下,該插件為頁面啟用,但您也可以為您的帖子啟用該插件。

您也可以啟用自動插入選項。 這使插件可以自動為所有文章(包括符合條件的較舊文章)生成目錄。

如果只想自動生成特定文章的目錄,則可以取消選中此選項。

接下來,向下滾動一點,選擇要在何處顯示目錄以及何時觸發它。

選擇在何時何地顯示目錄

您可以查看頁面上的其他高級設置,並根據需要進行更改。

不要忘記點擊“保存更改”按鈕來保存您的設置。

如果啟用了自動插入選項,則現在可以查看具有指定標題數量的現有文章。

您會注意到,該插件將在文章的第一個標題之前自動顯示目錄。

如果要手動生成特定文章的目錄,則需要在要顯示帶有錨鏈接的目錄的地方編輯文章。

在帖子編輯屏幕上,向下滾動到編輯器下方的“目錄”標籤。

手動添加帶有錨鏈接的目錄

在這裡,您可以選中“插入目錄”選項,然後選擇要包含為錨鏈接的標題。

現在,您可以保存更改並預覽文章。 該插件將自動顯示錨鏈接列表作為您的目錄。

目錄預覽

有關更多詳細說明,請參閱有關如何在WordPress中添加目錄的文章。

我們希望本文能幫助您學習如何輕鬆地在WordPress中添加錨鏈接。 您可能還想查看我們的技巧,以了解如何針對SEO適當優化博客文章,以及我們精選的最佳WordPress頁面構建器插件。

如果您喜歡這篇文章,請訂閱我們的YouTube頻道WordPress視頻教程。 您也可以在找到我們 推特 和Facebook。