WordPress编辑器可视化添加自定义按钮

WordPress后台编辑器想要添加自定义按钮，原有的满足不了需求，为了快速插入广告代码或者其他标签就会用到自定义的按钮。只需在模板里面写好，在编辑器里面直接点击就可以插入。

方法：

第一步：找到当前主题下面的functions.php这个文件用代码编辑器打开在最后加下一段代码

//后台编辑器可视化添加按钮
add_filter( 'mce_external_plugins', 'add_plugin' );
add_filter( 'mce_buttons', 'register_button' );
function register_button( $buttons ) {
array_push( $buttons, "|", "daima1" ); //添加 一个daima1按钮
return ( $buttons);
}
function add_plugin( $plugin_array ) {
$plugin_array['daima1'] = get_bloginfo( 'template_url' ) . '/js/daima1.js'; //daima1按钮的js路径，新建对应的js空文本
return $plugin_array;
}
 

第二步：再在刚刚新建的js文本里面加入下代码；

(function(tinymce) {
tinymce.create('tinymce.plugins.daima1', { //注意这里有个 daima1
init : function(ed, url) {
ed.addButton('daima1', { //注意这一行有一个 daima1
title : '插入代码',
image : url+'/daima.png', //注意图片的路径 url是当前js的路径，图片25x25左右
onclick : function() {
ed.selection.setContent('<div>代码</div>'); //这里是你要插入到编辑器的内容，你可以直接写上广告代码
}
});
},
createControl : function(n, cm) {
return null;
},
});
tinymce.PluginManager.add('daima1', tinymce.plugins.daima1); //注意这里有2个 daima1
})(window.tinymce); // JavaScript Document

在进入后台刷新，记得清除浏览器的缓存，应为要加载js，如果以缓存过修改后刷新还是旧的js，只有清除后才会加载新的文件，不出意外的话，编辑器的可视化上面就会出现一个按钮