抢注百度搜索高排名流量域名、品牌商标保护、微信绿标安全域名、备案精品短域名,上铭正知产!

WordPress – 编辑器添加按钮 用API上传到Chevereto图床

[复制链接]
老黑酱 发表于 2023-1-14 08:39:49 | 显示全部楼层 |阅读模式
前段时间搭建了 Chevereto 图床,但在 WordPress 编辑器里需要上传图片的时候,需要另外打开图床上传比较麻烦。这时候可以在 WordPress 的编辑器里添加个上传按钮,利用 API 上传到 Chevereto 图床,这样上传图片到图床就方便啦!

添加方法修改 Chevereto
获取 API KEY: 登录,转到仪表盘-设置-API,将 API v1 key 记录下来;
API 后端设置: 进入 Chevereto 的安装目录,将 app/routes/route.api.php 文件拷贝到 app/routes/overrides/route.api.php 文件;
允许跨域: 打开 app/routes/overrides/route.api.php,添加
  1. header('Access-Control-Allow-Origin: [url]https://www.yunloc.com[/url]');
  2. header('Access-Control-Allow-Methods: POST');
  3. header('Access-Control-Allow-Headers: Content-Type, Accept, Authorization, X-Requested-With, Origin, Accept');
复制代码
记得把白名单 https://www.yunloc.com 改成自己的域名或者改成* (所有域名可用);
设置 API user(可选): 在 app/routes/overrides/route.api.php 中,找到$uploaded_id = CHVImage::uploadToWebsite($source);那一行,更改为
  1. $uploaded_id = CHVImage::uploadToWebsite($source,admin);
复制代码
将 admin 替换为图床中的用户;
修改 WordPress
前端添加上传按钮(media button): 将以下代码添加到 WordPress 正在使用的主题目录的 functions.php 中
  1. //添加图床上传按钮
  2. add_action('media_buttons', 'add_my_media_button');
  3. function add_my_media_button() {
  4.     $currentUser = wp_get_current_user();
  5.         if(!empty($currentUser->roles) && in_array('administrator', $currentUser->roles)){
  6.             $DOMAIN="图床的域名 例:img.7198.net";
  7.             $APIkey="图床的 API v1 key";// 是管理员
  8.         }
  9.         else
  10.             return 0;  // 非管理员
  11.     echo '
  12.             
  13.              上传图片到 Chevereto
  14.           ';
  15. ?>


  16. }
复制代码
更新
上传有问题,主要是 https 混用和 CORS 的问题,故在这里更新上传方法,上传方式改用 WordPress REST API,为了保证兼容,请确保 WordPress 版本为 4.9+。注意:前文的操作均不用管,以下的操作均在 functions.php 中完成。
注册路由
  1. add_action('rest_api_init', function () {
  2.     register_rest_route('chevereto/v1', '/image/upload', array(
  3.         'methods' => 'POST',
  4.         'callback' => 'upload_to_chevereto',
  5.     ));
  6. });
复制代码
之后,可以使用 post 的方式发送数据到 http(s)://博客域名/chevereto/v1/image/upload 来上传图片。
加入回调函数
  1. function upload_to_chevereto() {
  2.     //Authentication
  3.     if (!check_ajax_referer('wp_rest', '_wpnonce', false)) {
  4.         $output = array('status' => 403,
  5.             'message' => 'Unauthorized client.',
  6.             'link' => $link,
  7.         );
  8.         $result = new WP_REST_Response($output, 403);
  9.         $result->set_headers(array('Content-Type' => 'application/json'));
  10.         return $result;
  11.     }
  12.     $image = file_get_contents($_FILES["chevereto_img_file"]["tmp_name"]);
  13.     $upload_url = '图床的域名/api/1/upload';
  14.     $args = array(
  15.         'body' => array(
  16.             'source' => base64_encode($image),
  17.             'key' => '图床的 API v1 key',
  18.         ),
  19.     );

  20.     $response = wp_remote_post($upload_url, $args);
  21.     $reply = json_decode($response["body"]);

  22.     if ($reply->status_txt == 'OK' && $reply->status_code == 200) {
  23.         $status = 200;
  24.         $message = "success";
  25.         $link = $reply->image->image->url;
  26.     } else {
  27.         $status = $reply->status_code;
  28.         $message = $reply->error->message;
  29.         $link = $link;
  30.     }
  31.     $output = array(
  32.         'status' => $status,
  33.         'message' => $message,
  34.         'link' => $link,
  35.     );
  36.     $result = new WP_REST_Response($output, $status);
  37.     $result->set_headers(array('Content-Type' => 'application/json'));
  38.     return $result;
  39. }
复制代码
将图床的域名和图床的 API v1 key 填写完整,注意加上 http 或 https
后台编辑器添加按钮
  1. //添加图床上传按钮
  2. add_action('media_buttons', 'add_my_media_button');
  3. function add_my_media_button() {
  4.     echo '
  5.             
  6.              上传图片到 Chevereto
  7.           ';
  8. ?>


  9. }
复制代码
原文链接:https://spiritx.xyz/843.html

本帖子中包含更多资源

您需要 登录 才可以下载或查看,没有账号?加入我们

x
回复

使用道具 举报

您需要登录后才可以回帖 登录 | 加入我们

本版积分规则 返回列表 发新帖

备案权重域名预定

觉得文章有用就打赏一下文章作者

支付宝扫一扫打赏

微信扫一扫打赏

快速回复 返回顶部 返回列表