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