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

技术论点 Loading... 阅读 0

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

一波三折的过程:

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

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

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

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

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

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

完整的实现代码:

先挂载一个钩子到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请求头验证,我改成携带参数验证了。

Tags:

版权声明:若无特殊注明,本文皆为《长行客》原创,转载务必保留文章来源。

本文链接:wordpress后台添加按钮并上传图片到自建图床 & https://www.mxooo.cn/1100/

推荐阅读
发表评论 取消回复
表情 图片 链接 代码

分享