首

字下沉是一个细节，我逛了不少个人网站，发现罕有人使用这个用于文章个性化的效果。
当然，百度一搜该标题会有不少结果，会教你用CSS、用插件或者直接在文章编辑上使用下沉样式。

这篇文章主要是介绍写文章时手动用简码添加这个效果，因为有的朋友写文章有时第一个字可能连句要包含在某个标题特效内，有时又不用，比如我，前面一篇文章交易与现状首字其实是包含在一个标题特效内的，而像再前一篇JVDT_20140629_GBPCAD第一句只有几个字然后是图片，如果要所有文章都首字下沉，那肯定乱套了。
所以我觉得应该按自己的需求来添加这个效果，大部分可以加上首字下沉，小部分没法加或加了影响美观的就不加。

首字下沉效果的CSS其实很简单，直接代码如下：

<p style="float: left;color:#333;font-size: 45px;font-weight: 300;margin: 12px 5px 0px 0px;">(这里填第一个字)</p>

大小可以根据自己的文章字体大小和行距调节，你也可以利用CSS3的选择器来实现首字下沉，具体来说就是:first-letter与:first-of-type。 结合这两个选择器，就可以实现文章的首字下沉。
不过要把上面的代码转成简码再变成编辑器上面的按钮才最方便。方法如下：

首先是变成简码，在主题目录下的functions.php里面加入如下代码：

//首字下沉
function inlojv_dropcaps($atts, $content=null, $code="") {
    $return = '<p style="float: left;color:#333;font-size: 45px;font-weight: 300;margin: 12px 5px 0px 0px;">';
    $return .= $content;
    $return .= '</p>';
    return $return;
}
add_shortcode('inlojv_dropcaps' , 'inlojv_dropcaps' );

之后是把简码添加到编辑器的按钮上，也是在主题目录下的functions.php里面加入如下代码：

function appthemes_add_quicktags() {
?>
<script type="text/javascript">
QTags.addButton( '首字下沉', '首字下沉', '[inlojv_dropcaps]', '[/inlojv_dropcaps]' ); //首字下沉
</script>
<?php
}
add_action('admin_print_footer_scripts', 'appthemes_add_quicktags' );

完成上面两步，你的文章html编辑器状态下就会多一个【首字下沉】按钮，如图所示：

要使用时，选中第一个字，点击【首字下沉】就会直接显示简码

[inlojv_dropcaps]首[/inlojv_dropcaps]

预览文章就能看到效果了。

最终效果见本文首字。