Anchor
科技人文

如何在 Medium 和 WordPress 設置錨點 (anchor)



錨點 (anchor) 是在網頁中的一個指定位置,作者可以設定一個鏈結,讓讀者點擊後跳到一個錨點。具體效果是作樣?請試點擊上圖看看 — 別忙記順道給我按讚啊。

在 Medium 文章中使用錨點

  • 請用 Chrome 瀏覽器打開編輯文章的頁面(其他瀏覽器應該也有方法但我沒有經驗)。找出你想設定的「錨點」位置。例如我只想在這篇文章中利用一個錨點,就是文章最底部的「讚賞鍵」位置。
  • 點擊目標位置,一般會選該位置的上方一列。把游標固定在該位置。右擊滑鼠彈出瀏覽器選單,點擊 Inspect 選項。

  • 點擊 inspect 後,畫面會彈出一堆網頁源代碼(如下圖)。不用慌, 若你的游標位置正確,會有一列代碼被 highlight 了出來的。找出最接近該列位置的 <p name="xxxx" ...> 的代碼,把 xxxx 的值記下來。

  • 在你想用戶點擊的位置設定一條超鏈結,鏈結的網址是 #xxxx (xxxx 是上一步你記下的那組值)。例如這篇文章我是設定在頂部的主題圖,在 Medium 中若要在圖片上加上超鏈結,可先選定圖片,然後在鍵盤輸入 ctrl-K (在 Mac 上則是 cmd-K)。
在 Medium 中用 ctrl-K 或 cmd-K(Mac) 為圖片設定超鏈結

  • 完成!發佈文章後,讀者點擊該圖或文字的超鏈結,文章便會自動滑到錨點的位置了。點這裡再試一試吧!

在 WordPress 文章中使用錨點

  • 在 WordPress 文章中加入錨點,我的做法是直接編輯源代碼加入 <a name="xxxx"> 的代碼。
  • 我不懂用 WordPress 的 Gutenberg 古騰堡編輯器檢示源代碼,有關法方請各路高手幫忙在此文章中回應補充吧!我先分享用 Classic Editor 的方法。
用 Classic Editor 編輯文章

  • 在編輯器的右上方,點選 text 選項,編輯源代碼。

  • 由於 LikeCoin WordPress 外掛所加入的讚賞鍵都在文章的最下方,所以我直接跑到源代碼的最尾位置,加入以下這段代碼:
<a name="likebutton"></a>
代碼編輯器的畫面

  • 儲存更新後,請回到古騰堡編輯器繼續操作。在圖片中如何加上超鏈結不用我教了吧?點擊圖片找一找超鏈結的設定,填上 #likebutton 。請留意跟 Medium 的做法不同,在 WordPress 中你可以自行定義錨點的名稱,而我在這裡用了 likebutton 作為錨點名字,因為我的目的是想用戶點擊圖片後跳到讚賞鍵按讚嘛。
設定圖片的超鏈結指向錨點名稱

↓↓↓若你喜歡我的文章,請在下方的「讚賞鍵」按讚,我會因此獲得收入。
你需要先登入「讚賞公民」的帳號。若你沒有註冊帳號,請你以 Google 或 Facebook 註冊再按讚吧,完全免費。感謝支持。 ↓↓↓

Leave a Reply

Your email address will not be published. Required fields are marked *

Back To Top