如何在 WordPress 中創建可視化鏈接預覽

用有用的資源、相關產品、促銷 CTA 或有趣的策劃作品等內容豐富您的 WordPress 頁面和帖子，可以幫助您或您的品牌為您的受眾提供更多價值。 然而，一個普通的鏈接並不總是能切斷它——除非錨文本和周圍的情緒足夠引人注目，否則這些鏈接可能會被擦過。 通過為您的網站創建視覺鏈接（如您在 Facebook 上看到的增強鏈接），您可以添加訪問者會關注的引人入勝的交互式內容。 WordPress 的 Visual Link Preview 插件是一種為鏈接添加更多華麗的簡單方法。

您可以通過以下幾種方式使用此插件：

• 將 CTA 添加到附屬鏈接。
• 備份索賠、事實和統計數據。
• 策劃來自其他網站的內容。
• 包括有用的資源，供讀者了解更多信息。
• 推廣您的電子商務商店產品。

此外，以最簡單的形式，Visual Link Preview 插件是一種更具吸引力的方式來鏈接到相關帖子並讓人們在您的網站上停留更長時間。

該插件可讓您為任何內部或外部鏈接創建視覺預覽，您還可以創建具有與您的品牌或網站相匹配的樣式的自定義模板。 然後，在您的帖子或頁面的任何位置放置一個簡化的預覽框。 讓我們來看看如何在古騰堡和經典編輯器中向 WordPress 添加預覽框。

查找並安裝 Visual Link Preview 插件

您可能已經知道如何執行此操作，但以防萬一，這裡有一個關於如何安裝新 WordPress 插件的超快速操作：

• 登錄您的 WordPress 儀表板。
• 從左側邊欄中選擇插件。
• 在將顯示在插件下方的子菜單中選擇添加新項。
• 在頁面右上角的搜索欄中鍵入“Visual Link Preview”。
• 單擊插件預覽框右上角的立即安裝。
• 安裝好後，點擊激活。

激活插件後，您將被重定向到插件頁面，您會在頂部看到此通知。 （入門文檔會將您帶到此頁面。）

設置和自定義入門

激活插件後，向下滾動插件列表以找到它。 在插件名稱下，單擊設置鏈接 - 您將被發送到此頁面：

默認情況下，使用自定義樣式切換將關閉。 如果你打開它，就會出現一堆選項。

有以下自定義：

• 容器寬度、背景顏色和填充。
• 邊框半徑、寬度、樣式（實線、虛線、虛線等）和顏色。
• 圖像位置（左、右、上或下）、大小和邊框半徑。
• 標題和摘要字體的大小和顏色。

其中大部分都是不言自明的，但有一些關於圖像大小的信息需要了解。 您可以設置縮略圖大小或自定義大小。 對於縮略圖，標準尺寸為“縮略圖”、“中”和“大”，因此您只需在該字段中輸入您想要的任何內容。 或者，您可以按以下格式設置自定義大小：widthxheight（例如，150×150）。

現在，我將保留所有內容以查看默認鏈接框的外觀。 然後，我將返回進行調整。

將插件與古騰堡塊編輯器一起使用

我進入了一篇博客文章草稿，並在段落下方添加了一個塊。 您將在 Widgets 下找到 Visual Link Preview 塊，或者您可以在塊選擇器的頂部搜索它。

這是 Visual Link Preview 塊的樣子：

當您單擊“選擇帖子或頁面”框時，您將看不到內容的下拉列表； 你必須搜索你想要的東西。 您還可以添加指向外部 URL 的鏈接（我稍後會詳細介紹）。

我選擇了已發布的博客文章。 這是我沒有對樣式進行任何自定義的樣子：

古騰堡視覺鏈接預覽的塊設置

如果您單擊塊頂部的三個點的堆棧，您將看到一個下拉菜單。 選擇顯示塊設置以顯示帶有選項的右側邊欄。 從這裡，您可以進行多項更改：

更改鏈接。 請注意，如果您單擊“更改鏈接”，您擁有的鏈接將立即被刪除，因此請確保不要意外單擊它。

更改或刪除顯示圖像。 如果刪除顯示圖像，則視覺鏈接如下所示：

如果您不喜歡沒有圖像的外觀，可以單擊“選擇圖像”重新添加一個。但是，您必須瀏覽媒體庫或上傳圖像——您將無法選擇自動- 再次添加特色圖片，就像您第一次添加鏈接時所做的那樣。

當然，您可以在媒體庫中找到特色圖片，但它可能已被掩埋。 您也可以重新添加鏈接，以便它自動添加原始內容。

打開和關閉鏈接設置。 您可以選擇在新選項卡中打開鏈接，也可以將鏈接轉換為 nofollow 鏈接。

使用古騰堡添加外部鏈接

這一次，我添加了一個外部鏈接。 我已將其複制並粘貼到正確的字段中：

當您單擊使用此 URL 時，會發生與添加內部鏈接時相同的事情。 圖像、標題和摘錄將自動填充，您可以在右側邊欄中進行更改。 您也可以在“內容”部分單擊“本地保存圖像”，插件從 URL 源中抓取的顯示圖像將添加到您的 WordPress 媒體庫中。

保存可重用塊

如果您有一個經常使用的頁面、博客文章或外部鏈接，您可以創建一次，然後將其保存為可重複使用的塊，以便將來輕鬆添加。 這只適用於古騰堡編輯器，僅供參考。

創建完塊後，單擊頂部的三點圖標，該圖標與您用於訪問選項側邊欄的圖標相同。 然後，選擇添加到可重用塊。 您可以為塊命名，它會在您的塊庫中以備將來使用。

在經典編輯器中使用插件

使用經典編輯器，進入您的帖子或頁面，然後轉到您想要添加視覺鏈接的位置。 單擊頁面頂部的 Visual Link Preview 按鈕：

會出現這個框：

從類型下拉菜單中，您可以選擇添加自己的鏈接或外部鏈接。 首先，我要添加我自己的鏈接。 選擇要鏈接的內容後，這些字段將自動填充，與 Gutenberg 相同。 您將在此處進行任何更改。 您可以刪除圖像並選擇添加新圖像、更改標題並從此窗口更新摘要。 您還可以在此處使用插件的默認設置或自定義模板，就像使用 Gutenberg 一樣。

使用經典編輯器添加外部鏈接

這一次，我要添加一個外部鏈接。 這些是外部鏈接的字段：

添加 URL 時，字段將自動更新 - 與內部鏈接相同。 然後，您可以在將其插入頁面或帖子之前進行任何您想要的更改。 經典編輯器中也有“本地保存圖像”選項。

自定義視覺鏈接預覽模板和框

該塊設置欄還包括底部的“樣式”部分，您可以在其中選擇“使用設置中的默認值”模板或“簡單”模板。 然而，這令人困惑，因為它們實際上是同一回事。 我稍後會解釋更多。 首先，讓我們進入如何自定義鏈接預覽框。

從該樣式部分，單擊更改模板樣式鏈接。 將打開一個新頁面，您可以在其中創建自定義模板（您也可以通過插件設置到達此處）。 同樣，自定義設置簡單、易懂且直截了當，因此您應該可以輕鬆找到解決方法。 這是我嘗試了一些自定義後模板的樣子：

不是很好。 部分問題是預覽文本太長。 回到您的帖子或頁面，如果您單擊該塊，編輯器應出現在右側邊欄中。 然後，您可以轉到“內容”部分並單擊標題和摘錄字段進行更改。

我沒有使用縮略圖，而是返回到模板自定義頁面並為圖像輸入自定義大小，這將其變成了一個正方形（幸運的是，這是一個完美裁剪的）。 我玩了更多的標題和摘錄副本，以便它在塊中和圖片旁邊的尺寸更好。 這個更好：

您可能會花費大量時間來找出正確的自定義設置，而且您應該這樣做，尤其是因為您只能創建一個自定義模板。

預覽您的模板自定義

自定義模板時無法看到實時預覽。 您必須在新窗口中打開您的帖子或頁面，在模板自定義頁面上進行更改，然後單擊返回帖子或頁面。 在兩個下拉模板選項之間來回切換（請記住，它們實際上彼此沒有任何不同）——這會刷新框，以便您可以看到最新的更改。

如何恢復默認樣式

假設您進行了一系列更改，然後您意識到您更喜歡默認樣式。 如果您在模板設置中啟用“使用自定義樣式”開關，您的自定義設置將在您返回頁面或發佈時應用，無論您是從“設置”中選擇“使用默認”還是從“模板”下拉列表中選擇“簡單”（就像我說的，令人困惑）。

如果您想恢復插件的默認設置，您可以轉到模板設置頁面並關閉使用自定義樣式按鈕。 如果您想最終將其重新打開，您的所有自定義設置都將在那裡，但是如果您更喜歡插件的外觀，這將允許您使用插件的默認設置。

Visual Link Preview 插件的缺點

Visual Link Preview 插件是一個簡單明了的插件，可以按照它所說的去做，並且非常容易學習使用。 然而，因為它太基礎了，它在一些可以使用改進的地方也缺乏。

沒有包含所有內容的下拉菜單。 我想要這個選項，而不必記住要添加為鏈接的博客文章或頁面的名稱。

您無法看到自定義模板的實時預覽。 每次您想查看這是否是完美的填充量或要使用的邊框類型時，在帖子和模板設置頁面之間來回切換非常笨拙。

您只能創建一個自定義模板。 這是插件的最大缺點。 您不能創建多個模板，然後挑選您用來匹配特定頁面、博客文章或鏈接類型的模板。 您也無法設置某些預覽框以使用您的自定義模板，而其他人則無法使用插件的默認設置——兩者皆有。

包起來

總而言之，儘管有缺點，我還是喜歡 Visual Link Preview 插件。 無論您喜歡使用哪種編輯器（古騰堡或經典），設置和使用都輕而易舉。 這絕對是一種更美觀和引人注目的添加鏈接的方式，如果您參與聯盟營銷或想要鏈接到您的目標網頁，這種方式可以走得更遠。 目前，由於您不能創建多個模板，因此最好用於所有帖子和頁面具有標準化外觀的網站。 因此，如果您有許多不同風格的登錄頁面，您將很難創建一個適合任何位置的預覽框模板。 否則，這是一個輕量級插件，可以很好地完成其一項工作。

您可能還喜歡這篇文章，其中包含您可以在 Divi 中使用錨鏈接做的五件很酷的事情。