北极寒流 » 网络资源 » wordpress后台编辑器添加自定义按钮技巧 - 2012.02.20

wordpress后台编辑器添加自定义按钮技巧

wordpress后台编辑器如何添加自定义按钮?细心的朋友应该早已发现,自从升级到wp 3.3以后,wordpress后台编辑器就不能按以前的方法来添加按钮了,而个人正在使用的一款easy2hide插件也是由于wp升级,导致后台用来添加代码的按钮失效,网上找来一份最新的适用于wordpress 3.3的为编辑器添加自定义按钮的资料,备忘之...

WP 3.3起,quicktags引入了新的API,添加按钮更加方便了,用法:

QTags.addButton( 'my_id', 'my button', '<span>', '</span>' );

为wordpress后台编辑器添加自定义按钮具体方法

首先创建一个 my-quicktags.js,丢入以下内容:

QTags.addButton( '<', '<', '&lt;', '' ); //快捷输入<的html代码
QTags.addButton( '>', '>', '&gt;', '' );
QTags.addButton( 'hr', 'hr', "\n<hr />\n", '' );  //快捷输入一个hr横线,点一下即可
QTags.addButton( 'h1', 'h1', "\n<h1>", "</h1>\n" );  //快捷输入h1标签
QTags.addButton( 'h2', 'h2', "\n<h2>", "</h2>\n" );
QTags.addButton( 'h3', 'h3', "\n<h3>", "</h3>\n" );
//QTags.addButton( 'my_id', 'my button', '\n</span>', '</span>\n' ); 
//这儿共有四对引号,分别是按钮的ID、显示名、点一下输入内容、再点一下关闭内容(此为空则一次输入全部内容),\n表示换行.
然后把此js丢入主题文件夹,再在主题 functions.php 中加入代码:

// 自定义HTML编辑器按钮
add_action('admin_print_scripts', 'my_quicktags');
function my_quicktags() {
    wp_enqueue_script(
        'my_quicktags',
        get_stylesheet_directory_uri().'/my-quicktags.js',
        array('quicktags')
    );
}

这样就ok了,最后附上一份我添加的一些经常要用到的按钮:

QTags.addButton( 'pre', 'pre', "<pre>\n", "\n</pre>" );
QTags.addButton( 'pre_smooth', 'pre.sm', "<pre class='smooth'>\n", "\n</pre>" );
QTags.addButton( '<', '<', '&lt;', '' );
QTags.addButton( '>', '>', '&gt;', '' );
QTags.addButton( 'hr', 'hr', "\n<hr />\n", '' );
QTags.addButton( 'h1', 'h1', "\n<h1>", "</h1>\n" );
QTags.addButton( 'h2', 'h2', "\n<h2>", "</h2>\n" );
QTags.addButton( 'h3', 'h3', "\n<h3>", "</h3>\n" );

20

wordpress后台编辑器添加自定义按钮技巧

分享到:

最受欢迎的