实现WordPress文章首字放大

2019独角兽企业重金招聘Python工程师标准>>>

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

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

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

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

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

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

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

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

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

1. <div id="context">  

2. <p>我是一篇演示文档的首行开头</p>  

3. <p>我是正文第2段落</p>  

4. <p>我是正文第3段落</p>  

5. <p>我是正文第n段落</p>  

6. </div>  

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

1. .context > p:first-child:first-letter {  

2. color: #8844BB;  

3. float: left;  

4. font-size: 2.1em;  

5. font-weight: bold;  

6. line-height: 1em;  

7. margin: -6px?3px;  

8. position: relative;  

9. }  

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

进阶篇：

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

1. <div id="context">  

2. <p>其实你可以把我理解为一个图片或一个广告，O(∩_∩)O~</p>  

3. <div id="henghengzhu">  

4. <p>我是一篇演示文档的首行开头</p>  

5. <p>我是正文第2段落</p>  

6. <p>我是正文第3段落</p>  

7. <p>我是正文第n段落</p>  

8. </div>  

9. </div>  

此时对应css代码则改为：

1. .henghengzhu > p:first-child:first-letter {  

2. color: #8844BB;  

3. float: left;  

4. font-size: 2.1em;  

5. font-weight: bold;  

6. line-height: 1em;  

7. margin: -6px?3px;  

8. position: relative;  

9. }  

转载于:https://my.oschina.net/ajian2014/blog/302474