最
近一直在琢磨如何在WordPress中设置文本的首行缩进和首字下沉，查阅了许多资料，大部分都是单独实现首行缩进或者首字下沉，对于如何同时实现这两种效果没有找到相关介绍。一番摸索之后找到了一个比较好的解决方案，简要介绍如下。
一、单独使用首行缩进
当使用的WordPress主题没有对页面中的文字段落设置自动首行缩进时，可以通过编辑style.css的方法手动设置。
在stye.css文件中插入以下代码即可实现目的，其中2em的意思是两个字段。
|
1 |
#content p{text-indent:2em;}
|
使用这种方法可以实现全部文字自动缩进，而在后台编辑器中看不到缩进的效果。假如在某些段落不想进行缩进，则可以通过临时插入相应标签的办法来实现。将如下代码插入到function.php中，就可以在编辑面板看到新增加的取消缩进快捷按钮。
|
1
2
3
4
5
6
7
|
//取消首行缩进
add_action( 'admin_print_footer_scripts', 'quicktagsbuttons', 100 );
function quicktagsbuttons() { ?>
<script type="text/javascript">
QTags.addButton( 'id_1', '取消缩进', '<p style="text-indent:0em">插入内容</p>');
</script>
<?php }
|
下图为在后台编辑器添加的不缩进按钮：
此外，使用全局自动缩进时可能会导致一些元素无法居中显示，此时需要在后台编辑器中增加一个用来设置居中显示的按钮来修复这一问题。代码如下：
|
1
2
3
4
5
6
7
|
//居中显示
add_action( 'admin_print_footer_scripts', 'quicktagsbuttons', 100 );
function quicktagsbuttons() { ?>
<script type="text/javascript">
QTags.addButton( 'id_3', '居中显示', '<div align="center">插入内容</div>');
</script>
<?php }
|
在使用时，点击按钮插入相关标签，将“插入内容”字样替换为图片的标签。
假如缩进设置使用的不多，则不需要如此繁琐。只需要在后台编辑器添加设置缩进的按钮，方便随时使用即可。
二、单独使用首字下沉
首字下沉同样也可以通过全局设置来实现，在style.css中插入如下代码就可以了。
|
1
2
3
4
5
|
.post p:first-of-type:first-letter{
font-size: 48px;
padding: 10px;
float: left;
}
|
但是这种设置不适用于有摘要或者引言的文章，因为一般只有正文首字才需要设置字体下沉。例如以下这种效果显然不是太好。
这
里是摘要，这里不需要设置首字下沉。这里是摘要，这里不需要设置首字下沉。这里是摘要，这里不需要设置首字下沉。这里是摘要，这里不需要设置首字下沉。
这里是正文，需要设置首字下沉。这里是正文，需要设置首字下沉。这里是正文，需要设置首字下沉。这里是正文，需要设置首字下沉。
所以最好还是在后台编辑器中添加相关按钮，以便手动设置任意文字下沉。直接将以下代码插入到function.php文件的最后，就可以在编辑器中找到了。
|
1
2
3
4
5
6
7
8
|
//首字下沉
add_action( 'admin_print_footer_scripts', 'quicktagsbuttons', 100 );
function quicktagsbuttons() { ?>
<script type="text/javascript">
QTags.addButton( 'id_4', '首字下沉', '<p style="text-indent:0em;float: left;font-size: 2em;margin-right:0.3em; margin-left:0.3em; margin-bottom:0em">插入内容</p>');
</script>
<?php }
|
在文章编辑过程中，点击首字下沉按钮并将“插入内容”字样替换成段落的第一个字即可。代码中的style可以自由修改成为自己喜欢的样式。例如，想要首字的颜色和正文不一样，则直接再增加color:#XXXXXX就可以。
三、两者同时使用
当同时使用两种效果时，可能会出现一些互相冲突的地方，例如下面这种情况：
测
试文本测试文本测试文本测试文本测试文本测试文本测试文本测试文本测试文本测试文本测试文本测试文本测试文本测试文本
这种问题很简单，点击取消缩进按钮，将“插入内容”字样替换为段落中除了首字之外的所有文字即可。
1、本文所用添加快捷按钮的代码模板参考自：http://www.aiit.wang/208.html；
2、上文所述不同按钮的代码可合并为一个整体。
本文链接：https://www.cuitn.com/sharing-something/164/