概要説明
WordPress の標準の画像の大きさ(サムネイル・中・大)では足りないときに、レイアウトに合わせた大きさを add_image_size で足す functions.php のコード。切り抜き(crop)の true・false で何が変わるかを、作業環境で試した結果つきで。
コード:レイアウトに合わせた大きさを足す
WordPress は、画像をアップロードしたときに「サムネイル」「中」「大」などの大きさを作ります。大きさは上の画面(設定 → メディア)で変えられます。
それでも足りないとき、たとえば記事の一覧のカードに、決まった縦横の比の画像を出したいときは、テーマの functions.php で大きさを足します。
functions.php
/**
* レイアウトに合わせた画像の大きさを足す
*/
add_action( 'after_setup_theme', function () {
add_theme_support( 'post-thumbnails' );
// 名前・幅・高さ・切り抜くか
add_image_size( 'my_card', 800, 480, true );
} );
/**
* 投稿の画面の「画像の大きさ」の選択肢にも出す(なくても、テーマの中では使える)
*/
add_filter( 'image_size_names_choose', function ( $sizes ) {
return array_merge( $sizes, array( 'my_card' => 'カード(800×480)' ) );
} );
| 書き方 | 役目 |
|---|---|
| add_theme_support( ‘post-thumbnails’ ) | アイキャッチ画像を使えるようにする(テーマがすでに書いていれば不要) |
| add_image_size( 名前, 幅, 高さ, 切り抜くか ) | アップロードしたときに、この大きさの画像も作るようにする |
| image_size_names_choose | 投稿の画面で画像を入れるときの「サイズ」の選択肢に、足した大きさを出す |
切り抜く(true)・切り抜かない(false)の違い
4 つ目の値で、決めた大きさに切り抜くか、縦横の比を保って縮めるだけかが変わります。作業環境で、1334×750 の画像を 800×480 にして試しました。
| 4 つ目の値 | できた画像 | 向いているところ |
|---|---|---|
| true(切り抜く) | 800×480 ちょうど(はみ出した左右を切る) | 一覧のカードなど、大きさをそろえたいところ |
| false(切り抜かない) | 800×450(比を保って、幅 800・高さ 480 の中に収める) | 記事の中の写真など、全体を見せたいところ |
大きさを足したあとにアップロードした画像から作られます。今までの画像にも作るときは、縮小版を作り直すプラグイン Regenerate Thumbnails などで作り直します(下のリンク)。
足した大きさの画像を出す
テーマのテンプレートで、足した大きさの名前を指定します。thumbnail・medium・large と同じように使えます。
テンプレート(single.php など)
<?php the_post_thumbnail( 'my_card' ); ?> <?php // 画像の ID から出すとき echo wp_get_attachment_image( $image_id, 'my_card' ); ?>
1 枚アップロードするたびに、足した大きさの数だけファイルが増えます。使わなくなった大きさは消しておくと、サーバーの容量を節約できます。


