#教程# WordPress – 编辑器添加按钮 用API上传到QQ乐图床

WordPress 编辑器里需要上传图片的时候,需要另外打开图床上传比较麻烦。这时候可以在 WordPress 的编辑器里添加个上传按钮,利用 API 上传到 QQ乐图床,这样上传图片到图床就方便啦!

  • WordPress

QQ截图20201104122720222

前端添加上传按钮(media button): 将以下代码添加到WordPress正在使用的主题目录的 functions.php 中

 

 

  1. add_action(‘media_buttons’, ‘add_my_media_button’);
  2. function add_my_media_button() {
  3. $currentUser = wp_get_current_user();
  4. if(!empty($currentUser->roles) && in_array(‘administrator’, $currentUser->roles)){
  5. $DOMAIN=“图床的域名”;
  6. $APIkey=“图床的API v1 key联系QQ2879367103”;// 本API是访客的 上传的图片都是访客的如需新的对接文件联系我
  7. }
  8. else
  9. return 0; // 非管理员
  10. echo
  11. <input id=”up_to_chevereto” type=”file” accept=”image/*” multiple=”multiple”/>
  12. <label for=”up_to_chevereto” id=”up_img_label”><i class=”fa fa-picture-o” aria-hidden=”true”></i> 上传图片到QQ乐图床</label>
  13. ;
  14. ?>
  15. <style type=“text/css”>
  16. #up_to_chevereto {
  17. display: none;
  18. }
  19. #up_img_label {
  20. color: #fff;
  21. backgroundcolor: #16a085;
  22. borderradius: 5px;
  23. display: inlineblock;
  24. padding: 5.2px;
  25. }
  26. </style>
  27. <script type=“text/javascript”>
  28. jQuery(‘#up_to_chevereto’).change(function() {
  29. window.wpActiveEditor = null;
  30. for (var i = 0; i < this.files.length; i++) {
  31. var f=this.files[i];
  32. var formData=new FormData();
  33. formData.append(‘source’,f);
  34. jQuery.ajax({
  35. async:true,
  36. crossDomain:true,
  37. url:‘https://<?php echo $DOMAIN; ?>/api/1/upload/?key=<?php echo $APIkey; ?>&format=json’,
  38. type : ‘POST’,
  39. processData : false,
  40. contentType : false,
  41. data:formData,
  42. beforeSend: function (xhr) {
  43. jQuery(‘#up_img_label’).html(‘<i class=”fa fa-spinner rotating” aria-hidden=”true”></i> Uploading…’);
  44. },
  45. success:function(res){
  46. wp.media.editor.insert(‘<a href=”‘+res.image.url+‘”><img src=”‘+res.image.url+‘” alt=”‘+res.image.title+‘”></img></a>’);
  47. jQuery(“#up_img_label”).html(‘<i class=”fa fa-check” aria-hidden=”true”></i> 上传成功,继续上传’);
  48. },
  49. error: function (){
  50. jQuery(“#up_img_label”).html(‘<i class=”fa fa-times” aria-hidden=”true”></i> 上传失败,重新上传’);
  51. }
  52. });
  53. }
  54. });
  55. </script>
  56. <?php
  57. }

分享到: 生成海报

热门文章

评论 抢沙发

  • QQ号
  • 昵称 (必填)
  • 邮箱 (必填)
  • 网址

随缘吧Api-一个神奇且牛逼的API网站。

打开网站网站托管
切换注册

登录

点击按钮进行验证

忘记密码 ?

您也可以使用第三方帐号快捷登录

切换登录

注册

我们将发送一封验证邮件至你的邮箱, 请正确填写以完成账号注册和激活