wordpress html模式,WordPress编辑器HTML模式界面中添加

将近半个月没有更新博客了，熟悉的朋友们可能都已经等得花儿谢了。这段时间重新为乌徒帮制作了主题，改头换面，现在重新开始更新。本文将实现为wordpress编辑器的HTML模式界面添加新的功能按钮。

我们可以在网络上轻易的找到丰富wordpress后台编辑器的相关文章，然而要对HTML编辑模式下的快捷按钮进行补充却并非易事，通过谷歌搜索，没有找到能解决这一问题的资料，不过一些文章中已经完成了对早期wordpress这一功能的实现，顺藤摸瓜之下，否子戈也实现了wordpress3.4之后的WordPress编辑器HTML模式界面中添加按钮，本文以添加

为例讲解这一功能的实现。

产生要增加

快捷按钮的原因是想增加后台写代码的功能。经常使用wordpress的朋友会发现，wordpress默认的编辑器不会保留我们在本地文本中输入的\tab和空格，这些信息会被过滤掉，我之前一直使用b-quote按钮来把代码放在一个小区域内，但是代码会全部左对齐，让读者很难阅读，因此需要用

将这些代码预格式化包装起来，保留代码的换行缩进，这样就可以让读者按照我们对代码的阅读习惯阅读代码了。不过这种缩进也只有在HTML编辑模式下使用，可视化模式下这些缩进会被丢弃。

经过搜索，找到了两篇关于在wordpress编辑器HTML界面下增加按钮的方法的文章，然而经过测试均告失败。这些文章中提到，修改/wp-includes/js/quicktags.js文件，在edButtons[edButtons.length]=new edButton后面添加与之类似的条目。由于wordpress本身的升级，这些老的文章中的方法已经不可用，因为quicktags.js已经发生了变化。不过这也是一条线索，让我明白了：1、wordpress编辑器HTML模式下的这些按钮只能通过修改于quicktags.js相关的脚本来实现，而不能像可视化模式下的按钮一样通过php增加挂钩代码；2、要实现添加<pre>按钮，必须了解quicktags.js及按钮的实现。

虽然quicktags.js经过升级发生了变化，但一些重要的单词没有变，通过对那些老文章的阅读，我很快在quicktags.js最后部分找到了相应的代码：

edButtons[10]=new c.TagButton("strong","b","","","b");edButtons[20]=new c.TagButton("em","i","","","i"),edButtons[30]=new c.LinkButton(),edButtons[40]=new c.TagButton("block","b-quote","\n\n

","

\n\n","q"),edButtons[50]=new c.TagButton("del","del",' ',"","d"),edButtons[60]=new c.TagButton("ins","ins",' ',"","s"),edButtons[70]=new c.ImgButton(),edButtons[80]=new c.TagButton("ul","ul","

• \n","

\n\n","u"),edButtons[90]=new c.TagButton("ol","ol","

1. \n","

\n\n","o"),edButtons[100]=new c.TagButton("li","li","\t","\n","l"),edButtons[110]=new c.TagButton("code","code"," ","","c"),edButtons[120]=new c.TagButton("more","more","","","t"),edButtons[130]=new c.SpellButton(),edButtons[140]=new c.CloseButton()

由于quicktags.js经过压缩，因此这些代码是粘在一块儿的。认真阅读不难发现，一个按钮的基本语句是：

edButtons[10]=new c.TagButton("strong","b","","","b");

edButtons的索引下标决定了这个按钮的位置。 TagButton第一个参数是代表的意思，应该是注册这个button的ID之类，第二个参数是在编辑器中的按钮上显示什么文章，第三个参数是点击这个按钮第一次打印的内容(开标签)，第四个参数是再次点击按钮时打印的内容(闭标签)，最后一个参数不明，应该也是一个标识。当第四个参数为空时，没有标签的开闭效果，如wordpress自身的就是这样的。

那么我们的

标签应该怎么实现呢？

edButtons[121]=new c.TagButton("pre","pre","

","

","p"),

看上去很简单吧，至于把它放在什么地方，我想你应该可以猜得到，黏贴在edButtons[120]=new c.TagButton("more","more",";","","t"),之后就好了。

好啦，大功告成！等等，就这么完了？等到下次wordpress再升级的时候，被覆盖了怎么办？好吧，再想想办法，把它融合到主题里或做一个插件吧。做插件？算了吧，还是做到主题中。又是一番对wordpress内部机理的思考。能不能直接把上面这一小段实现的代码放在主题中，用一个钩子把它勾进wordpress进程中去呢？我想到了直接在网页源码中增加一条script语句，于是做了如下尝试：

/**

* 作者：否子戈

* 作者主页：http://www.utubon.com

**/

// 下面的代码可以增加HTML模式下的按钮

if(is_admin() && end(explode('/',$_SERVER['PHP_SELF'])) == 'post.php'):

function add_html_shortcode(){

?>

edButtons[121]=new QTags.TagButton('pre','pre','

','

','p');

edButtons[122]=new QTags.TagButton('h3','h3','

','

','h');

edButtons[60]=new QTags.TagButton('hr','hr',"\n\n

---

\n\n",'','hr');

edButtons[124]=new QTags.TagButton('tab','TAB',"\t",'','tab');

edButtons[125]=new QTags.TagButton('ad','Adsense','[adsense]','','ad');

}

add_action('admin_print_footer_scripts','add_html_shortcode');

endif;

将上面这段代码放在functions.php的最后，即可实现在后台编辑器HTML模式下增加一个pre按钮。

不过经测试，即使pre按钮功能已经实现，然而我所希望的插入代码的功能仍然没有实现，因为wordpress编辑器仍然会过滤代码，例如我要插入一段javascript代码，如果带上了