【问题】
wordpress所用主题是retina，其显示出来的页面page/帖子post中（对应HTML中的h1，h2之类）的标题，都是没有编号的：
【解决过程】
1.目前所能想到的，给标题添加索引标号，是如下可能：
A。html的css控制的
B。retina中某些用于输出html代码的部分控制的
C。wordpress本身某些函数可以控制输出编号
2.找了半天，都没找到有用的参考资料。
3.后来在这里：
HTML5教程:14.3 使用content属性来插入项目编号(3)
其解释了，HTML5中，通过css来控制编号的生成。
4.然后去手动拷贝对应css到某个测试的html中，然后简单修改后，如下：
<style type="text/css">
h1:before{
content: counter(mycounter) ' ';
}
h1{
counter-increment: mycounter;
counter-reset: subcounter;
}
h2:before{
content: counter(mycounter) '.' counter(subcounter) ' ';
}
h2{
counter-increment: subcounter;
counter-reset: subsubcounter;
<!--margin-left: 40px;-->
}
h3:before{
content:counter(mycounter) '.' counter(subcounter) '.' counter(subsubcounter)' ';
}
h3{
counter-increment: subsubcounter;
<!--margin-left: 40px;-->
}
</style>对应的效果是：
iE9：
Chrome：
FireFox：
5.很明显，上述css控制生成标题的编号生成，对于三个浏览器，IE9，Chrome，Firefox，都是可以正常显示的。
只不过生成的时候，生效的范围是全部都包括了，导致评论和分类中也都去计算出来了编号了，所以，继续去优化。
只保留正文中的标题的编号。
然后去看了html中，对应的帖子正文内容为：
<div class="entry-content"> <p> </p> <h1>这个是h1的标题</h1> <p>测试而已</p> <h2>h2标题</h2> <p>普通文字</p> <h3>h3标题</h3> <h3>第二个h3标题</h3> <p>普通测试文字</p> <div class="clear"></div> </div> <!-- end .entry-content -->
所以，只需要改控制为div.entry-content下的标题，然后再去生成编号即可。
折腾了下，如下写法：
<style type="text/css">
div.entry-content{
h1:before{
content: counter(mycounter) ' ';
}
h1{
counter-increment: mycounter;
counter-reset: subcounter;
}
h2:before{
content: counter(mycounter) '.' counter(subcounter) ' ';
}
h2{
counter-increment: subcounter;
counter-reset: subsubcounter;
<!--margin-left: 40px;-->
}
h3:before{
content:counter(mycounter) '.' counter(subcounter) '.' counter(subsubcounter)' ';
}
h3{
counter-increment: subsubcounter;
<!--margin-left: 40px;-->
}
}
</style>是无法工作的。
6. 结果只能改为：
<style type="text/css">
div.entry-content h1:before{
content: counter(mycounter) ' ';
}
div.entry-content h1{
counter-increment: mycounter;
counter-reset: subcounter;
}
div.entry-content h2:before{
content: counter(mycounter) '.' counter(subcounter) ' ';
}
div.entry-content h2{
counter-increment: subcounter;
counter-reset: subsubcounter;
<!--margin-left: 40px;-->
}
div.entry-content h3:before{
content:counter(mycounter) '.' counter(subcounter) '.' counter(subsubcounter)' ';
}
div.entry-content h3{
counter-increment: subsubcounter;
<!--margin-left: 40px;-->
}
</style>就可以达到对应的效果了：
IE9：
7.此时，基本达到需要的效果了，再去把css扩充到h1-h6，然后都测试一遍。
然后进过修改后，代码如下：
<style type="text/css">
div.entry-content h1:before{
content:counter(h1counter) ' ';
}
div.entry-content h1{
counter-increment: h1counter;
counter-reset: h2counter;
}
div.entry-content h2:before{
content:counter(h1counter) '.' counter(h2counter) ' ';
}
div.entry-content h2{
counter-increment: h2counter;
counter-reset: h3counter;
<!--margin-left: 40px;-->
}
div.entry-content h3:before{
content:counter(h1counter) '.' counter(h2counter) '.' counter(h3counter)' ';
}
div.entry-content h3{
counter-increment: h3counter;
counter-reset: h4counter;
}
div.entry-content h4:before{
content:counter(h1counter) '.' counter(h2counter) '.' counter(h3counter) '.' counter(h4counter)' ';
}
div.entry-content h4{
counter-increment: h4counter;
counter-reset: h5counter;
}
div.entry-content h5:before{
content:counter(h1counter) '.' counter(h2counter) '.' counter(h3counter) '.' counter(h4counter) '.' counter(h5counter)' ';
}
div.entry-content h5{
counter-increment: h5counter;
counter-reset: h6counter;
}
div.entry-content h6:before{
content:counter(h1counter) '.' counter(h2counter) '.' counter(h3counter) '.' counter(h4counter) '.' counter(h5counter) '.' counter(h6counter)' ';
}
div.entry-content h6{
counter-increment: h6counter;
counter-reset: h7counter;
}
</style>效果为：
IE9：
另外，也注意到了，所生成的编号，是一个整体，比如：
1.1.2.1是个整体，无法分开选择每个数字，只能整体选中。
8.实现了效果了，接着就去把此css配置加入到wordpress的retina主题中去。
找到
\httpd-2.2.19-win64\httpd-2.2-x64\htdocs\wp-content\themes\retina\style.css
把上述配置添加到：
/* =Headings
------------------------ */
h1, h2, h3, h4, h5, h6 {
font-weight: normal;
color: #222;
clear: both;
}
h1 {
font-size: 26px;
line-height: 1.30;
margin-top: 0.692em;
margin-bottom: 0.692em;
}
h2 {
font-size: 22px;
line-height: 1.35;
margin-top: .818em;
margin-bottom: .818em;
}
h3 {
font-size: 18px;
line-height: 1.40;
margin-top: 1em;
margin-bottom: 1em;
}
h4 {
font-size: 16px;
line-height: 1.45;
margin-top: 1.125em;
margin-bottom: 1.125em;
}
h5 {
font-size: 14px;
line-height: 1.50;
margin-top: 1.285em;
margin-bottom: 1.285em;
}
h6 {
font-size: 12px;
line-height: 1.55;
margin-top: 1.50em;
margin-bottom: 1.50em;
}之后，添加上对应的配置：
/*
generate index number for title from h1 to h6
added by crifan li
if you need indent, then add
margin-left: 40px;
into you h1/h2/../h6
*/
div.entry-content h1:before{
content:counter(h1counter) ' ';
}
div.entry-content h1{
counter-increment: h1counter;
counter-reset: h2counter;
}
div.entry-content h2:before{
content:counter(h1counter) '.' counter(h2counter) ' ';
}
div.entry-content h2{
counter-increment: h2counter;
counter-reset: h3counter;
}
div.entry-content h3:before{
content:counter(h1counter) '.' counter(h2counter) '.' counter(h3counter)' ';
}
div.entry-content h3{
counter-increment: h3counter;
counter-reset: h4counter;
}
div.entry-content h4:before{
content:counter(h1counter) '.' counter(h2counter) '.' counter(h3counter) '.' counter(h4counter)' ';
}
div.entry-content h4{
counter-increment: h4counter;
counter-reset: h5counter;
}
div.entry-content h5:before{
content:counter(h1counter) '.' counter(h2counter) '.' counter(h3counter) '.' counter(h4counter) '.' counter(h5counter)' ';
}
div.entry-content h5{
counter-increment: h5counter;
counter-reset: h6counter;
}
div.entry-content h6:before{
content:counter(h1counter) '.' counter(h2counter) '.' counter(h3counter) '.' counter(h4counter) '.' counter(h5counter) '.' counter(h6counter)' ';
}
div.entry-content h6{
counter-increment: h6counter;
counter-reset: h7counter;
}如此，就可以给标题添加上编号了：
IE9：
Chrome：
FireFox：
【总结】
想要给Wordpress的Retina主题中的标题(HTML中的h1到h6)，添加索引编号，则可以添加对应的css配置到：
wp-content\themes\retina\style.css
中的Headings部分。
具体css配置如下：
/*
generate index number for title from h1 to h6
added by crifan li
if you need indent, then add
margin-left: 40px;
into you h1/h2/../h6
*/
div.entry-content h1:before{
content:counter(h1counter) ' ';
}
div.entry-content h1{
counter-increment: h1counter;
counter-reset: h2counter;
}
div.entry-content h2:before{
content:counter(h1counter) '.' counter(h2counter) ' ';
}
div.entry-content h2{
counter-increment: h2counter;
counter-reset: h3counter;
}
div.entry-content h3:before{
content:counter(h1counter) '.' counter(h2counter) '.' counter(h3counter)' ';
}
div.entry-content h3{
counter-increment: h3counter;
counter-reset: h4counter;
}
div.entry-content h4:before{
content:counter(h1counter) '.' counter(h2counter) '.' counter(h3counter) '.' counter(h4counter)' ';
}
div.entry-content h4{
counter-increment: h4counter;
counter-reset: h5counter;
}
div.entry-content h5:before{
content:counter(h1counter) '.' counter(h2counter) '.' counter(h3counter) '.' counter(h4counter) '.' counter(h5counter)' ';
}
div.entry-content h5{
counter-increment: h5counter;
counter-reset: h6counter;
}
div.entry-content h6:before{
content:counter(h1counter) '.' counter(h2counter) '.' counter(h3counter) '.' counter(h4counter) '.' counter(h5counter) '.' counter(h6counter)' ';
}
div.entry-content h6{
counter-increment: h6counter;
counter-reset: h7counter;
}
提示:
1. 此处的代码中的 HTML DOM content 属性 – counter, counter-increment，counter-reset等内容，均属于CSS2。
目前除了主流浏览器对于上述几个参数的支持是:
- >IE 8 均支持
- >FireFox 1.5 均支持
- >Chrome 1.0 均支持
- >Opera 7.0 均支持
详细的分析过程可参考：
【主流浏览器所对应的浏览器内核】 + 【主流浏览器对于CSS2的counter，counter-increment，counter-reset的支持程度】
2.CSS2.1 相关的规范是： 12 Generated content, automatic numbering, and lists
3. 其它更多CSS相关的参数可参考：CSS 参考手册