在 WordPress 文章內顯示如 Facebook 鏈結預覽效果 – 安裝 Visual Link Preview 插件

在 WordPress 文章內顯示如 Facebook 鏈結預覽效果 – 安裝 Visual Link Preview 插件

我經常在網路上查找特定主題的文章,當看到內容還不錯的,就會將之儲存到我使用 Notion 建立的閱讀清單,或使用 Hypothes 可以對網頁內容作摘記。當某篇文章我可能想分享個人的評論或重點文摘時,若是軟體本業的類型,我會分享到「FB 社團-軟體設計鮮思維」。如果是一般或生活性,我可能也會分享到個人FB或特定主題的社團。

我覺得分享文章鏈結在 Facebook 或 Tweet 時,所顯現的鏈結預覽效果挺不錯,同時我現在也打算將我在 FB 所分享的文章鏈結,以及心得摘要等,同步在 WordPress 文章內。不過我也希望能有鏈結預覽這種美觀又醒目的效果。查找外掛 (plugin) 資訊,找到這款還算不錯用的 Visual Link Preview。以下就是我使用其外掛所產生的預覽效果。

如何安裝與設定,底下這篇教學文很清楚。

這個插件可以自訂 Preview 的呈現內容與樣式,不過我覺得設定界面與功能還是陽春了些,像是它提供了所謂的「Dynamic Template」樣板可以客製化 CSS 效果,但竟然無法設定預覽容器 (container) 的寬高。要可以完全客製化預覽內容與樣式,參考官方文件:「Custom code your link template」。需要複製一份預設的樣板檔案,更名資料夾與檔案名稱,修改代碼 (這就必須具備 CSS 技能才行,尤其是 flex box 的設定。),上傳至所使用佈景主題 (一般會有一份該主題的 child theme) 的資料夾內,參考如下圖:
custom template directory

不過我現在還不會如何設定好 flex box 的寬與高度,只要一設定最大高度 (max-height),內容就會溢出。我還需要再研究看看,目前我就僅是使用該插件預設的「Static Template」,將容器大小限制在寬度爲 500px 以內。

文章導覽

   

發佈留言

發佈留言必須填寫的電子郵件地址不會公開。 必填欄位標示為 *