WordPressテーマCocoonでAPMページの画像サイズが300x300になるのを回避する方法

つい最近、このサイトを AMP（Accelerated Mobile Pages）に対応するため、WordPress のテーマを Cocoon（コクーン）というテーマに変更しました。このテーマはボタンひとつで AMP対応ができてしまうすぐれものなのですが、記事の画像ファイルを WordPress標準のURLでなく相対パスで指定していたために、APMページで画像サイズが 300 x 300px になってしまう問題がありました。そこで今回は、画像サイズが 300 x 300px になる原因と回避方法をまとめてみました。

（2019年3月5日追記）テーマ作者の方が Cocoon 1.6.5 で、AMP用の画像サイズ取得を相対パスに対応してくださいました。ありがとうございます(^^)　Cocoon の最新バージョンを使っていればこの記事のような問題が発生することはありません！

Cocoon 1.6.5公開。PWAオフラインに対応。不具合修正など。

PWA機能をかなりいい感じに改善。

wp-cocoon.com

AMPページで画像サイズが 300 x 300px になる原因

AMPページでは画像サイズの指定が必須

このサイトでは、とある事情から記事の画像ファイルをドキュメントルートからの相対パスで指定し、画像サイズは指定していませんでした。

しかし、AMPページで画像を表示するには <amp-img> タグを使い、画像サイズ（widthとheight）を必ず指定しなければなりません。

Cocoonは画像サイズを自動で追加してくれる

WordPressテーマ Cocoon には、画像サイズが指定されていない場合、AMPページでは画像ファイルからサイズを取得して widthとheight を自動で追加してくれるとても便利な機能がついています。

下がその処理を行っている関数 get_image_width_and_height のコードです。

cocoon/lib/utils.php より引用（2019年2月19日）

//画像URLから幅と高さを取得する（同サーバー内ファイルURLのみ）
if ( !function_exists( 'get_image_width_and_height' ) ):
function get_image_width_and_height($image_url){
  //URLにサイトアドレスが含まれていない場合
  if (!includes_site_url($image_url)) {
    return false;
  }
  // $wp_upload_dir = wp_upload_dir();
  // $uploads_dir = $wp_upload_dir['basedir'];
  // $uploads_url = $wp_upload_dir['baseurl'];
  // $image_file = str_replace($uploads_url, $uploads_dir, $image_url);
  $image_file = url_to_local($image_url);
  //_v($image_file);
  if (file_exists($image_file)) {
    $imagesize = getimagesize($image_file);
    if ($imagesize) {
      $res = array();
      $res['width'] = $imagesize[0];
      $res['height'] = $imagesize[1];
      //_v($res);
      return $res;
    }
  }
}
endif;

しかし、画像ファイルを相対パスで指定しているとサイトアドレスが含まれないため、画像サイズの取得処理は赤字のコードの部分でキャンセルされます。その場合はデフォルト値の 300 x 300px が指定されるため、AMPページで画像サイズが 300 x 300px になってしまいます。

WordPress 標準機能の「メディアを追加」で画像を追加していれば、サイトアドレスが含まれたURLが指定されますし、画像サイズが指定されるのでこの問題は発生しません。私が画像を相対パスで指定して、しかも画像サイズも指定していなかったのがそもそもの原因です(^^;)

回避方法

記事が少なければ、サイズを指定して画像ファイルを貼り直すのがベストな回避方法かと思いますが、記事が多いとなかなか大変です。

その場合は、子テーマ用の関数ファイル（functions.php）に親テーマから get_image_width_and_height 関数をコピペして、画像ファイルをドキュメントルートからの相対パスで指定していても、画像サイズを指定するように変更します。青字の部分がそのコードです。

！注意！こうした場合、親テーマのアップデートで get_image_width_and_height 関数に変更があると、それが反映されないリスクがあることに注意してください。

vim wp-content/themes/cocoon-child-master/functions.php

function get_image_width_and_height($image_url){

  // ドキュメントルートからの相対パスの場合はサイトアドレスを追加
  if (preg_match('/^\/wp-content\/uploads\//', $image_url)) {
    $image_url = site_url() . $image_url;
  }
    
  //URLにサイトアドレスが含まれていない場合
  if (!includes_site_url($image_url)) {
    return false;
  }
  // $wp_upload_dir = wp_upload_dir();
  // $uploads_dir = $wp_upload_dir['basedir'];
  // $uploads_url = $wp_upload_dir['baseurl'];
  // $image_file = str_replace($uploads_url, $uploads_dir, $image_url);
  $image_file = url_to_local($image_url);
  //_v($image_file);
  if (file_exists($image_file)) {
    $imagesize = getimagesize($image_file);
    if ($imagesize) {
      $res = array();
      $res['width'] = $imagesize[0];
      $res['height'] = $imagesize[1];
      //_v($res);
      return $res;
    }
  }
}

おわりに

AMPには色々ときびしい条件があるため、オリジナルのページと比べると見劣りすることが多いですが、Cocoon では、オリジナルとほとんど同じの AMPページを生成してくれます。AMP対応を検討している方にぜひオススメのテーマです。