Wordpress 加入“；上传至Imgur“；按钮到前端库缩略图

我在Wordpress中有多个图库和相册，每天都有新的图片更新。在前端，我想在每个缩略图下都有一个按钮或链接，它会将完整大小的图像发送给Imgur，这样用户就可以使用Imgurs图像编辑选项

我有一个将图像从硬盘拖放到Imgur的工作代码，如下所示

我应该如何修改这段代码，使它能按描述的那样工作，以及如何和哪些WP文件也应该被编辑

我不介意使用其他插件来实现这一点

window.ondragover=函数（e）{
e、 预防默认值（）
}
window.ondrop=函数（e）{
e、 预防默认值（）；
上传（如dataTransfer.files[0]）；
}
功能上传（文件）{
如果（！file | |！file.type.match（/image.*/）返回；
document.body.className=“上传”；
var fd=新FormData（）；
追加（“图像”，文件）；
var xhr=new XMLHttpRequest（）；
xhr.open（“POST”https://api.imgur.com/3/image.json");
xhr.onload=函数（）{
document.querySelector（“#link”）.href=JSON.parse（xhr.responseText.data.link；
document.body.className=“上传”；
}
setRequestHeader（'Authorization'，'Client ID'）；
xhr.send（fd）；
}

正文{
文本对齐：居中；
填充顶部：100px；
}
div{
边框：10px纯黑；
文本对齐：居中；
线高：100px；
宽度：200px；
保证金：自动；
字体大小：40px；
显示：内联块；
}
#链接，
P
div{
显示：无
}
div{
显示：内联块；
}
.上载分区{
显示：无
}
.上载分区{
显示：无
}
.p.上传{
显示：内联
}
.上传#链接{
显示：内联
}
em{
位置：绝对位置；
底部：0；
右：0
}

放下！
或者点击
上传

它是在线的