外部サイトの画像URLから自前のサーバーにリサイズした画像キャッシュを作成するWordpressカスタマイズ方法

先日、外部サイトの、OGP情報を取得しキャッシュ化してみました。

外部サイトから取得したOGP情報は、大抵は文字列なので、そのままデータベースに保存してしまえば、後でいくらでも再利用できます。

<meta property="og:type" content="website">
<meta property="og:description" content="寝ながら出来るコトや使えるモノを紹介">
<meta property="og:title" content="寝ログ">
<meta property="og:url" content="http://nelog.jp">
<meta property="og:image" content="http://nelog.jp/wp-content/uploads/2016/03/12001060_1133315893363425_2026224785753303593_o.jpg">
<meta property="og:site_name" content="寝ログ">
<meta property="og:locale" content="ja_JP" />

ただ、OGPイメージ（og:image）は、URLの情報のみで、画像データが取得できるわけではありません。

<meta property="og:image" content="http://nelog.jp/wp-content/uploads/2016/03/12001060_1133315893363425_2026224785753303593_o.jpg">

1	<meta property="og:image" content="http://nelog.jp/wp-content/uploads/2016/03/12001060_1133315893363425_2026224785753303593_o.jpg">

画像データを取得せずとも、そのまま取得した相手方のog:imageのURLを、そのままIMGタグで呼び出して利用することもできるにはできます。けれど、これでは画像元（相手方）のサーバーに転送量関係の負荷をかけてしまいます。

そこで、og:imageに掲載されている画像URLから、一旦自前のサーバーにog:imageを取り込んで、それをサムネイルなどで扱いやすいリサイズした後、利用するということをやってみたいと思います。

外部サーバーから取得した画像をリサイズして保存する関数

とりあえず、外部サーバーから取得した画像を、自前のサーバーにキャッシュとして置いておく関数を作成したので掲載しておきます。

//リサイズした外部サイトの画像を取得する
function fetch_resize_Image($image_url, $w, $h, $crop){
    //WP_Filesystemの使用
    require_once(ABSPATH . 'wp-admin/includes/file.php');

  if ( WP_Filesystem() ) {//WP_Filesystemの初期化
    global $wp_filesystem;//$wp_filesystemオブジェクトの呼び出し
    //ファイル名のみの取得（一意の名前を取得する場合はその他の処理が必要）
    $filename = substr($image_url, (strrpos($image_url, '/'))+1);
    //画像編集作業用ディレクトリ（ここらへんは環境に合わせて変更）
    $dir = ABSPATH.'wp-content/uploads/test-temp/';
    //ディレクトリがないときには作成する
    if ( !file_exists($dir) ) {
      mkdir($dir, 0777, true);
    }

    //ローカル画像ファイルパス
    $new_file = $dir.$filename;

    //$wp_filesystemオブジェクトのメソッドとしてファイルを取得する
    $file_data = @$wp_filesystem->get_contents($image_url);
    //データが正常取得できた場合
    if ( $file_data ) {
        //指定したディレクトリに一旦保存する
      $wp_filesystem->put_contents($new_file, $file_data);
      //画像編集オブジェクトの作成
      $image_url_editor = wp_get_image_editor($new_file);
      //画像編集オブジェクトに画像が正常に読み込めた場合
      if ( !is_wp_error($image_url_editor) ) {
          //画像のリサイズ
        $image_url_editor->resize($w, $h, $crop);
        //編集した画像の保存
        $image_url_editor->save( $new_file );
      }
      return $image_url;
    }
  }
}

//リサイズした外部サイトの画像を取得する

function fetch_resize_Image($image_url, $w, $h, $crop){

//WP_Filesystemの使用

require_once(ABSPATH . 'wp-admin/includes/file.php');

if ( WP_Filesystem() ) {//WP_Filesystemの初期化

global $wp_filesystem;//$wp_filesystemオブジェクトの呼び出し

//ファイル名のみの取得（一意の名前を取得する場合はその他の処理が必要）

$filename = substr($image_url, (strrpos($image_url, '/'))+1);

//画像編集作業用ディレクトリ（ここらへんは環境に合わせて変更）

$dir = ABSPATH.'wp-content/uploads/test-temp/';

//ディレクトリがないときには作成する

if ( !file_exists($dir) ) {

mkdir($dir, 0777, true);

}

//ローカル画像ファイルパス

$new_file = $dir.$filename;

//$wp_filesystemオブジェクトのメソッドとしてファイルを取得する

$file_data = @$wp_filesystem->get_contents($image_url);

//データが正常取得できた場合

if ( $file_data ) {

//指定したディレクトリに一旦保存する

$wp_filesystem->put_contents($new_file, $file_data);

//画像編集オブジェクトの作成

$image_url_editor = wp_get_image_editor($new_file);

//画像編集オブジェクトに画像が正常に読み込めた場合

if ( !is_wp_error($image_url_editor) ) {

//画像のリサイズ

$image_url_editor->resize($w, $h, $crop);

//編集した画像の保存

$image_url_editor->save( $new_file );

}

return $image_url;

}

それぞれの、引数には、以下のような値を指定します。

$image_url：取得したい画像のURL
$w：リサイズ後の画像の幅]
$h：リサイズ後の画像の高さ
$crop：指定した画像サイズで切り取る

戻り値は以下になります。

画像がうまく取得できてリサイズできたとき：画像のURL
画像取得やリサイズに失敗したとき：NULL

関数内の保存用ディレクトリや、保存した画像のファイル名は、使用する環境によって多少アレンジを加える必要はあると思います。

関数を使用してみる

例えば、以下の画像を外部サイトから取得して100×100pxの切り抜き形式で、リサイズするとします。

そうする時は、先程の関数を以下のように使用します。

$image_url = fetch_resize_image('http://wp-simplicity.com/wp-content/uploads/2014/07/OH53_ipponnoki500.jpg', 100, 100, true);
if ( $image_url ) {
    echo '<img src="'.$image_url.'">';
}