免外掛!利用錨點製作WordPress文章目錄

目錄


為什麼需要目錄?

目錄的功能有三個:
1. 方便觀眾取得想要的資訊
2. 事先暗示內容,吸引觀眾看下去
3. 讓觀眾能衡量需要花費的時間,鼓勵他們看完內容

在WordPress如果不想安裝或不能安裝外掛,有兩個方法製作目錄,一個是編輯HTML語法,另一個是運用區域編輯器提供的功能。這篇文章主要和大家分享如何在不用外掛的情況下,使用區域編輯器的功能製作目錄。如果不是WordPress的使用者,歡迎點閱下方文章,裡頭和大家分享如何單純用HTML的語法製作目錄。

延伸閱讀:利用a href屬性製作HTML簡易目錄 (Table of Contents)


錨點是什麼?

錨點 (Anchor) 對應的是HTML中id的概念,錨點可以讓使用者可以從文章的某處,快速定位到指定的地方,而且通常會將該指定處放在頁面最頂端。例如現在點擊「回到目錄」,畫面會移到目錄的地方,而且將目錄這個標題放在畫面最上方。

錨點命名的注意事項

  1. 每個錨點的名稱在同一文章或頁面內必須唯一
  2. 開頭必須是英文字母
  3. 英文字母大小寫有差異 (case-sensitive)
  4. 可以包含數字、連結線 (-)、底線 (_)、分號 (:) 或 句號 (.)
  5. 「不能」有空白

製作簡易文章 / 頁面目錄

步驟一:列出目錄大綱

寫完文章後,再使用清單,依標題列出目錄大綱,或者先列出目錄大綱和標題,再開始撰寫內容都可以,目錄可以隨時增加修改。下圖是這篇文章主要的目錄和標題:

list the outline of table of content

步驟二:幫標題加上錨點

add anchor to each heading

打好標題後,點擊區域編輯器右上角的設定,在進階設定中可以個別定義標題的HTML錨點。

每個標題的錨點都設定好之後,回到上方的目錄,幫目錄的每一點依序反白,利用「連結」和標題錨點產生關聯,方法是在輸入連結內容的地方打上「#錨點名稱」。

例如步驟三的錨點名稱是 add-link-to-toc,目錄中步驟三的連結就是 #add-link-to-toc。

choose the content and click link
type the name of anchor, starting with the pound (#) symbol

把需要的地方加上連結後,文章 / 頁面目錄就製作完成了。

提醒:目錄的錨點連結不會在「預覽」的時候產生效果,如果要測試目錄,建議先將文章以「私密」的狀態發布,等確定目錄正常後,再公開發布內容。


延伸應用:連到別的文章的錨點

製作目錄只是錨點的其中一個用途,錨點強大的地方在只要適當設定,它可以幫助我們任意的在不同標題、段落或圖片間跳動,甚至可以跳到其他文章或頁面,只要確定該文章或頁面有定義相對應的錨點。而使用方式只需要把連結填入的內容從「#錨點名稱」,改成「另一篇文章的網址#另一篇文章的錨點名稱」即可。

例如我想要在這篇文章中推薦有興趣了解如何用HTML語法讓文字產生連結的人,到另一篇文章看範例,此時「另一篇文章」這段文字設定的連結就會變成「https://aprilyang.home.blog/2020/01/29/make-toc-with-html/#add-link-to-toc」。

延伸閱讀:Page Jumps in WordPress

結語

在WordPress區域編輯器用錨點、連結、清單和編輯HTML程式碼等功能,製作目錄會比單純用HTML語法寫目錄方便快速,缺點是只有編輯器裡標題才能設定錨點,所以如果想要在文章的某個段落或圖片實現錨點的效果,還是要依靠HTML語法。

免外掛!利用錨點製作WordPress文章目錄 有 “ 4 則迴響 ”

    1. 會導致點擊連結後,畫面看起來跳到標題下方的區域的原因之一是因為原本的頁面已經有固定在頂部的內容,例如使用 WordPress.com 的頁面上方可能都會出現「在 WordPress.com 建立自己的網站」或 一些方便操作的功能列 (我的網站也是),所以標題被原本網頁頂部的固定內容蓋住了。

      在網路上曾看過解決這個問題的方法,可惜需要透過添加 CSS 語法才能完成,在 WordPress 的區域編輯器裡這樣做會太麻煩。

      不過如果是用AMP模式或其他頂部沒有固定內容的網站檢視文章,應該不會發生跳到標題下方區域,而忽略標題的狀況。

    1. 這裡有兩篇文章提到如何解決頂部內容遮住錨點位置的問題,但我沒有實際嘗試過:

      1. 神奇的html錨點,讓你的網頁在內部自由的跳轉 (https://kknews.cc/tech/ena88ry.html)
      2. HTML中a标签锚点定位偏移 (https://blog.csdn.net/cxwtsh123/article/details/79124102)

      如果文章提到的方法不可行,上網 Google「錨點偏移」或「navbar遮住」等關鍵字,會找到更多解決辦法。

      希望對你有幫助 :)

發表迴響

在下方填入你的資料或按右方圖示以社群網站登入:

WordPress.com 標誌

您的留言將使用 WordPress.com 帳號。 登出 /  變更 )

Google photo

您的留言將使用 Google 帳號。 登出 /  變更 )

Twitter picture

您的留言將使用 Twitter 帳號。 登出 /  變更 )

Facebook照片

您的留言將使用 Facebook 帳號。 登出 /  變更 )

連結到 %s