网络干货 ·

{教程}文章首行段落缩进2格或者4格或其他,美观你的文章


用几行简单的代码来美观你的文章,打小学语文写文章写作文,都讲究写前空两格,1个是传统文化,1个是比较美观,那么在WordPress上也不例外,这样做还能增加可观赏性与易读性,月宅全站文章均已实现该功能,接下来讲解如何完成它。


教程

凡是加功能,都会接触到wp主题的functions.php文件,打开它。

随后加入以下代码,其中的text-indent:4em4em为缩进多少个字节,月宅为4格,自我感觉2格不够用。

//首行缩进
function Bing_text_indent($text){
$return = str_replace('<p', '<p style="text-indent:4em;"',$text);
return $return;
}
add_filter('the_content','Bing_text_indent');

教程二,通过CSS来完成

首先你需要一个浏览器,然后会按F12与右键审查元素。接着打开主题的style.css,搜索这个class样式然后需要基础的CSS知识,你要是没有,那么直接复制黏贴吧。

可见我的主题是没有缩进代码的,所以要加入,4em随便你写,我就是喜欢4.

text-indent : 4em

打开css文件后直接搜索你复制的id名,接着加入进去就OK啦,随便你加在哪,总之是要在这行ID内。

完成后:

 

其他说明

加入以后不需要手动缩进,写文章也就这样写,发布之后会自动完成任务,其他历史文章也会自动完成。

23:16补一点

该function函数会导致部分高亮插件失效,变成“515456231231122331231212”之类,另外下面评论500错误是因为有中文字符,现在已经修正了。

参与评论

  • 无人小站

    我测试下面的这个缩进我可以用,具体可以参考小站 :cry:
    //文章段落首行缩进两格
    function Bing_text_indent($text){
    $return = str_replace('<p', '<p style="text-indent:2em;"',$text);
    return $return;
    }
    add_filter('the_content','Bing_text_indent');

    2年前 (2017-05-10)
    回复
    回复无人小站
  • LiarOnce

    很好我选择css :shock:

    2年前 (2017-05-10)
    回复
    回复LiarOnce
  • 2年前 (2017-05-10)
    回复
    回复无人小站
  • 无人小站

    话说月宅,wp的Yoast SEO这个插件好用吗 :sad:

    2年前 (2017-05-09)
    回复
    回复无人小站
  • 月宅

    :x 更新教程啦

    2年前 (2017-05-09)
    回复
    回复月宅
  • 无人小站

    这么久差评 :grin:

    2年前 (2017-05-09)
    回复
    回复无人小站
  • 月宅

    我这是现弄现卖的教程 :idea: 可不是从傲娇的百度偷来的

    2年前 (2017-05-09)
    回复
    回复月宅
  • 无人小站

    第一种方法还是无效 :cool:

    2年前 (2017-05-09)
    回复
    回复无人小站
  • 月宅

    无效的原因是因为没有月宅帅,如果想要比月宅帅的话,那就用第二种=-=

    2年前 (2017-05-09)
    回复
    回复月宅
  • 无人小站

    明天再折腾了吸番嘀嘀嘀 :evil:

    2年前 (2017-05-09)
    回复
    回复无人小站
  • 月宅

    没用过,不做评论,感觉是多此一举

    2年前 (2017-05-09)
    回复
    回复月宅
  • 无人小站

    加了之后直接全站报错 :|

    2年前 (2017-05-09)
    回复
    回复无人小站
  • 月宅

    哈哈,主意复制后字符的大小写,这个我没有用代码框

    2年前 (2017-05-09)
    回复
    回复月宅
  • 无人小站

    原来是标点符号自动切换成中文的标题符号的锅 :cool: :evil:

    2年前 (2017-05-09)
    回复
    回复无人小站
  • 月宅

    待会我换成代码框

    2年前 (2017-05-09)
    回复
    回复月宅
  • LiarOnce

    然而我加了直接500,我最后还是选择了CSS(反正很简单)

    2年前 (2017-05-09)
    回复
    回复LiarOnce
  • 月宅

    :x 更新教程啦

    2年前 (2017-05-09)
    回复
    回复月宅
  • 月宅

    我没有用代码框,复制后,貌似变中文字符了

    2年前 (2017-05-09)
    回复
    回复月宅
  • yx17

    签到成功!签到时间:下午9:28:08每日打卡,生活更精彩哦~

    2年前 (2017-05-09)
    回复
    回复yx17
  • 月宅

    签到成功!签到时间:下午2:54:01每日打卡,生活更精彩哦~

    2年前 (2017-05-09)
    回复
    回复月宅