You are currently viewing 2022如何在WordPress H2 H3 自動增加編碼 Code Snippets
如何在Wordpress H2 H3 自動增加編碼 Code Snippets

2022如何在WordPress H2 H3 自動增加編碼 Code Snippets

當你在wordpress H2 H3的標題上,手動寫上編碼的時候,會遇到兩個問題:

  • 若寫完之後,突然要再增加或減少標題,編碼要重新手動編輯。
  • 若你有使用文章目錄,這時候的文章目錄看起來會很奇怪。(參考:如何在WordPress製作文章目錄)

比如我在另外一個 java blog 就發生這樣的窘態….

目錄上重複編號
目錄上重複編號

不過,你可以安裝Code Snippets 外掛,來解決這樣的問題。

Code Snippets介紹

能做甚麼?

他可以幫你調整網頁部分的程式碼或是CSS,所以,使用的時候,會好有一些基本的知識會有很大的幫助。不過,本篇文章就很單純針對編碼來處理。因此,你應該只需要複製貼上就可以了。

Code Snippets 安裝

你可以到 wordpress外掛網站上下載外掛。

Code-Snippets-Pro
Code-Snippets-Pro  圖片來源: wordpress外掛網站

或是到你的wordpress後台搜尋後直接安裝。

安裝外掛
安裝外掛
Code-Snippets安裝
Code-Snippets安裝
安裝之後,記得要啟用喔!
 

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才看得到,加上去的效果喔!

以下是調整後的效果

自動編碼後的文章目錄與標題
自動編碼後的文章目錄與標題