解决wordpress文章首行缩进问题

下午,ONC问我“wordpress编辑文章的时候是怎么首行缩进哦?两个空格?”我回答是的。因为我平时就是这么干的。然后我又联想到博客页面在百度快照中文章段落前的空格都变成了诸多的“?”,这个应该有很大的联系吧。

之前知道可以用修改主题中的style.css文件来达到预期目的,但自己并没有动手去实践,每次编辑文章都是按几个空格了事。今天既然提出来了,就不能再放过了吧。要修改的“p”并不好找,花了一点时间,先找到了post类,然后content类,都是按着自己的理解去 ,因为自己并不清楚主题是怎么表达的,各个主题又有差异。结果如下:

.post .content p {
	margin-bottom:10px;
}

在上面添加了一句:

text-indent:2em;

变成:

.post .content p {
	margin-bottom:10px;
         text-indent:2em;
}

这样每一段落首行都会缩进,成为中国式的段落标准,另一种方法就每次手动添加CSS代码,在html编辑器里编写需要缩进的段落前先加上下面一句:

《p style="text-index:2em》

然后继续文章内容。这里就又有偷懒的方法了,既然是在html编辑模式下添加代码,何不遵照以前代码高亮显示插件+DIY按钮的方法再来做一个按钮呢,打开wp-includes/js/quicktags.js,在上次添加的后面又加了一句:

edButtons[edButtons.length]=new edButton("ed_kong","kong",'《p style="text-indent:2em"》',"《/p》","kong");

代码中所有的“《”“》”都改成“< ”“>”。

 

总结一下:第一种方法改的是主题,一劳永逸,简单方便,但会随着主题的更换,效果也会消失;第二种方法改的是编辑框,嵌在WordPress中,也可能会因为升级之类的而被覆盖,相对变动会少很多,看自己喜欢了。

评论

《 “解决wordpress文章首行缩进问题” 》 有 57 条评论

  1. 小松 的头像

    不错,我就是用css办法实现的~

    1. hesiway 的头像
      hesiway

      @小松, emlog不是直接html编辑的么~

  2. 迎接 的头像

    原来还会变成问号的啊,改改去“`

    1. hesiway 的头像
      hesiway

      @迎接, 我以前的百度快照是这样,改完过天我再看看,呵呵

  3. C度空间 的头像

    学习一下!

    1. hesiway 的头像
      hesiway

      @C度空间, :嘻: 可以试试~

  4. 迎接 的头像

    第一次来你这就转载你的文章了 呵呵“`

    1. hesiway 的头像
      hesiway

      @迎接, 恩~欢迎的的~ :微笑:

      1. 迎接 的头像

        @hesiway, 足迹真好用啊,找自己评论很简单,呵呵

  5. 河海浪子 的头像

    emlog,是直接html编辑。

    1. hesiway 的头像
      hesiway

      @河海浪子, 恩,我也装过emlog,还提供了两种方式编辑~

  6. 人好哇! 的头像

    我也一直在想为啥不符合中文格式,原来还需要改点代码。哎。。。WP还真难搞~

    1. hesiway 的头像
      hesiway

      @人好哇!, 恩,WP外国人开发的,首先支持自己的嘛~不过有很多好的编辑器的~

    2. 流年 的头像

      @人好哇!, 乱码是你修改过源文件后保存为了gbk等格式,保存为utf8即可

  7. PARA 的头像

    看来还是直接修改CSS的方法比较方便~

    1. hesiway 的头像
      hesiway

      @PARA, 恩,是啊~一劳永逸~效果还很好~

  8. 本地智慧 的头像

    很有见地,本地智慧虚拟团队正在寻找各类起源于草根的互联网专家,请您加入和支持

    1. hesiway 的头像
      hesiway

      @本地智慧, :微笑: 去看看~

  9. 集趣 的头像

    嗯~换其他的方式也哦!

    1. hesiway 的头像
      hesiway

      @集趣, :微笑: 择优用之~

  10. 岸边 的头像

    哎,我都是手动打空格 :偷笑:

    1. hesiway 的头像
      hesiway

      @岸边, 怎么可以跟我一样呢~ :偷笑:

      1. 林西老九 的头像

        @hesiway, 我也是的,哈哈

      2. 岸边 的头像

        @hesiway, 看来大家都一样 :偷笑:

  11. 权子 的头像

    来踩踩~~~

    1. hesiway 的头像
      hesiway

      @权子, 欢迎欢迎~

  12. merror 的头像

    囧 这个倒是没注意
    直接顶行写了。

    1. hesiway 的头像
      hesiway

      @merror, 每段开头空两个,我们小学语文老师就开始教了~ 一直如此:偷笑:

  13. Ebo 的头像

    偶还是习惯插入空格吧。

    1. hesiway 的头像
      hesiway

      @Ebo, 他也不是按几个空格就空几格的,所以每次都要调整~

  14. 冷轩信 的头像

    一直用的是第一种方法,第二种不错哦

    1. hesiway 的头像
      hesiway

      @冷轩信, 第二种用时还是烦了点,每次要点,还会污染文章~

  15. jszby 的头像

    呵呵,使用的是QQ主题皮肤呀,不错,我也是使用的这个主题,但是背景为蓝色的。

    1. hesiway 的头像
      hesiway

      @jszby, 嘿嘿,被你发现了哦~ :嘻:

  16. jszby 的头像

    我使用的是宽屏,比你的宽很多。呵呵

    1. hesiway 的头像
      hesiway

      @jszby, 要是页面宽度按百分比输出就好了~ :微笑:

  17. TTkea 的头像

    玩代码的都是高手呀,呵呵~

    1. hesiway 的头像
      hesiway

      @TTkea, 徒手能写那才叫高手~嘿嘿

  18. 大少 的头像

    我比较倾向于第一种,不会让CSS污染文本,而且一旦定义了行间样式,以后主题的更改应用都会受到一点点的影响。而第一种就没有这种问题。

    1. hesiway 的头像
      hesiway

      @大少, 很犀利~这是重要的一面~

  19. 3q博客 的头像

    这个很实用,简单

    1. hesiway 的头像
      hesiway

      @3q博客, 恩,可是以前自己打的空格还在,现在首行空四格了~ :哭:

  20. miracle 的头像

    使用几乎任何网站程序,我都要为内容中的P加上text-indent:2em

    1. hesiway 的头像
      hesiway

      @miracle, 呵呵,好像是的,我接触的都是这样~

  21. sky 的头像

    不错不错,学习了啊

    1. hesiway 的头像
      hesiway

      @sky, :嘻: 欢迎过来逛逛~

  22. 流年 的头像

    无需刻意追求缩进,缩进的目的主要是为了使段落分隔明显。而对于web文本来说,一般段落间距比段间行距宽得多,很容易区分出来

    1. hesiway 的头像
      hesiway

      @流年, 首行缩进已是中国人的习惯了,就应为之前有部分文章段落间隔已经和行距一样了,完全分不出才有这个~

  23. 流年 的头像

    另提示一下,文中想显示<只需要输入&lt(后面加个英文分号;)即可,而>号不用处理,直接输入即可

    1. hesiway 的头像
      hesiway

      @流年, 我打《》而不用<>是因为文章直接把代码转换成html中的意义了,如《p》变成了换段而不显示了~

      1. 流年 的头像

        @hesiway, 所以用我上面说的那个实体来代替<就可以啦;至于>号就直接输不会被转义的

        1. hesiway 的头像
          hesiway

          @流年, 恩,我在html编辑中看到可视化编辑转过来的<成了&lt,,发布后都是不转义的~下次注意了

          1. 流年 的头像

            @hesiway, 你应该是用上了代码插件的,直接按照说明copy进去就可以了,一般不需要进行处理的了;
            另,建议修正一下评论框,将style.css文件第907行的width改为99%;要不嵌套的时候会撑破

          2. hesiway 的头像
            hesiway

            @流年, 好像我都是直接考进去的,下次写的时候注意下;
            评论框问题我一直想解决,本来想把框放在嵌套的下方,不调用到嵌套中,把固定宽改成百分数应该能解决了,不用那么麻烦了;
            多谢诸多建议~ :微笑:

  24. 集思 的头像

    我也试过加text-indent属性,但是图片他也会缩进的。

    1. hesiway 的头像
      hesiway

      @集思, 换行的它都缩了,总感觉编辑这块做的不完美呢~

  25. 深圳摄影工作室 的头像

    wordpress系统好像很好用是吗