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

JustYY.com 小赖子的英国生活和资讯

9 years ago

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

很容易的, 只需要用到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/

强烈推荐

英国代购-畅购英伦
TopCashBack 返现 (英国购物必备, 积少成多, 我2年来一共得了3000多英镑)
Quidco 返现 (也是很不错的英国返现网站, 返现率高)
注册就送10美元, 免费使用2个月的 DigitalOcean 云主机(性价比超高, 每月只需5美元)
注册就送10美元, 免费使用4个月的 Vultr 云主机(性价比超高, 每月只需2.5美元)
注册就送10美元, 免费使用2个月的阿里云主机(性价比超高, 每月只需4.5美元)
注册就送20美元, 免费使用4个月的 Linode 云主机(性价比超高, 每月只需5美元) (折扣码: PodCastInit2022)
PlusNet 英国光纤(超快, 超划算! 用户名 doctorlai)
刷了美国运通信用卡一年得到的积分换了 485英镑
注册就送50英镑 – 英国最便宜最划算的电气提供商
能把比特币莱特币变现的银行卡! 不需要手续费就可以把虚拟货币法币兑换

微信公众号: 小赖子的英国生活和资讯 JustYYUK

阅读 桌面完整版

强烈推荐

相关文章：