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

如何在 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 post 02

於 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 post 03

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

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

調整內容目錄下面的間距

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

#toc_container {
	margin-bottom:30px;
}

設定完成!

wordpress post 01
延伸閱讀
相關標籤:
SHARE
分享在 facebook
分享在 twitter
分享在 linkedin
WRITTEN BY
Hend Chen
Hend Chen
專長於網頁設計 、UI 設計、品牌設計。我的英文名字取自中文名字發音,發音和手的英文 “hand“ 沒有差異,如果您正面臨網站設計的困擾,我很樂意成為協助您的那雙手!

目錄

Subscribe