如何为WordPress站点的H1~H4标题设置编号背景色

操作步骤 #

步骤1：进入自定义CSS设置界面 #

登录WordPress后台，依次点击「外观」→「自定义」→「额外CSS」，即可进入代码添加界面，无需修改主题源码。如果使用子主题进行定制，也可以直接将代码添加到子主题的style.css文件末尾。

步骤2：粘贴自定义CSS代码 #

将以下代码粘贴到额外CSS输入框中，保存发布即可生效：

/* 仅作用于WooCommerce产品页，如需全站生效删除所有 .single-product 前缀即可 */
body.single-product {
  counter-reset: h1-counter h2-counter h3-counter h4-counter;
}

/* 编号通用样式 */
.single-product h1::before,
.single-product h2::before,
.single-product h3::before,
.single-product h4::before {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  margin-right: 10px;
  color: #ffffff;
  background-color: #165DFF; /* 背景色可自行替换色值 */
  border-radius: 4px; /* 不需要圆角可改为0 */
  font-weight: 600;
}

/* H1编号设置 */
.single-product h1 {
  counter-increment: h1-counter;
  counter-reset: h2-counter;
}
.single-product h1::before {
  content: counter(h1-counter);
  width: 28px;
  height: 28px;
  font-size: 16px;
}

/* H2编号设置 */
.single-product h2 {
  counter-increment: h2-counter;
  counter-reset: h3-counter;
}
.single-product h2::before {
  content: counter(h1-counter) "." counter(h2-counter);
  padding: 3px 7px;
  font-size: 15px;
}

/* H3编号设置 */
.single-product h3 {
  counter-increment: h3-counter;
  counter-reset: h4-counter;
}
.single-product h3::before {
  content: counter(h1-counter) "." counter(h2-counter) "." counter(h3-counter);
  padding: 2px 6px;
  font-size: 14px;
}

/* H4编号设置 */
.single-product h4 {
  counter-increment: h4-counter;
}
.single-product h4::before {
  content: counter(h1-counter) "." counter(h2-counter) "." counter(h3-counter) "." counter(h4-counter);
  padding: 2px 5px;
  font-size: 13px;
}

样式自定义调整说明 #

• 若需要全站所有页面的H1-H4标题都应用该带背景的编号效果，删除代码中所有.single-product选择器前缀即可
• 修改background-color属性的色值即可更换编号背景颜色，修改color属性可调整编号文字颜色
• 可根据站点标题字号调整padding、width、height、font-size等参数适配显示效果
• 若之前已经通过其他插件/主题功能生成了标题编号，需要先关闭原有编号功能，避免出现重复编号

效果参考 #

内容的提问来源于stack exchange，提问作者wp_heroes