wordpress主题制作：怎样给默认编辑器添加自定义按钮？

扫描下面的二维码，“关注”我的百家号。

前面我们介绍过怎样给wordpress添加短代码，怎要在文章内容中添加广告短代码，但是需要在发表文章时在文章内容中添加类似【baidu1】这样的短代码，这样，每次我们都要输入这样的字符，有点麻烦。有没有一种方法，只需点击一下编辑器上的一个按钮就可以添加这个短代码到文章中呢？答案是肯定的。下面我们就来看一下，怎样给wordpress默认编辑器添加这个短代码自定义按钮吧，效果如下图：

在上图中，我们可以看到，我们给wordpress文章编辑器添加了2个百度广告按钮，我们只需要发表文章时，在需要显示广告的地方点击一下这个百度按钮，就会在那里添加短代码 ，而不需要再像以前一样要一个一个地输入字符了。这种效果只需2部就可以实现。

1、将下面的代码放到主题的functions.php文件中：

function baidu_button() {
//判断用户是否有编辑文章和页面的权限
if ( ! current_user_can('edit_posts') && ! current_user_can('edit_pages') ) {
return;
}  //判断用户是否使用可视化编辑器
if ( get_user_option('rich_editing') == 'true' ) {

add_filter( 'mce_external_plugins', 'add_plugin' );
add_filter( 'mce_buttons', 'register_button' );
}
}
add_action('init', 'baidu_button');

function register_button( $buttons ) {
array_push( $buttons, "|", "baidu1" ); //添加 一个baidu1 按钮
array_push( $buttons, "|", "baidu2" ); //添加 一个baidu2 按钮

return $buttons;
}
function add_plugin( $plugin_array ) {

//baidu2按钮的js路径
$plugin_array['baidu1'] = get_bloginfo( 'template_url' ) . '/js/baidu1.js';

//baidu2按钮的js路径
$plugin_array['baidu2'] = get_bloginfo( 'template_url' ) . '/js/baidu2.js';

return $plugin_array;
}

上面的代码，我们添加了2个百度按钮。效果如上图。

2、在主题文件夹的js文件夹里添加baidu1.js和baidu2.js2个JS文件，在这2个js文件中分别添加如下代码：

baidu1.js文件

/*
给wordpress编辑器添加自定义按钮
*/

(function() {
tinymce.create('tinymce.plugins.baidu1', { //注意这里有个baidu1
init : function(ed, url) {
ed.addButton('baidu1', { //注意这一行有一个baidu1
title : '百度广告-1',
image : url+'/baidu.jpg', //注意图片的路径 url是当前js的路径
onclick : function() {
ed.selection.setContent('【baidu1】');

}
});
},
createControl : function(n, cm) {
return null;
},
});
tinymce.PluginManager.add('baidu1', tinymce.plugins.baidu1);
})();

[baidu2]

baidu2.js文件

/*
给wordpress编辑器添加自定义按钮
*/

(function() {
tinymce.create('tinymce.plugins.baidu2', { //注意这里有个baidu1
init : function(ed, url) {
ed.addButton('baidu2', { //注意这一行有一个baidu1
title : '百度广告-2',
image : url+'/baidu.jpg', //注意图片的路径 url是当前js的路径
onclick : function() {
ed.selection.setContent('【baidu2】');

}
});
},
createControl : function(n, cm) {
return null;
},
});
tinymce.PluginManager.add('baidu2', tinymce.plugins.baidu2);
})();

然后在这个js文件夹里添加一个百度图标，图片名称为baidu.jpg ，这样就可以了。

注：需要把js代码中的【baidu】各【baidu2】这2个中文中括号修改成英文的中括号。否则会出错哦。

这里没有添加百度广告代码，这个在前面的章节中已经介绍过如何添加，所以这里就不多说了。

如何给wordpress编辑器添加自定义按钮，你是不是弄明白了呢？就是这么简单哦。我这里是添加百度广告按钮，你也可以添加其它任何你想要添加的按钮。