精简代码实现WordPress文章首字放大

精简代码实现WordPress文章首字放大:首字放大效果也可以叫做首字下沉,最早常见于报纸杂志,然后慢慢被人用在了网站上,教程方法其实很早就有人讨论了,添加方法也各式各样,大致分为下面三种:

1.定义好CSS样式标签,然后手动给第一个字添加标签

1a.延伸一点就是给编辑器增加一个快捷标签按钮

优点:此方法是最有效最彻底的,但比较麻烦

2.通过Js 给文章第一个字添加样式标签

优点:现在很流行用js添加,确实js灰常强大,不过因为需要js加载匹配,所以首字放大效果会有延时

3.通过Css 给文章第一个字添加样式标签

优点:代码简洁,实用性强,修改简单,经过修改优化后就是我现在使用的方法

然后我们再来了解下WordPress 文章页面区域的基本架构大致如下:

1
2
3
4
5
6
<div id="context">
<p>我是一篇演示文档的首行开头</p>
<p>我是正文第2段落</p>
<p>我是正文第3段落</p>
<p>我是正文第n段落</p>
</div>

除手动添加样式标签外,通过JS和CSS 添加方法都是给?div标签?”context”里面的第一个“P”标签赋值,我现在使用的代码如下,你添加到自己的主题CSS里面即可(但需要留意下上面的标签是否一样,个别另类的主题可能会有不同)

1
2
3
4
5
6
7
8
9
.context > p:first-child:first-letter {
color: #8844BB;
float: left;
font-size: 2.1em;
font-weight: bold;
line-height: 1em;
margin: -6px?3px;
position: relative;
}

注:我不喜欢首字下沉占多行的效果,如果你需要那个效果,可以修改margin的值(例如改为:margin: 3px;)

进阶篇:

如果你文章头部加了图片或者横幅广告的话,你会发现首字放大效果失效了,为什么呢?其实你自己分析上面的代码会发现,它是给”context”里面的第一个“P”标签赋值,从而让第一个给第一个字符增加样式,而启用了文章头部加了图片或者横幅广告的话,第一个字符就变成了“<”,自然无法看到想要的效果。
添加方法也很简单,我们增加一个div单独包裹着文章内容即可,例如下面的例子:

1
2
3
4
5
6
7
8
9
<div id="context">
<p>其实你可以把我理解为一个图片或一个广告,O(∩_∩)O~</p>
<div id="henghengzhu">
<p>我是一篇演示文档的首行开头</p>
<p>我是正文第2段落</p>
<p>我是正文第3段落</p>
<p>我是正文第n段落</p>
</div>
</div>

此时对应css代码则改为:

1
2
3
4
5
6
7
8
9
.henghengzhu > p:first-child:first-letter {
color: #8844BB;
float: left;
font-size: 2.1em;
font-weight: bold;
line-height: 1em;
margin: -6px?3px;
position: relative;
}

标签:

声明: 本站wordpress主题均为原创转载请注明出处,本文固定地址:http://www.92off.com/article-first-word-zoom.html