为WordPress的HTML编辑界面添加按钮

从安装WordPress,架设独立博客以来已经有4个月了,一直都是在用HTML代码来写博文,虽然有可视化的界面,但是仍然觉得WordPress的可视化界面做的不大符合中国人的习惯,不适合中文写作,虽然WP的版本也升级了好几次,但是发现可视化界面一直没有什么大的改进。

用HTML来写博文,就免不了要用到HTML代码,虽然接触HTML也很长时间了,但是对于代码繁琐的规则及名目繁多的参数还是很头疼的,WP的HTML编辑工具条上有预制的代码工具,但是只是最常用的几个,没有的就需要自己敲了。其实完全可以在这个工具条上自定义代码按钮。

就拿本人写博文时最常用的一个代码为例吧。刚开始时,为了解决中文首行缩进两个字符的问题,我查阅了很多的资料,也修改过CSS样式表,但是不怎么好用,总是出现这样那样的错误。最终,我决定采用在P标签中加入text-indent:2em这个属性来解决。具体写法如下:

在写博文的时候文章中的每一段都要用上面的P标签括起来,如果每次都用键盘敲那是相当的费劲,即使是复制粘贴也费时间。最终,我将其添加在了HTML工具条上,每次写博文,只要点一下这个标签。就会将代码添加到文中,很方便。具体自定义方法如下:

(1)在WordPress的安装目录下依次找到:wp-includes/js/quicktags.js,将quicktags.js文件备份一个,以方便修改出错的时候进行恢复。

(2)用记事本打开quicktags.js,在其中找到如下的代码:

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

然后,在其后面输入如下的代码:

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

保存quicktags.js并关闭。回到WordPress的HTML编辑界面,刷新一下,可以看到在code按钮后面多了一个P按钮。利用同样的方法,我们可以在HTML编辑工具条上添加其它我们需要的按钮。

发表评论

电子邮件地址不会被公开。 必填项已用*标注