如何在 WordPress 文章 h2、h3 標題前加入1、1.1 的數字編號？

在本文中，小翔將向你展示如何使用 Code Snippets 程式碼片段外掛，輕鬆在你的 WordPress 文章 h2 標題前加入 1、2、3.. ，或在 h3 標題前加入 1.1、1.2、1.3.. 的數字序號，方便讀者觀看閱讀進度，有效提升讀者閱讀體驗。

Code Snippets 外掛介紹

本篇教學，將使用「Code Snippets」程式碼片段外掛，來實現在 WordPress 文章的 h2、h3 標題前加入1、1.1，或 一、1.1 的數字編號。 使用該外掛，也方便了程式碼與程式碼之間的管理，未來要修改程式碼也比較方便。

因為 WordPress 有許多豐富的外掛可供下載使用，豐富了我們的網站，但外掛一旦下載太多，可能會造成網站效能不佳，速度太慢等問題。

而 Code Snippets 是一個輕便、易用，且專為在網站上執行 PHP 程式碼片段所設計的解決方案。 使用 Code Snippets 外掛後，便不再需要為了網站功能去下載外掛，只需新增一個程式碼片段，輸入程式碼，即可為網站增加所需要的功能，且不會占用太多網站空間，從而降低網站速度。

• 相關文章 : 【WordPress外掛】好用的程式碼片段外掛，N個實用程式碼片段範例教學

圖片來源 : Code Snippets 外掛頁面

---

使用教學

安裝 Code Snippets 外掛

以下教學需安裝並啟用 Code Snippets 外掛，不會安裝 WordPress 外掛的可以點擊以下連接前往教學文章學習。 文中會教你如何搜尋、安裝、啟用、停用和刪除外掛。

教學文章：外掛安裝教學
文章網址：https://xiaoxiang.blog/how-to-install-the-plug-in/

step 1

開啟 WordPress 後臺管理介面，前往 外掛 > 安裝外掛。

step 2

使用關鍵字搜尋外掛，輸入「Code Snippets」。

step 3

找到名稱為「Code Snippets」的外掛，點選 立即安裝，並 啟用 該外掛。

在 H2 標題前加入 1、2、3..

以下的教學，讓你可以在文章的 H2 標題前加入 1、2、3.. 的編號順序，如下圖。

效果預覽

step 1

外掛啟用後，點擊 程式碼片段 > 新增程式碼片段。

step 2

• 在標題框中輸入「在 H2 標題前加入 1、2、3.. 的數字編號」，方便程式碼與程式碼之間的管理。
• 如下圖所示，複製貼上以下程式碼到程式碼輸入框中。

程式碼

add_action( 'wp_head', function () { ?>
<style>

body {
/* 重置計數器成0 */
counter-reset: h2counter;
}

/* 在文中 H2 標題前加入 1、2、3.. 的數字編號 */
.entry-content h2::before {
/* 增加計數器值 */
counter-increment: h2counter;
/* 顯示計數器 */
content: counter(h2counter)". ";
}

</style>
<?php } );

畫面

step 3

完成後記得滑到底部，點擊「儲存設定並啟用」按鈕，儲存並啟用你的程式碼。

在 H2 標題前加入 一、二、三

以下的教學，讓你可以在文章的 H2 標題前加入 一、二、三 的編號順序，如下圖。

效果預覽

step 1

外掛啟用後，點擊 程式碼片段 > 新增程式碼片段。

step 2

• 在標題框中輸入「在 H2 標題前加入 一、二、三 的編號順序」，方便程式碼與程式碼之間的管理。
• 如下圖所示，複製貼上以下程式碼到程式碼輸入框中。

程式碼

add_action( 'wp_head', function () { ?>
<style>

body {
/* 重置计数器成0 */
counter-reset: h2counter;
}

/* 在文中 H2 標題前加入 一、二、三 的編號順序 */
.entry-content h2::before {
/* 增加计数器值 */
counter-increment: h2counter;
/* 显示计数器 */
content: counter(h2counter, cjk-ideographic) '3001';
}

</style>
<?php } );

畫面

step 3

完成後記得滑到底部，點擊「儲存設定並啟用」按鈕，儲存並啟用你的程式碼。

在 H3 標題前加入 1.1、1.2、1.3

以下的教學，讓你可以在文章的 H3 標題前加入 1.1、1.2、1.3 的編號順序，並且 H2 標題不顯示，如下圖。

效果預覽

step 1

外掛啟用後，點擊 程式碼片段 > 新增程式碼片段。

step 2

• 在標題框中輸入「在 H3 標題前加入 1.1、1.2、1.3 的編號順序」，方便程式碼與程式碼之間的管理。
• 如下圖所示，複製貼上以下程式碼到程式碼輸入框中。

程式碼

add_action( 'wp_head', function () { ?>
<style>

body h2{
/*重置计数器h3counter的值*/
counter-reset: h3counter;
/*计数器h2counter的值增加1*/
counter-increment: h2counter;
}	

body h3{
/*计数器h3counter的值增加1*/
counter-increment: h3counter;
}

/* 為h3前添加 1.1 1.2 1.3 的數字  */
.entry-content h3:before {
/*内容显示为：计数器h2counter的值+点+计数器h3counter的值，格式：1.1*/
content: counter(h2counter) "." counter(h3counter) " ";
}

</style>
<?php } );

畫面

step 3

完成後記得滑到底部，點擊「儲存設定並啟用」按鈕，儲存並啟用你的程式碼。

在 H2、H3 標題前加入 1、1.1

以下的教學，讓你可以在文章的 H2 標題前加入 1、2、3.. 的編號順序，以及在 H3 標題前加入 1.1 1.2 1.3 的編號順序，如下圖。

效果預覽

step 1

外掛啟用後，點擊 程式碼片段 > 新增程式碼片段。

step 2

• 在標題框中輸入「在 H2、H3 標題前加入 1、1.1 的編號順序」，方便程式碼與程式碼之間的管理。
• 如下圖所示，複製貼上以下程式碼到程式碼輸入框中。

程式碼

add_action( 'wp_head', function () { ?>
<style>

body h2{
/*重置计数器h3counter的值*/
counter-reset: h3counter;
/*计数器h2counter的值增加1*/
counter-increment: h2counter;
}

/* 為h2前添加 1、2、3的數字順序  */
.entry-content h2:before {
/* 显示计数器 */
content: counter(h2counter)". ";
}

body h3{
/*计数器h3counter的值增加1*/
counter-increment: h3counter;
}

/* 為h3前添加 1.1 1.2 1.3 的數字順序  */
.entry-content h3:before {
/*内容显示为：计数器h2counter的值+点+计数器h3counter的值，格式：1.1*/
content: counter(h2counter) "." counter(h3counter) " ";
}

</style>
<?php } );

畫面

step 3

完成後記得滑到底部，點擊「儲存設定並啟用」按鈕，儲存並啟用你的程式碼。

在 H2、H3 標題前加入 一、1.1

以下的教學，讓你可以在文章的 H2 標題前加入 一、二、三 的編號順序，以及在 H3 標題前加入 1.1 1.2 1.3 的編號順序，如下圖。

效果預覽

step 1

外掛啟用後，點擊 程式碼片段 > 新增程式碼片段。

step 2

• 在標題框中輸入「在 h2、h3 標題前加入 : 一、1.1 的樣式」，方便程式碼與程式碼之間的管理。
• 如下圖所示，複製貼上以下程式碼到程式碼輸入框中。

程式碼

add_action( 'wp_head', function () { ?>
<style>

body h2{
/*重置计数器h3counter的值*/
counter-reset: h3counter;
/*计数器h2counter的值增加1*/
counter-increment: h2counter;
}

/* 為h2前添加 一、二、三 的文字順序  */
.entry-content h2:before {
/*内容显示为：计数器h2counter的值转换为中文数字格式+顿号，格式：一、*/
content: counter(h2counter, cjk-ideographic) '3001';
}

body h3{
/*计数器h3counter的值增加1*/
counter-increment: h3counter;
}

/* 為h3前添加 1.1 1.2 1.3 的數字  */
.entry-content h3:before {
/*内容显示为：计数器h2counter的值+点+计数器h3counter的值，格式：1.1*/
content: counter(h2counter) "." counter(h3counter) " ";
}

</style>
<?php } );

畫面

step 3

完成後記得滑到底部，點擊「儲存設定並啟用」按鈕，儲存並啟用你的程式碼。

如何更改數字樣式？

以下將教學，該如何替你剛剛所添加的那些標題前的數字編號，修改成好看的樣式。

step 1

以 在 H2 標題前加入 1、2、3.. 為例子，以下是該例子的完整程式碼：

add_action( 'wp_head', function () { ?>
<style>

body {
/* 重置計數器成0 */
counter-reset: h2counter;
}

/* 在文中 H2 標題前加入 1、2、3.. 的數字編號 */
.entry-content h2::before {
/* 增加計數器值 */
counter-increment: h2counter;
/* 顯示計數器 */
content: counter(h2counter)". ";
}

</style>
<?php } );

step 2

其中有一段程式是在執行，為 H2 標題前加入 1、2、3.. 的數字編號，就是以下這段程式碼：

/* 在文中 H2 標題前加入 1、2、3.. 的數字編號 */
.entry-content h2::before {
/* 增加計數器值 */
counter-increment: h2counter;
/* 顯示計數器 */
content: counter(h2counter)". ";
}

在上面這段程式碼中的「content: counter(h2counter)”. “;」，這段程式下面加入你要的樣式，以下是範例。

程式碼範例 (加入樣式後)

/* 在文中 H2 標題前加入 1、2、3.. 的數字編號 */
.entry-content h2::before {
/* 增加計數器值 */
counter-increment: h2counter;
/* 顯示計數器 */
content: counter(h2counter)". ";

/* 數字編號設定為白色 色碼可替換 */
color: #fff;
/* 數字代碼背景顏色 */
background: #003D79;
border-radius: 2px;
padding: 5px 20px;
margin: 0 10px 0 0;
/* 設定區域的影陰大小 */
box-shadow: 0 1px 4px rgba(0,0,0,0.3);
}

效果預覽

如此照著以上方式修改，即可自由修改成自己最喜歡的樣式。 H3 標題前的數字編號修改也是同理，只要找到「content: counter」這段程式碼，並在該段程式碼下方加入你想要的樣式 CSS 代碼，即可更改樣式。

你也可以使用 Google 上網查詢，其他網站分享的樣式 CSS 代碼，並找到你最喜歡的貼過來即可。

• 參考文章：h2、h3 标题自动生成序号
• 參考網站：色碼表代碼網站

---

如果對文章內容有任何問題，或有想讓小翔另外補充的的內容，歡迎在底下留言讓我知道。

在這裡，我想讓您知道在 小翔教你SEO 網站中，有些連結為聯盟營銷連接，這代表，當人們點擊該連結，並前往其他網站進行購買動作時，我將會從銷售中獲得少部分佣金（但不會影響你購買的價格）。

有關更詳細的聯盟連接說明，請前往 聯盟計畫聲明（FTC） 頁面觀看。

by 小翔