画像サイズ指定で知っておくべきこと

サムネイル付きの投稿一覧を表示する際に、画像のサイズ指定で少し混乱しました。理解しているつもりだったのに忘れていたので、備忘録としてまとめます。

よく投稿などの一覧表示をするときにサムネイル画像を表示しますが、デザインによって画像サイズを指定することはよくあると思います。サイズ指定でよく使うのは以下の関数かと思います。

・アイキャッチ画像のデフォルトの大きさを指定する関数。

・アイキャッチ画像の別のサイズを指定する関数。

存在するサイズの画像のURL、幅、高さを取得する関数。

ほとんどの場合はプリセットで用意されているサイズで事足りると思いますが、時折デザインによっては別のサイズを指定することもあります。
このときに、「画像が指定したサイズ通りの表示をしない」ときがあり困惑していまいます。どうしてでしょうか?原因は大きく2つあります。

  1. ブラウザのキャッシュにより指定したサイズ通りの表示をしない
  2. 既にアイキャッチ画像が設定されていたり、「メディア」にアップロードされている画像を使用しているため指定したサイズ通りの表示をしない

1はキャッシュをクリアすることですぐに解消しますが、2については画像をアップロードし直すか、画像をリジェネレイトするプラグインを使って対応します。どういうことかというと、アイキャッチ画像を設定したり、投稿に画像を添付する際に、画像をアップロードするタイミングでWordPressは指定のあるサイズの画像を自動で作成するのです。指定のあるサイズは、プリセットは’full’, ‘large’, ‘medium’, ‘thumbnail’、別に指定している場合はset_post_thumbnail_size()やadd_image_size()で指定しているサイズの画像ファイルをアップロード時に自動で作成します。その後、例えばwp_get_attachment_image_src()関数で、画像サイズを指定してURLを取得するときに、そのサイズの画像があれば思い通りに取得できますが、なければ違うサイズの画像URLを取得します。つまり、画像が思い通りのサイズで表示しないときは、画像をアップロードし直すか、プラグインを使うことで問題を解消します。私はこれに関してプラグインを使ったことないのでどこまでできるのか分かりませんが、画像をアップロードし直すと確実に表示できます。ただ、既に大量の画像がアップロード済みで表示する画像サイズを変更したい場合は、アップロードし直すのは難しいのでプラグインで対応するしか無いかも知れません。

スポンサーリンク