如何使博客第一段话的第一个字漂亮的大写？

你看!本文的第一段话的第一个字大写!

很容易的, 只需要用到CSS的 first-letter 和 first-child 选择器:

只要将下面的CSS先添加到WORDPRESS的模板里(比如可以放在 Single.php)

<style>
.wp_content p:first-child:first-letter { 
  float: left; 
  color: #903; 
  font-size: 75px; 
  line-height: 60px; 
  padding-top: 4px; 
  padding-right: 8px; 
  padding-left: 3px; 
  font-family: Georgia; 
}
</style>

<style>
.wp_content p:first-child:first-letter { 
  float: left; 
  color: #903; 
  font-size: 75px; 
  line-height: 60px; 
  padding-top: 4px; 
  padding-right: 8px; 
  padding-left: 3px; 
  font-family: Georgia; 
}
</style>

然后在模板函数 functions.php 的最后添加以下几行代码:

// https://helloacm.com
add_filter( 'the_content', 'prefix_big_letter' );
 
function prefix_big_letter($content) {
  return "<div class='wp_content'>$content</div>";
}

// https://helloacm.com
add_filter( 'the_content', 'prefix_big_letter' );

function prefix_big_letter($content) {
  return "<div class='wp_content'>$content</div>";
}

就可以了, 清一下缓存, 然后可以看效果.代码也不需要我过多的解释, 简单粗暴有效! 转走吧,不用谢!

查看英文效果, 请看: https://helloacm.com/how-to-make-first-letter-in-first-paragraph-big-in-wordpress-css-articles/

GD Star Rating
loading...

本文一共 116 个汉字, 你数一下对不对.

如何使博客第一段话的第一个字漂亮的大写?. (AMP 移动加速版本)
上一篇: 公司请的专业摄影师
下一篇: 翻出一支钢笔

赞赏我的几个理由.

¥ 打赏支持

扫描二维码，分享本文到微信朋友圈

0e00ea34bc7e7b2663351533cb0a4887 如何使博客第一段话的第一个字漂亮的大写? 互联网折腾有意思的网站信息与统计

11 条评论

土木坛子

又开始折腾了,在RSS里是看不到的,必须要到网站才能看到.

- JustYY.com 小赖子的英国生活和资讯.
  
  是的.RSS里是不含有CSS的.
  
兔二爷 | 理性的感性生活

我在想这样弄的话,第一个词就被分开了,搜索引擎可能会把它拆开理解.所以我没有搞这个小动作.

- 兔二爷 | 理性的感性生活
  
  我错了,原来直接用的fist-letter选择器,没有分词,这个很好.
  
勺子

窃以为这是非常不必要的.

- 兔二爷 | 理性的感性生活
  
  这个适合在印刷体上使用,网站的话效果应该和终端有关,可能不稳定.
  
忘想

以前我也试过首字这样的效果,后来才改成段与段之间拉长距离,相对于文章更加耐看.

大鹏

真爱玩.据说爱玩的孩子都聪明.

小年

视觉效果很棒的啊!

- JustYY.com 小赖子的英国生活和资讯.
  
  我也是这么觉得的.
  
里念

炫!

相关文章：

11 条评论

评论