wordpress后台添加按钮并上传图片到自建图床

原本我的做法都是需要上传图片的时候，再打开图床网站登录，选择图片上传然后再复制地址到wordpress后台，不得不说这种做法已经俗气了，而且很浪费时间。

一波三折的过程：

之前说过我二次开发的那个用layui直接在后台上传图片的，今天想着把之前写好的代码直接搬到wordpress这里面来，花了十分钟，终于把所有代码都搬过来了，打开新建页面一看，哦豁~~~layui和后台冲突了，一个发布框变成两个了。我果断放弃，开始找js实现的上传图片的代码，拿过来改改就行了。

很幸运，一会儿就找到了，果断开始搬代码，开始很快，然后就是各种报错，因为我用js调用 wp.media.editor.insert 插入信息到后台的编辑框，之后就各种 Warning: Use of undefined constant – assumed 的问题，花了不少时间，改各种php环境，甚至我降级到php5.6，但是还是有问题，搞得我头大。。。

之后在我快放弃的时候，灵光一现，是不是我的写法有问题？因为我是直接照搬别人的代码的，之前就压根没考虑到写法错误的问题，之后把JavaScript 代码放到单独的文件里面，然后在页面引用就一点毛病没有了。。。之后又花了几分钟把服务器的php环境还原。。。

最后，来个成功效果图和完整的代码吧。

完整的实现代码：

先挂载一个钩子到wordpress后台，把一些html代码写进去：

// wordpress后台添加一个第三方上传按钮
add_action("media_buttons", "add_my_media_button");
function add_my_media_button() {
$currentUser = wp_get_current_user();
if(!empty($currentUser->roles) && in_array("administrator", $currentUser->roles)){
$DOMAIN="";
$APIkey="";// 是管理员
}
else{ return 0; }
echo '
<input id="up_to_chevereto" type="file" accept="image/*" multiple="multiple"/>
<label for="up_to_chevereto" id="up_img_label"><i class="fa fa-picture-o" aria-hidden="true"></i> 上传到图床</label>
<style type="text/css">
#up_to_chevereto {
  display: none;
}
#up_img_label {
  color: #fff;
  background-color: #16a085;
  border-radius: 5px;
  display: inline-block;
  padding: 5.2px;
}
</style>
<!--这个引用是因为此代码基于Jquery，wp后台没有引用这个文件-->
<script src="https://libs.baidu.com/jquery/2.0.0/jquery.min.js"></script>
<!--此引用则是重点，代码在下面-->
<script src="/wp-content/themes/mkBlog/ceshi.js"></script>
';
}

咱们最重要的代码就是下面的这个，一定要单独弄一个js文件引用进去，否则肯定会和我报一样的错误！

$("#up_to_chevereto").change(function() {
  window.wpActiveEditor = null;
  for (var i = 0; i < this.files.length; i++) {
    var f=this.files[i];
    var formData=new FormData();
    formData.append('file',f);
    formData.append('token_md5', 'AA81A1AD10605BEE19CA2B2212E5FCB3');
    var res;
    $.ajax({
        async:true,
        crossDomain:true,
        url:'https://pic.mxooo.cn/api/upload',
        type : 'POST',
        processData : false,
        contentType : false,
        data:formData,

        beforeSend: function (xhr) {
            $('#up_img_label').html('<i class="fa fa-spinner rotating" aria-hidden="true"></i> Uploading...');
        },
        success:function(res){
            wp.media.editor.insert('<a href='+res.data.url+'><img class="aligncenter" src='+res.data.url+'></img></a>');
            $("#up_img_label").html('<i class="fa fa-check" aria-hidden="true"></i> 上传成功，继续上传');
            
        },
        error: function (){
            $("#up_img_label").html('<i class="fa fa-times" aria-hidden="true"></i> 上传失败，重新上传');
        }
    });
  }
});

最后，说一下，我依旧是对接到我的第三方图床（lsky-pro图床）的，这个写法也是针对于我现在修改过的程序，如果原版的程序请注意这里面的写法（原版是headers请求头验证，我改成携带参数验证了。）