這篇文章最後更新日期:2024 年 5 月 12 日
作者: Mack Chan
新手們要學會,當你撰寫愈長的文章,這意味你需要獲得更強的「資訊整理能力」,這可以依靠後天不停練習和操練文案技巧來提升,當中把一個「段落」和「小段」切割中重點,方便閱讀者更快吸收內容和整理他 / 她們的思緒。
其中一個小技巧就是我們這次介紹的「項目符號和編號」,或另稱為清單區塊 (List),本篇教學前期比較簡單,後段會提供可選修的進階應用,當然你可以略過後段那些技術性的教學也是可以,並不影響實際的文章應用。
你將會學習得到以下知識和技能:
- 為什麼你應該制作更多「帶有意義」的排序和列表?
- 常見中英對照翻譯與異體字參考列表
- 什麼是 WordPress 裡的清單區塊 (List)?
- 文章那一些位置適合改用清單區塊 ?
- 清單區塊 (List) 的常見種類和樣式
- 如何新增清單區塊 (List)?
- 如何切換「項目符號」或「編號」類型?
- 如何「增加縮排」和「減少縮排」?
- 項目符號和編號的設定選項
- 項目符號和編號的 HTML 錨點和自訂 CSS
精選訊息摘錄的「新常客」又容易讓人忽略的結構化資料
精選訊息摘錄 (Featured Snippet) 雖然不是什麼新東西,但我們可以發現它的呈現結果每過一段時間就會出現改變,近期有個新趨勢是關於列表式的搜尋結果會得愈來愈常見,但當中的結構化數據應該如何制作,其實這類列表式的結果,只要你的網頁文章架構有足夠的清晰度,排版、段行和分段合理得宜,這次我們探討的「項目符號和編號」就是協助你建立整理資料的好工具。
從上圖片得知,當我們透過 Google 搜尋引擎希望了解更多關於「台灣」地區,有什麼「鳳梨」的「分類」呢?從精選訊息摘錄 (Featured Snippet) 會顯示出很簡單清晰的台灣鳳梨分類和品種介紹。為什麼不是出現鳳梨品種的「圖片」結果?又不是出現鳳梨品種的「影片」比較系列?這值得我們去思考,是否我們忽略了簡單的「項目符號和編號」?
為什麼你應該制作更多「帶有意義」的排序和列表?
依據每個行業和產業不同,如何統整「帶有意義」的排序和列表?對閱讀者帶來實質的幫助,重點是 Google 希望在「不點擊進入」你的網頁之下,搜尋者就能獲得他們需要的資訊。列表式的呈現結果
跟據 知名 SEO 和流量分析公司 Semrush 在 2024 年發表的報告 指出,近年關於「Zero-Click Search 零點擊搜尋」的趨勢和發展,大公司如 Google、Apple、Facebook、Reddit、Youtube 和維基百科的影片最大,不少損失流量由最少的 Facebook 18% 至最多的 Google 57% 不等,也許隨著演算法的發展,我們愈來愈不需要點擊進你的網站,就能快速獲得所需的資料,所以不要忽視我們這們探討的項目符號和編號應用。
上方這個 Demo 展示了「項目符號」的優點,你可以發現相比撰寫長篇大論的介紹文,使用點列式的呈現方式,讓讀者快速了解狀況和自己將會獲得什麼好處,也讓你的文章變得吸收,新手試著多點使用項目符號去改善舊文章和頁面,會有不錯的體驗提升。
常見中英對照翻譯與異體字參考列表
英文 | 中文 | 標籤 |
---|---|---|
Unordered Lists | 無序的列表 未排序清單 不排序清單 清單區塊 項目符號 排序清單 | <ul> |
Ordered Lists | 有序的列表 編號符號 | <ol> |
List Item | 列表項目 | <li> |
Definition Lists Description List | 定義的列表 | <dl> |
Definition Term | 自定義列表組 | <dt> |
Definition Description | 自定義 列表描述 | <dd> |
Nested Lists | 多階層列表 巢狀式列表 | 不適用 |
什麼是 WordPress 裡的清單區塊 (List)?
在傳統印刷業和現在文書工具裡都非常常見的功能,當然也絕對適合用於網站設計,尤其處理長篇累贅和系列文章,在文章裡加入「項目符號和編號」會讓閱讀更加暢通和易於理解吸收,無論你在舊版的「傳統編輯器 (Classic Editor)」還是新版的「區塊編輯器 (Block Editor)」,你都可以輕鬆置入清單區塊 (List),適當的使用,會有畫龍點睛的加成效果。
文章那一些位置適合改用清單區塊 ?
這點非常考證文章作者的文案能力,沒有絕對的使用狀況,你應該多點觀察別人的文章,培養自身的寫作能力,但下方我們可以提供一點基礎的使用情景,但這取決於不同的文章類型,使用的次數貴精不貴多。
- 比較類文章 ( 美食類比較)
- 排名類文章 ( 軍亞季軍)
- 成份類文章 ( 化學 / 食物標籤 / 科學類)
- 地理類文章 ( 國家 / 地區 / 海洋 / 星球)
- 感性類文章 ( 情緒 / 喜惡 / 心情)
- 數字類文章 ( 財務 / 經濟數據 / GDP / 股價)
清單區塊 (List) 的常見種類和樣式
清單樣式共有兩種,分別是未排序 (項目符號) 和已排序 (編號)。你可以使用工具列中的縮排圖示以縮排你的清單:每個區塊都有其區塊專用控制項,可讓你在編輯器中直接操作區塊,包含以下功能。
- 變更區塊類型
- 項目符號 (未排序) 清單
- 編號 (已排序) 清單
- 凸排
- 縮排
- 粗體
- 斜體
- 超連結
- 刪除線
- 更多選項
樣式 01 :項目符號清單 Unordered (bulleted)
- 台北
- 台中
- 台南
- 台東
- 台西
HTML 語法展示:
<ul>
<li>台北</li>
<li>台中</li>
<li>台南</li>
<li>台東</li>
<li>台西</li>
</ul>
項目符號清單的特點:
項目符號清單是沒有任何排序的,你所標明的項目,是沒有先後次序、重要性或比較之分,才適合使用編號清單 Unordered (bulleted),就是各個項目都只是同等份量,只是透過「點列式」有條理的排列出來。
樣式 02 :編號清單 Ordered (numbered)
下方舉例,是食物的熱量卡路里由最高至最低排序,
- 總共:645卡路里
- 總共:558卡路里
- 總共:373卡路里
- 總共:235卡路里
- 總共:129卡路里
HTML 語法展示:
<ol>
<li>總共:645卡路里</li>
<li>總共:558卡路里</li>
<li>總共:373卡路里</li>
<li>總共:235卡路里</li>
<li>總共:129卡路里</li>
</ol>
編號清單的特點:
編號清單的適用範圍更加廣泛,由於數據經過排序處理,變成有意義的比較,也是最常見的列表方式,但比較的東西需要是具有「同質性」的。
接下來開始進入比較技術性的步驟,如果新手感到吃力,請重溫以下基礎教學:
WordPress 區塊編輯器「基礎應用」
WordPress:如何新增一篇文章
如何新增清單區塊 (List)?
步驟一:
你可以在任意的「段落」,在點擊區塊後,上方會出現獨特的小型工具列,最左邊的符號可以允許你轉變區塊的類型。
步驟二:
在彈出的特殊選單中,你可以按下「清單」,就能快速建立「項目符號和編號」。
如何切換「項目符號」或「編號」類型?
步驟一:
左方的「項目符號」一般預設以「黑色實心圓」作為基礎,這個列表排名不分先後,屬於沒有「排序」的列表式資料。
步驟二:
右方的「編號」是預設帶有阿拉伯數字的有排序列表,你可以隨時自由切換這兩種狀態。
如何「增加縮排」和「減少縮排」?
步驟一:
前題是如果你已經使用了縮排功能,希望「減少縮排」就可以按下這個功能。
步驟二:
如果你希望強化列表的結構,可以使用「增加縮排」作更多的列表變化。
項目符號和編號的設定選項
設定一:
WordPress 預設提供「5 種」字型大小選擇,如不滿意當然可以選擇「自訂字型大小」。
設定二:
設定「文字的色彩」,同上相同,如不滿意當然可以選擇「自訂字型色彩」。
設定三:
設定「背景的色彩」,同上相同,如不滿意當然可以選擇「自訂背景色彩」。
設定四:
設定「起始值」,因為沒有強制必須由「1」開始,你可以設為 3, 4 或 5 開始。
項目符號和編號的 HTML 錨點和自訂 CSS
設定一:
這個設定比較少用到,除非你上方的內容,會「引導」讀者到下方的列表。
設定二:
附加的 CSS 類別,適合較進階的使用,自由地客制列表的外觀樣式。
常見問題 FAQ
使用「項目符號和編號」一定可以出現 Google 搜尋結果的結構化數據?
否,沒有絕對的,但增加合適的結構化資料,會增加出現的機會率。
文章標題 Title 可以視作 Google 搜尋結果的結構化數據的一種?
對,只要出現同質化和相類似的結構,也有助 Google 瞭解你的網站,盡量專注於單一題材,提供深入和有價值的內容,都能增加出現的機會率。
「項目符號和編號」是一樣複雜的技術?
否,大部分的新手都能控制和管理,但進階的操作需要努力練習,詳情可以去 W3C 研習。
參考資料和引用文獻:
我們提供市場上最新的網站架設
新聞、教學和相關知識,我們不會向用戶
發送垃圾和推廣內容,而你可以隨時「取消訂閱」。
WordPress 學員人數
15,000+ 人 (持續增加之中)
請問清單之間可以調整間距嗎? 還是只能調文字行高統一?
聞婷,您好,這需要懂得 CSS 訂法才可以辦到,你可以嚐試「自訂標題的 CSS」學起,道理是相同的。
.
✅ 如何自訂 WordPress 文章標題樣式和引言外觀的 CSS 語法:
https://wp-valley.com/how-to-adjust-css-title
—————————-
這篇文章開首,你看到的段落 2,就是「你將會學習得到以下知識和技能:」也是用到 WordPress 的清單 (List),你看我都是自行使用 CSS 調整的,但比較進階的技巧。