一般我们用pre标签在WP来显示代码,但是如果每次都要手动输入pre标签又很麻烦,所以本文教你如何在文章编辑器添加<pre>自定义标签按钮。
复制以下代码到functions.php文件,位置加到文件最后一行在PHP的结束句符号?>之前就行,然后保存。
1 2 3 4 5 6 7 8 9 10 |
// catmee.com 添加HTML编辑器自定义标签按钮 add_action('admin_print_footer_scripts','eg_quicktags'); function eg_quicktags() { ?> <script type="text/javascript" charset="utf-8"> QTags.addButton( 'eg_pre', 'pre', '<pre>代码代码代码\n</pre>', '', 'q' ); </script> <?php } // 添加HTML编辑器自定义标签按钮结束 |
- 关于QTags.addButton参数的说明:QTags.addButton(按钮的ID, 要显示的按钮名称, 第一次点击按钮显示的内容, 第二次点击按钮显示的内容, 按钮的快捷调用名称)
写文章时需要用到pre标签时就切换到Text模式,然后点下标签按钮添加完整的pre标签,切换到Visual模式用你想显示的代码替换“代码代码代码”这几个字就好了。
(至于我为什么要留这几个字,是因为如果你直接在Text模式下替换代码可能会被系统当做执行代码运行了,所以就可能显示不出来你想显示的代码。留几个字在切换到Visual模式后就可以轻易找到并替换了。)
同样的方法你还可以加入更多的自定义标签按钮。比如我在用prettyprint代码高亮,所以可以写成:
1 |
QTags.addButton( 'eg_pre', 'pre', '<pre class="prettyprint linenums">代码代码代码\n</pre>', '', 'q' ); |
(关于免插件代码高亮参见《简单3步实现WordPress免插件代码高亮 | google-code-prettify代码高亮使用方法》)
参考文献:Quicktags API
使用的还是原生态的编辑器。
要是能够和自带的按钮一样按一下 pre 再按一下 /pre就更好了。