【Wordpress】TinyMCEテンプレートでS3の画像を使う

投稿日：

Wordpress

環境

  • Wordpress 4.8.3
  • TinyMCEテンプレート 4.8.1
  • WP Offload Media Lite 2.0

事象

WP Offload Media Liteを使ってWordpressの画像を全てS3にて管理している場合、 TinyMCE テンプレートにて作成したテンプレート内に画像をアップして登録しても 記事編集にてテンプレートを呼び出すと画像が見れなくなってしまいます。
※WEBサーバー上の画像は削除する設定とします

原因

WP Offload Media Liteでは画像ファイル全てについて『S3上のパス』と『ローカルにあった場合のパス』の両方を紐づけて持っています。
そして、WP Offload Media Liteは以下のようにデータ内画像パスを置換します。

データ登録時

POSTデータ内の画像パスに『S3上のパス』が存在していた場合は『ローカルにあった場合のパス』に置換してDBに登録する。
(S3→ローカル置換)

データ呼出時

DBから呼出したデータ内の画像パスに『ローカルにあった場合のパス』が存在していた場合は『S3上のパス』に置換して画面に表示する。
(ローカル→S3置換)

しかし、TinyMCE テンプレートに関してはテンプレート登録時の「S3→ローカル置換」は走るのですが、 テンプレート呼出し時の「ローカル→S3置換」は走りません。

よってテンプレート呼出し時は画像パスが『ローカルにあった場合のパス』のままとなり、 ローカルにそんな画像はないので画像が表示されません。

対応

function.phpにデータ登録時のフィルターを追加し、 TinyMCE テンプレートの登録時に「ローカル→S3置換」も走るようにします。

つまり、少々無駄ですがTinyMCE テンプレートの登録時は「S3→ローカル→S3置換」が走るようになります。

function replace_s3_image_on_tinymcetemplates($content){
  if ($content['post_type'] !== 'tinymcetemplates' || !class_exists('Amazon_S3_And_CloudFront') || !class_exists('AS3CF_Local_To_S3')) {
    return $content;
  }

  $s3PluginPath = str_replace('themes/'.get_template(), 'plugins/amazon-s3-and-cloudfront/wordpress-s3.php', __DIR__);
  $as3cf = new Amazon_S3_And_CloudFront($s3PluginPath);
  $localToS3 = new AS3CF_Local_To_S3($as3cf);
  $content['post_content'] = $localToS3->filter_post($content['post_content']);
  
  return $content;
}
add_filter('wp_insert_post_data','replace_s3_image_on_tinymcetemplates');

結構力づくなので、もっと良い方法があれば誰か教えてください。