最新消息:20190717 VPS服务器:Vultr新加坡,WordPress主题:大前端D8,统一介绍入口:关于

【记录】给WordPress的Retina主题中的标题添加编号/标号

WordPress crifan 812浏览 0评论

【问题】

wordpress所用主题是retina,其显示出来的页面page/帖子post中(对应HTML中的h1,h2之类)的标题,都是没有编号的:

h1 h2 h3 not index number

【解决过程】

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:

ie9 effect

Chrome:

chrome effect

FireFox:

firefox effect

5.很明显,上述css控制生成标题的编号生成,对于三个浏览器,IE9,Chrome,Firefox,都是可以正常显示的。

只不过生成的时候,生效的范围是全部都包括了,导致评论和分类中也都去计算出来了编号了,所以,继续去优化。

只保留正文中的标题的编号。

然后去看了html中,对应的帖子正文内容为:

  <div class="entry-content">
  	<p>&nbsp;</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:

body show index number other not

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:

h1 to h6 can work

 

另外,也注意到了,所生成的编号,是一个整体,比如:

title number is whole not single sel

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:

final IE9 title index effect

Chrome:

final Chrome title index effect

FireFox:

final Firefox title index effect

 

【总结】

想要给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-incrementcounter-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 参考手册

转载请注明:在路上 » 【记录】给WordPress的Retina主题中的标题添加编号/标号

发表我的评论
取消评论

表情

Hi,您需要填写昵称和邮箱!

  • 昵称 (必填)
  • 邮箱 (必填)
  • 网址

网友最新评论 (1)

    58 queries in 0.096 seconds, using 18.36MB memory