为WordPress 后台编辑器文本模式（HTML模式）添加按钮

今天为各位带来在WordPress 后台编辑器文本模式（HTML模式）添加自定义按钮的方法，这个的话如果使用S-shortcodes 短代码插件的可能有接触，因为在最新版已经集成了。文本模式（HTML模式）添加按钮是为了更加方便地进行写作，特别是像Jeff 这种习惯在文本模式（HTML模式）下写文章的博主。之前分享过的一篇文章《WordPress自带TinyMCE编辑器相关功能增强》也大致有介绍，今天在这里则更加细致说明方法并给出多个实例。

为WordPress 后台编辑器文本模式（HTML模式）添加按钮教程

方法很简单，依样画葫芦即可。在主题的functions.php 文件下加入以下代码：

add_action('admin_print_scripts', 'my_quicktags'); function my_quicktags() { wp_enqueue_script( 'my_quicktags', get_stylesheet_directory_uri().'/my_quicktags.js', array('quicktags') ); }

然后创建一个my_quicktags.js文件，按钮便是在这里自定义的，先给出个定义< h1 >标签的例子：

QTags.addButton( 'h1', 'h1', "n<h1>", "</h1>n" ); //快捷输入h1标签 //QTags.addButton( 'my_id', 'my button', 'n', 'n' ); //这儿共有四对引号，分别是按钮的ID、显示名、点一下输入内容、再点一下关闭内容（此为空则一次输入全部内容），n表示换行。

S-shortcodes 短代码插件的代码如下：

QTags.addButton( 'alert', 'alert', "n[box style="alert"]n红色警示n", "[/box]n" ); QTags.addButton( 'warning', 'warning', "n[box style="warning"]n黄色提醒n", "[/box]n" ); QTags.addButton( 'download', 'download', "n[box style="download"]n蓝色下载n", "[/box]n" ); QTags.addButton( 'info', 'info', "n[box style="info"]n灰色公告n", "[/box]n" ); QTags.addButton( 'tip', 'tip', "n[box style="tip"]n绿色提示n", "[/box]n" );

后台效果：

Jeff使用的插件没有提供相关按钮，因此针对四种常用的语言，我在my_quicktags.js 是这么写的（直接上图，写代码会被执行）：

关于为什么要"css" 的问题，如果你学过C 语言或C++ 等类似的语言，你就知道是这么回事啦~