WordPress教程(十):WordPress首行缩进方法

好长时间没有出WordPress教程了,今天晚上利用一点点的时间来把我的WordPress教程继续下去。本节WordPress教程主要是说一说WordPress本身的一个用户体验欠缺的地方。就是后台编辑文章时没有首行缩进这一功能。

只要是中国人都应该知道文章的首行缩进吧。可是WordPress的后台文字编辑中就没有这个功能,就让我们国人用起来很不方便,都是敲空格,这样真是麻烦。那么今天老张博客就来说一说这个WordPress技巧,怎么样让我们更加快捷方面的使用WordPress首行缩进的方法:

一、通过修改主题CSS

查找主题包中的styless文件,找到

.post p{****}(注:*号为部分内容

修改为

.post p{****;text-indent:2em;}

这样,你要后台写文章的时候,就不需要再敲空格了,直接写,等写好以后发布到前台时文章就会自动首行缩进的。当然此种方法就是当你的主题变换时,你必须还得要重复修改一次。另外一点就是不同的主题代码可能不同,这就需要你自己去折腾了。

注意:

  • 这样实现的首行缩进只对段落有效,即对P标签有效,由"Enter"产生的换行有效。
  • 对非P标签无效,即由"Shift"+"Enter"产生的换行无效。
  • 采用修改样式表的方法实现,后台编辑时无效果,前台查看时有效果。

首行缩进的相关CSS说明:

  • text-indent:定义块级元素的首行文本的缩进CSS样式
  • em会继承父级元素字体的大小,2em就是指两个字体的大小。

二、后台增加首行缩进按钮

打开wp-includes/js/quicktags.js文件,找到

edButtons[edButtons.length]=new edButton("ed_more","more","<!--more-->","","t",-1);

在上面的代码下方添加以下代码

edButtons[edButtons.length]=new edButton('ed_para2em','para2em','<p style="text-indent: 2em">','</p>','pa');

添加前和添加后的效果对比

给WordPress编辑器添加首航缩进表情

操作方法演示:在需要缩进的某一段,先在段头点击下"para2em" ,然后在段尾按再次点击。添加编辑器按钮

  • 注:此方法我没有测试,只是从别处转来,效果怎么样还得要进一步折腾。不过我感觉还是第一种方法简单、快捷、方便。

评论区

共 11 条评论
  1. 头像
    大智若鲁 Lv.10
    博主还在坚持呀 支持
    15年前
  2. 头像
    嘿嘿,这个有点用。可惜懒得折腾
    15年前
  3. 头像
    没有愁女人,只有懒女人,只要会打扮,一样是气质美女! http://www.aigou123.tk教您变美丽 每日更新购物导航文章,每日推荐一精品店铺。让您购物更省心!
    15年前
  4. 头像
    xizi Lv.1
    第2个不错,第1个可能会因为主题不一样而CSS代码有变化。 暂时放弃折腾了,抱孩子抱得手酸了。
    15年前
  5. 头像
    感谢老张了 这个问题一直很苦恼
    15年前
  6. 头像
    柳亚 Lv.4
    呵呵,以后要是买我主机的朋友不清楚,我就让他到这里来好了。。。。。。。
    15年前
  7. 头像
    yesureadmin Lv.10
    刚用上的,谢谢,呵呵
    15年前
  8. 头像
    yu Lv.8
    老张.我来看你了.最近可好?
    15年前
  9. 头像
    又学习到了一个小知识,博主的文章写的很好,我会常到关注的
    15年前
  10. 头像
    :shock: 其实这个用全角的空格挺好的。。。我试了试两种方法,都不算是很完美。不同的主题对应不同的方法,全角最好。
    15年前
  11. 头像
    謝謝
    15年前