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

前段时间搭建了 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. 
    
17. 
    
18. }

复制代码

更新

上传有问题，主要是 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. 
    
21.     $response = wp_remote_post($upload_url, $args);
    
22.     $reply = json_decode($response["body"]);
    
23. 
    
24.     if ($reply->status_txt == 'OK' && $reply->status_code == 200) {
    
25.         $status = 200;
    
26.         $message = "success";
    
27.         $link = $reply->image->image->url;
    
28.     } else {
    
29.         $status = $reply->status_code;
    
30.         $message = $reply->error->message;
    
31.         $link = $link;
    
32.     }
    
33.     $output = array(
    
34.         'status' => $status,
    
35.         'message' => $message,
    
36.         'link' => $link,
    
37.     );
    
38.     $result = new WP_REST_Response($output, $status);
    
39.     $result->set_headers(array('Content-Type' => 'application/json'));
    
40.     return $result;
    
41. }

复制代码

将图床的域名和图床的 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. 
   
10. 
    
11. }

复制代码

原文链接：https://spiritx.xyz/843.html