纯代码给WordPress编辑器可视化模式添加自定义按钮

我们平时在给网站编辑文章时，有时候需要添加一些短代码来展示特定的内容，因为短代码多了也麻烦，所以我们又想办法添加了wordpress编辑器按钮。前面的文章中我们分享过给wordpress编辑器添加按钮的方法，不过这个办法添加的是文本按钮，经常需要切换编辑器模式。今天我们学习一个更简单的办法，直接给WordPress编辑器可视化模式添加自定义的下拉按钮：

方法一：

// 编辑器添加下拉式按钮
function wzt_select(){
echo '
<select id="short_code_select">
  <option value="请选择一个短代码！！！">插入短代码</option>
  <option value="【ad_bt】">宝塔面板</option>
  <option value="【collapse title=\'内容文字\'】【/collapse】">展开/收缩按钮</option>
</select>';
}
if (current_user_can('edit_posts') && current_user_can('edit_pages')) {
  add_action('media_buttons', 'wzt_select', 11);
}

function wzt_button() {
echo '<script type="text/javascript">
  jQuery(document).ready(function(){
    jQuery("#short_code_select").change(function(){
      send_to_editor(jQuery("#short_code_select :selected").val());
      return false;
    });
  });
</script>';
}
add_action('admin_head', 'wzt_button');

原代码来源https://www.cnwper.com/wpshorts-codes.html，我在实际使用时做了适合自己的修改，你们在是使用时同样需要修改，毕竟每个网站设置的短代码都是不同的，所以要根据自己的主题短代码设置。

WordPress编辑器按钮效果：

1、实际使用时把代码中的【】替换为[]，这样我们就添加了一个wordpress编辑器按钮的下拉式选项框，比原来的文本按钮要更加方便了。

2、短代码需要修改为你自己网站的代码。

方法二：

1、functions.php添加：

//选项卡按钮 chukuangren.com
add_filter( 'mce_external_plugins', 'add_plugin' ); 
add_filter( 'mce_buttons', 'register_button' ); 
function register_button( $buttons ) { 
array_push( $buttons, "|", "tab" ); //添加 一个tab按钮 
return $buttons; 
} 
function add_plugin( $plugin_array ) { 
$plugin_array['tab'] = get_bloginfo( 'template_url' ) . '/js/tab.js'; //tab按钮的js路径 
return $plugin_array; 
}

2、创建/js/tab.js文件：

//选项卡按钮 www.chukuangren.com
(function(tinymce) {
tinymce.create('tinymce.plugins.tab', { //注意这里有个 tab
init : function(ed, url) {
ed.addButton('tab', { //注意这一行有一个 tab
title : '选项卡',
image : url+'/64.png', //注意图片的路径 url是当前js的路径
onclick : function() {
ed.selection.setContent('【tab:选项卡1]内容1【tab:选项卡2]内容2【tab:选项卡3]内容3【tab:END]'); //这里是你要插入到编辑器的内容，你可以直接写上广告代码
}
});
},
createControl : function(n, cm) {
return null;
},
});
tinymce.PluginManager.add('tab', tinymce.plugins.tab); //注意这里有两个 tab
})(window.tinymce); // JavaScript Document

PS：注意，在实际创建文件时，需要把代码中的“【”替换成“[”。

以上两种方法都可以给wordpress编辑器添加可视化按钮。