使用區塊編輯器錨鏈接功能,建立文章目錄、實現文內快速跳轉

Block Editor(區塊編輯器)是 WordPress 官方的預設編輯器,該編輯器內建的功能非常多,需要花一段時間學習才能完全搞懂。 其中,區塊編輯器有一個好用功能叫做「錨鏈接」,使用這個功能可以輕鬆為你的文章建立文章目錄,以及實現文章內部快速跳轉,方便讀者閱讀你的文章。

區塊編輯器介紹

在 WordPress 5.0 版本更新之後,經典的舊版編輯器已替換為全新的 Block Editor(區塊編輯器),正式成為 WordPress 官方的預設編輯器,直到今日也還在持續改良和完善功能。

如今,當在 WordPress 編輯文章/頁面時,假如你沒有安裝其他的文章編輯外掛或頁面編輯外掛,WordPress 預設會使用 Block Editor(區塊編輯器)來完成編輯這麼一個過程。 所以,除非你想使用其他的文章/頁面編輯器外掛來完成編輯這個步驟,否則學好 Block Editor(區塊編輯器)就是必要之事。

PS:區塊編輯器無須安裝,它不是外掛,是 WordPress 內建的。 區塊編輯器被歸類在 Core files(核心文件)裡,隨著官方 WordPress 版本的更新而更新,所以你在網站的外掛清單是找不到它的蹤影的。
區塊編輯器,文章編輯頁面

使用教學

如何使用錨鏈接功能,為文章建立目錄清單?

為文章建立目錄,可以統整整篇文章的標題,方便文章的大致導覽。 並且可以讓讀者點擊目錄中的標題連結以快速跳轉到該標題。

以下兩張圖是效果畫面:

點擊目錄中的標題連結
會直接跳轉到文中該標題的區域

step 1

在 Block Editor(區塊編輯器)文章編輯頁面。 如下圖所示,在區塊中輸入一個 H2 標題的名稱。

輸入一個 H2 標題的名稱

step 2

  1. 點擊欲快速跳轉到的 H2 標題,並複製該標題的名稱。
  2. 點擊右上角的「區塊」選項。
  3. 並在下方的 HTML 錨點輸入框中,貼上該標題的名稱。
為 H2 標題建立錨點

step 3

接著,複製該段錨點的代碼。

複製該段 H2 標題錨點的代碼

step 4

再來我們回到有輸入 H2 標題名稱的區塊。

  1. 如下圖所示,選取該區塊的文字。
  2. 並點擊上方的建立超連結按鈕。
選取文字,並點擊建立超連結

step 5

  1. 在輸入框中輸入「#」,並貼上剛剛複製的 HTML 錨點代碼。
  2. 並點擊下方跳出來的錨點連結選項。
輸入「#」,並貼上 HTML 錨點代碼

如下圖所示,如此錨鏈結就算建立完成了。

錨鏈結建立完成

結語

使用區塊編輯器的錨鏈結功能,可以實現為文章建立文章目錄,好處是不需要安裝任何外掛。 由於少安裝了幾個外掛,這對於 WordPress 網站效能的優化有極大的好處,防止因安裝外掛過多,導致網站加載速度過慢等問題。

但壞處就是太過麻煩,要一直不斷的重複複製貼上、複製貼上,建立一個又一個錨鏈結,這對於文章產出效率是一大打擊。

所以,小翔還是蠻建議去下載一個文章目錄外掛來使用,省了建立錨鏈結這種麻煩事。 以下是一篇,教大家如何為 WordPress 網站文章建立目錄的教學文章,歡迎參考。


0 0 選票
文章評分

如果對文章內容有任何問題,歡迎在底下留言讓我知道。
如果你喜歡我的文章,可以按分享按鈕,讓更多的人看見我的文章。
還沒訂閱部落格的朋友們,記得在右上角填入信箱,收到我最新文章的通知。

by 小翔

訂閱
通知
guest
0 評論
在線反饋
查看所有評論