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

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

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

[visual-link-preview encoded="eyJ0eXBlIjoiZXh0ZXJuYWwiLCJwb3N0IjowLCJwb3N0X2xhYmVsIjoiIiwidXJsIjoiaHR0cHM6Ly93b3JkcHJlc3Mub3JnL3BsdWdpbnMvdmlzdWFsLWxpbmstcHJldmlldy8iLCJpbWFnZV9pZCI6LTEsImltYWdlX3VybCI6Imh0dHBzOi8vcHMudy5vcmcvdmlzdWFsLWxpbmstcHJldmlldy9hc3NldHMvYmFubmVyLTc3MngyNTAucG5nP3Jldj0yMDEwNzQwIiwidGl0bGUiOiJWaXN1YWwgTGluayBQcmV2aWV3Iiwic3VtbWFyeSI6IkRpc3BsYXkgYSBmdWxseSBjdXN0b21pemFibGUgdmlzdWFsIGxpbmsgcHJldmlldyBmb3IgYW55IGludGVybmFsIG9yIGV4dGVybmFsIGxpbmsuIiwidGVtcGxhdGUiOiJzcG90bGlnaHQifQ=="]

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

[visual-link-preview encoded="eyJ0eXBlIjoiZXh0ZXJuYWwiLCJwb3N0IjowLCJwb3N0X2xhYmVsIjoiIiwidXJsIjoiaHR0cHM6Ly93cGppYW4uY29tL3poLXR3L3RpcHMvMjAyMDExMTgzMzg1Mi5odG1sIiwiaW1hZ2VfaWQiOi0xLCJpbWFnZV91cmwiOiJodHRwczovL3dwamlhbi5jb20vd3AtY29udGVudC91cGxvYWRzLzIwMjAvMDcvaG93LXRvLWNyZWF0ZS1hLXZpc3VhbC1saW5rLXByZXZpZXctaW4td29yZHByZXNzLnBuZyIsInRpdGxlIjoi5aaC5L2V5ZyoV29yZFByZXNz5Lit5Ym15bu65Y+v6KaW6Y+I5o6l6aCQ6Ka9Iiwic3VtbWFyeSI6IuWIqeeUqOacieeUqOeahOizh+a6kO+8jOebuOmXnOeUouWTge+8jOS/g+mKt+aAp0NUQeaIluaciei2o+eahOetluWxleS9nOWTgeetieWFp+WuueixkOWvjFdvcmRQcmVzc+mggemdouWSjOW4luWtkO+8jOWPr+S7peW5q+WKqeaCqOaIluaCqOeahOWTgeeJjOeCuuWPl+ecvue+pOmrlOaPkOS+m+abtOWkmuWDueWAvOOAguS9huaYr++8jOaZrumAmumPiOaOpeS4puS4jee4veaYr+acg+WIh+aOieWugy3pmaTpnZ7pjKjmlofmnKzlkozlkajlnI3nmoTmg4Xnt5LotrPlpKDlvJXkurrms6jnm67vvIzlkKbliYfpgJnkupvpj4jmjqXlj6/og73mnIPnq4vljbPooqvmk6bmjonjgILpgJrpgY7ngrrmgqjnmoTntrLnq5nlibXlu7roppboprrpj4jmjqXvvIzkvovlpoLlnKhGYWNlYm9va+S4iueci+WIsOeahOWinuW8t+mPiOaOpe+8jOaCqOWPr+S7pea3u+WKoOWQuOW8leioquWVj+iAheazqOaEj+eahOW8leS6uuWFpeWLneeahOS6kuWLleW8j+WFp+WuueOAgldvcmRQcmVzc+eahFZpc3VhbExpbmtQcmV2Li4uIiwidGVtcGxhdGUiOiJ1c2VfZGVmYXVsdF9mcm9tX3NldHRpbmdzIn0="]

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

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