【问题】
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中,然后简单修改后,如下:
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 | <style type= "text/css" > h 1: before{ content : counter (mycounter) ' ' ; } h 1 { counter-increment : mycounter; counter-reset : subcounter; } h 2: before{ content : counter (mycounter) '.' counter (subcounter) ' ' ; } h 2 { counter-increment : subcounter; counter-reset : subsubcounter; <!-- margin-left : 40px ;--> } h 3: before{ content : counter (mycounter) '.' counter (subcounter) '.' counter (subsubcounter) ' ' ; } h 3 { counter-increment : subsubcounter; <!-- margin-left : 40px ;--> } </style> |
对应的效果是:
iE9:
Chrome:
FireFox:
5.很明显,上述css控制生成标题的编号生成,对于三个浏览器,IE9,Chrome,Firefox,都是可以正常显示的。
只不过生成的时候,生效的范围是全部都包括了,导致评论和分类中也都去计算出来了编号了,所以,继续去优化。
只保留正文中的标题的编号。
然后去看了html中,对应的帖子正文内容为:
1 2 3 4 5 6 7 8 9 10 11 | <div class= "entry-content" > <p> </p> <h 1 >这个是h 1 的标题</h 1 > <p>测试而已</p> <h 2 >h 2 标题</h 2 > <p>普通文字</p> <h 3 >h 3 标题</h 3 > <h 3 >第二个h 3 标题</h 3 > <p>普通测试文字</p> <div class= "clear" ></div> </div> <!-- end .entry-content --> |
所以,只需要改控制为div.entry-content下的标题,然后再去生成编号即可。
折腾了下,如下写法:
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 | <style type= "text/css" > div.entry-content{ h 1: before{ content : counter (mycounter) ' ' ; } h 1 { counter-increment : mycounter; counter-reset : subcounter; } h 2: before{ content : counter (mycounter) '.' counter (subcounter) ' ' ; } h 2 { counter-increment : subcounter; counter-reset : subsubcounter; <!-- margin-left : 40px ;--> } h 3: before{ content : counter (mycounter) '.' counter (subcounter) '.' counter (subsubcounter) ' ' ; } h 3 { counter-increment : subsubcounter; <!-- margin-left : 40px ;--> } } </style> |
是无法工作的。
6. 结果只能改为:
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 | <style type= "text/css" > div.entry-content h 1: before{ content : counter (mycounter) ' ' ; } div.entry-content h 1 { counter-increment : mycounter; counter-reset : subcounter; } div.entry-content h 2: before{ content : counter (mycounter) '.' counter (subcounter) ' ' ; } div.entry-content h 2 { counter-increment : subcounter; counter-reset : subsubcounter; <!-- margin-left : 40px ;--> } div.entry-content h 3: before{ content : counter (mycounter) '.' counter (subcounter) '.' counter (subsubcounter) ' ' ; } div.entry-content h 3 { counter-increment : subsubcounter; <!-- margin-left : 40px ;--> } </style> |
就可以达到对应的效果了:
IE9:
7.此时,基本达到需要的效果了,再去把css扩充到h1-h6,然后都测试一遍。
然后进过修改后,代码如下:
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 | <style type= "text/css" > div.entry-content h 1: before{ content : counter (h 1 counter) ' ' ; } div.entry-content h 1 { counter-increment : h 1 counter; counter-reset : h 2 counter; } div.entry-content h 2: before{ content : counter (h 1 counter) '.' counter (h 2 counter) ' ' ; } div.entry-content h 2 { counter-increment : h 2 counter; counter-reset : h 3 counter; <!-- margin-left : 40px ;--> } div.entry-content h 3: before{ content : counter (h 1 counter) '.' counter (h 2 counter) '.' counter (h 3 counter) ' ' ; } div.entry-content h 3 { counter-increment : h 3 counter; counter-reset : h 4 counter; } div.entry-content h 4: before{ content : counter (h 1 counter) '.' counter (h 2 counter) '.' counter (h 3 counter) '.' counter (h 4 counter) ' ' ; } div.entry-content h 4 { counter-increment : h 4 counter; counter-reset : h 5 counter; } div.entry-content h 5: before{ content : counter (h 1 counter) '.' counter (h 2 counter) '.' counter (h 3 counter) '.' counter (h 4 counter) '.' counter (h 5 counter) ' ' ; } div.entry-content h 5 { counter-increment : h 5 counter; counter-reset : h 6 counter; } div.entry-content h 6: before{ content : counter (h 1 counter) '.' counter (h 2 counter) '.' counter (h 3 counter) '.' counter (h 4 counter) '.' counter (h 5 counter) '.' counter (h 6 counter) ' ' ; } div.entry-content h 6 { counter-increment : h 6 counter; counter-reset : h 7 counter; } </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
把上述配置添加到:
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 | /* =Headings ------------------------ */ h 1 , h 2 , h 3 , h 4 , h 5 , h 6 { font-weight : normal ; color : #222 ; clear : both ; } h 1 { font-size : 26px ; line-height : 1.30 ; margin-top : 0.692em ; margin-bottom : 0.692em ; } h 2 { font-size : 22px ; line-height : 1.35 ; margin-top : . 818em ; margin-bottom : . 818em ; } h 3 { font-size : 18px ; line-height : 1.40 ; margin-top : 1em ; margin-bottom : 1em ; } h 4 { font-size : 16px ; line-height : 1.45 ; margin-top : 1.125em ; margin-bottom : 1.125em ; } h 5 { font-size : 14px ; line-height : 1.50 ; margin-top : 1.285em ; margin-bottom : 1.285em ; } h 6 { font-size : 12px ; line-height : 1.55 ; margin-top : 1.50em ; margin-bottom : 1.50em ; } |
之后,添加上对应的配置:
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 | /* 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 h 1: before{ content : counter (h 1 counter) ' ' ; } div.entry-content h 1 { counter-increment : h 1 counter; counter-reset : h 2 counter; } div.entry-content h 2: before{ content : counter (h 1 counter) '.' counter (h 2 counter) ' ' ; } div.entry-content h 2 { counter-increment : h 2 counter; counter-reset : h 3 counter; } div.entry-content h 3: before{ content : counter (h 1 counter) '.' counter (h 2 counter) '.' counter (h 3 counter) ' ' ; } div.entry-content h 3 { counter-increment : h 3 counter; counter-reset : h 4 counter; } div.entry-content h 4: before{ content : counter (h 1 counter) '.' counter (h 2 counter) '.' counter (h 3 counter) '.' counter (h 4 counter) ' ' ; } div.entry-content h 4 { counter-increment : h 4 counter; counter-reset : h 5 counter; } div.entry-content h 5: before{ content : counter (h 1 counter) '.' counter (h 2 counter) '.' counter (h 3 counter) '.' counter (h 4 counter) '.' counter (h 5 counter) ' ' ; } div.entry-content h 5 { counter-increment : h 5 counter; counter-reset : h 6 counter; } div.entry-content h 6: before{ content : counter (h 1 counter) '.' counter (h 2 counter) '.' counter (h 3 counter) '.' counter (h 4 counter) '.' counter (h 5 counter) '.' counter (h 6 counter) ' ' ; } div.entry-content h 6 { counter-increment : h 6 counter; counter-reset : h 7 counter; } |
如此,就可以给标题添加上编号了:
IE9:
Chrome:
FireFox:
【总结】
想要给Wordpress的Retina主题中的标题(HTML中的h1到h6),添加索引编号,则可以添加对应的css配置到:
wp-content\themes\retina\style.css
中的Headings部分。
具体css配置如下:
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 | /* 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 h 1: before{ content : counter (h 1 counter) ' ' ; } div.entry-content h 1 { counter-increment : h 1 counter; counter-reset : h 2 counter; } div.entry-content h 2: before{ content : counter (h 1 counter) '.' counter (h 2 counter) ' ' ; } div.entry-content h 2 { counter-increment : h 2 counter; counter-reset : h 3 counter; } div.entry-content h 3: before{ content : counter (h 1 counter) '.' counter (h 2 counter) '.' counter (h 3 counter) ' ' ; } div.entry-content h 3 { counter-increment : h 3 counter; counter-reset : h 4 counter; } div.entry-content h 4: before{ content : counter (h 1 counter) '.' counter (h 2 counter) '.' counter (h 3 counter) '.' counter (h 4 counter) ' ' ; } div.entry-content h 4 { counter-increment : h 4 counter; counter-reset : h 5 counter; } div.entry-content h 5: before{ content : counter (h 1 counter) '.' counter (h 2 counter) '.' counter (h 3 counter) '.' counter (h 4 counter) '.' counter (h 5 counter) ' ' ; } div.entry-content h 5 { counter-increment : h 5 counter; counter-reset : h 6 counter; } div.entry-content h 6: before{ content : counter (h 1 counter) '.' counter (h 2 counter) '.' counter (h 3 counter) '.' counter (h 4 counter) '.' counter (h 5 counter) '.' counter (h 6 counter) ' ' ; } div.entry-content h 6 { counter-increment : h 6 counter; counter-reset : h 7 counter; } |
提示:
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 参考手册