當你在wordpress H2 H3的標題上，手動寫上編碼的時候，會遇到兩個問題:
- 若寫完之後，突然要再增加或減少標題，編碼要重新手動編輯。
- 若你有使用文章目錄，這時候的文章目錄看起來會很奇怪。(參考:如何在WordPress製作文章目錄)
比如我在另外一個 java blog 就發生這樣的窘態….
不過，你可以安裝Code Snippets 外掛，來解決這樣的問題。
Code Snippets介紹
能做甚麼?
他可以幫你調整網頁部分的程式碼或是CSS，所以，使用的時候，會好有一些基本的知識會有很大的幫助。不過，本篇文章就很單純針對編碼來處理。因此，你應該只需要複製貼上就可以了。
Code Snippets 安裝
你可以到 wordpress外掛網站上下載外掛。
或是到你的wordpress後台搜尋後直接安裝。
WordPress H2 H3 自動增加編碼
新增程式碼片段
目前的版本，將程式碼片段分為二類
- PHP
- HTML
我們要使用 PHP 這個部分。
設定標題與內容
標題你可以自己定義，也可以複製貼上我的 神啊!自動編碼吧!
內容:
add_action( ‘wp_head’, function () { ?>
<style>
body {
/* 重置計數器成0 */
counter-reset: h2no;
}
/* 在文中 H2 標題前加入 1、2、3.. 的數字編號 */
.entry-content h2::before {
/* 增加計數器值 */
counter-increment: h2no;
/* 顯示計數器 */
content: counter(h2no)”. “;
}
body h2{
/*重置計數器h3no的值*/
counter-reset: h3no;
}
body h3{
/*計數器h3no的值增加1*/
counter-increment: h3no;
}
/* 為h3前添加 1.1 1.2 1.3 的數字 */
.entry-content h3:before {
/*内容显示为：計數器h2no的值+點+計數器h3no的值，格式：1.1*/
content: counter(h2no) “.” counter(h3no) ” “;
}
</style>
<?php } );
提醒:
- 設定完畢，記得儲存與啟用。
- 如果你的網站有使用cache的機制，記得先清除cache才看得到，加上去的效果喔!
以下是調整後的效果
