给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、短代码需要修改为你自己网站的代码。