免外掛!利用錨點製作WordPress文章目錄 | WordPress文章 HTML
![免外掛!利用錨點製作WordPress文章目錄](https://i.imgur.com/axBPWDg.jpg)
目錄為什麼需要目錄?目錄的功能有三個:1.方便觀眾取得想要的資訊2.事先暗示內容,吸引觀眾看下去3.讓觀眾能衡量需要花費的時間,鼓勵他們看完內容在WordPress如果不想安裝或不能安裝外掛,有兩個方法製作目錄,一個是編輯HTML語法,另一個是運用區域編輯器提供的功能。這篇文章主要和大家分享如何在不用外掛的情況下,使用區域編輯器的功能製作目錄。如果不是WordPress的使用者,歡迎點閱下方文章,裡頭和大家分享如何單純用HTML的語法製作目錄。延伸閱讀:利用ahref屬性製作HTML簡易目錄(TableofContents)[1]錨點是什麼?錨點(Anch...
![免外掛!利用錨點製作WordPress文章目錄](http://pix4.agoda.net/hotelimages/195/1952886/1952886_17090916480056185082.jpg?s=800x)
目錄的功能有三個:1. 方便觀眾取得想要的資訊2. 事先暗示內容,吸引觀眾看下去3. 讓觀眾能衡量需要花費的時間,鼓勵他們看完內容
在WordPress如果不想安裝或不能安裝外掛,有兩個方法製作目錄,一個是編輯HTML語法,另一個是運用區域編輯器提供的功能。這篇文章主要和大家分享如何在不用外掛的情況下,使用區域編輯器的功能製作目錄。如果不是WordPress的使用者,歡迎點閱下方文章,裡頭和大家分享如何單純用HTML的語法製作目錄。
延伸閱讀:利用a href屬性製作HTML簡易目錄 (Table of Contents)[1]
錨點是什麼?錨點 (Anchor) 對應的是HTML中id的概念,錨點可以讓使用者可以從文章的某處,快速定位到指定的地方,而且通常會將該指定處放在頁面最頂端。例如現在點擊「回到目錄[2]」,畫面會移到目錄的地方,而且將目錄這個標題放在畫面最上方。
每個錨點的名稱在同一文章或頁面內必須唯一開頭必須是英文字母英文字母大小寫有差異 (case-sensitive)可以包含數字、連結線 (-)、底線 (_)、分號 (:) 或 句號 (.)「不能」有空白製作簡易文章 / 頁面目錄 步驟一:列出目錄大綱寫完文章後,再使用清單,依標題列出目錄大綱,或者先列出目錄大綱和標題,再開始撰寫內容都可以,目錄可以隨時增加修改。下圖是這篇文章主要的目錄和標題:
步驟二:幫標題加上錨點打好標題後,點擊區域編輯器右上角的設定,在進階設定中可以個別定義標題的HTML錨點。
步驟三:目錄加上連結每個標題的錨點都設定好之後,回到上方的目錄,幫目錄的每一點依序反白,利用「連結」和標題錨點產生關聯,方法是在輸入連結內容的地方打上「#錨點名稱」。
例如步驟三的錨點名稱是 add-link-to-toc,目錄中步驟三的連結就是 #add-link-to-toc。
把需要的地方加上連結後,文章 / 頁面目錄就製作完成了。
提醒:目錄的錨點連結不會在「預覽」的時候產生效果,如果要測試目錄,建議先將文章以「私密」的狀態...
取得本站獨家住宿推薦 15%OFF 訂房優惠
本站住宿推薦 20%OFF 訂房優惠,親子優惠,住宿折扣,限時回饋,平日促銷
編輯器– 支援 | WordPress文章 HTML
WordPress文章編輯:利用自訂HTML區塊快速複製其他區塊 | WordPress文章 HTML
如何在WordPress網站中編輯HTML? | WordPress文章 HTML
Wordpress【新增文章、文章列表分類】管理教學WP網站架設 ... | WordPress文章 HTML
免外掛!利用錨點製作WordPress文章目錄 | WordPress文章 HTML
[心得] WordPress 文章排版新手必讀,區塊編輯器中 ... | WordPress文章 HTML
如何新增HTML、CSS 和JavaScript 程式碼到你的網站裡 ... | WordPress文章 HTML
WORDPRESS 架站之小工具 | WordPress文章 HTML
![](https://i.imgur.com/axBPWDg.jpg)