如何在 WordPress 文章標題前面自動加入編號？

還在手動幫文章標題加入項目符號嗎？透過 CSS 的設定，將文章標題自動加入編號，使 WordPress 部落格的文章更整齊、有條理，同時提升文章的編輯效率！

以下程式碼為統整網路資料後的精簡版本：

文章標題自動編號

/* 每新增一個 H2 時編號遞增，並在每個 H2 後面重置 H3 的編號 */
.post .entry-content h2{
	counter-increment: h2Counter;
 	counter-reset: h3Counter;
	font-size:20px; /* 以下為 H2 文字的樣式 */
	margin-bottom:10px;
}

.post .entry-content h2:before{
	content: counter(h2Counter)' '; 
        /* Counter 後面可以定義顯示的樣式 */
	font-size:14px; /* 以下為 H2 編號的樣式 */
	color:white;
	background:#000;
	padding: 6px 12px;
	margin-right:12px;
	display: inline-block;
}

/* 每新增一個 H3 時編號遞增 */
.post .entry-content h3 {
	counter-increment: h3Counter;
	font-size:18px; /* 以下為 H3 文字的樣式 */
	margin-bottom:10px;
}

.post .entry-content h3:before {
	 content: counter(h2Counter) '.' counter(h3Counter) ' ';
         /* Counter 後面可以定義顯示的樣式 */
	 margin-right:5px; /* 以下為 H3 編號的樣式 */
}

將程式碼貼至附加的 CSS

於 WordPress 後台 / 外觀 / 自訂 / 附加的 CSS，將上面的程式碼複製貼上，文字與編號的樣式可以自行調整。

只在 WordPress 文章中產生樣式

在上面的程式碼中 .post 以及 .entry-content 為 WordPress 文章對應的 CSS，若沒有加入它們，以上的設定將會套用至整個網站上面。

變更 Counter 的顯示樣式

格式為 counter(name,styleName)，name 為 counter 的名稱、styleName 為 counter 的顯示樣式。
其他顯示樣式如下：

• decimal (預設，阿拉伯數字 1, 2, 3…)
• lower-roman (羅馬數字 i, ii, iii…)
• upper-roman (羅馬數字 I, II, III…)
• trad-chinese-informal (中文數字 一、二、三…)
• trad-chinese-formal (中文數字 壹、貳、參…)

/* 範例：採用中文計數 */
content: counter(h2Counter,trad-chinese-informal)' ';

使用 Table of Contents Plus 新增內容目錄

內容目錄可以讓使用者方便檢索文章的主要內容，點擊目錄內的連結，可以快速地跳到對應的內容區塊。
Table of Contents Plus 已經完成本地化，在設定上相當的直覺。

設定 Table of Contents Plus

於 WordPress 後台 / 設定 / TOC+ / 主要選項，調整內容目錄的設定。

1. 內容類型：請勾選「post」，於文章內產生內容目錄。
2. 目錄標題文字：可以更改上方目錄標題。
3. 啟用平滑捲動效果：點擊連結後會以捲動的方式至對應區塊。

調整內容目錄下面的間距

於 WordPress 後台 / 外觀 / 自訂 / 附加的 CSS，將下面的程式碼複製貼上即可。

#toc_container {
	margin-bottom:30px;
}

設定完成！