対象: WordPress(テーマファイルの編集ができる環境)
難易度: ★★☆
所要時間: 約10分
記事一覧のサムネイルが、投稿ごとにアップロードした画像の縦横比によってバラバラなサイズで表示され、レイアウトがガタガタになってしまう…という悩み、よくあります。WordPressには指定した縦横比で自動的に切り抜いてくれる機能が標準で備わっているので、これを使えば見た目を揃えられます。
functions.phpで独自のサムネイルサイズを登録する
add_image_size()関数で、縦横比を固定した独自サイズを登録します。
add_image_size( 'archive-thumbnail', 600, 400, true );それぞれの引数の意味は次の通りです。
- 1つ目: サイズの名前(任意の名前でOK)
- 2つ目・3つ目: 幅・高さ(px)。この比率が縦横比になる
- 4つ目:
trueにすると、指定サイズぴったりにトリミング(切り抜き)される。falseだと縦横比を保ったまま縮小されるだけで、サイズがぴったり揃わない
ここが一番のつまずきポイントです。4つ目の引数を省略(デフォルトのfalse)にすると、「指定サイズに収まるように縮小」されるだけで、元画像の縦横比によっては指定サイズより小さいまま出力されてしまい、結局揃いません。縦横比を確実に揃えたいなら、必ず4つ目をtrueにしてください。
登録したサイズを記事一覧で呼び出す
記事一覧のテンプレート(archive.phpなど)で、登録した名前を指定してサムネイルを呼び出します。
<?php the_post_thumbnail( 'archive-thumbnail' ); ?>既存記事のサムネイルにはさかのぼって適用されない
add_image_size()で新しくサイズを登録しても、それより前にアップロード済みの画像には自動的に反映されません。WordPressは画像アップロード時に登録済みの各サイズを生成する仕組みのため、後から追加したサイズは「これから新しくアップロードする画像」にしか使われません。
大量の既存記事にまとめて反映させたい場合は、「Regenerate Thumbnails」のようなプラグインを使ってサムネイルを一括再生成する必要があります。
既存記事の再生成が面倒な場合は、表示側のCSSで縦横比を揃える方法もあります。画像を囲む要素の高さを固定し、object-fit: cover;を指定すれば、画像自体のファイルは元のままで、見た目上だけ縦横比を揃えられます。ただし、この場合は画像本体のファイルサイズは軽くならない(サーバーには元の大きい画像のまま保存される)ので、表示速度も重視するならadd_image_size()で実サイズごと生成しておく方が確実です。
まとめ
add_image_size('名前', 幅, 高さ, true);で縦横比固定のサムネイルサイズを登録できる- 4つ目の引数を
trueにしないとトリミングされず、縦横比は揃わない - 新しく登録したサイズは、それ以降にアップロードする画像にしか適用されない
- 既存記事に反映するには「Regenerate Thumbnails」等での一括再生成、またはCSSの
object-fitで対応する