WordPress に画像の大きさを足す add_image_size:切り抜く・切り抜かないの違いと使い方

広告WordPress・PHP を学べる本

Amazonのアソシエイトとして、WordPress functions.phpは適格販売により収入を得ています。

概要説明

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 枚アップロードするたびに、足した大きさの数だけファイルが増えます。使わなくなった大きさは消しておくと、サーバーの容量を節約できます。

関連機能

  1. よく見られていた記事を消したあとの URL:近い記事へ 301 で転送する

  2. アイキャッチ画像の設定機能を追加したい場合

  3. RSSフィードにnoindexヘッダーを追加 ( Google Search Console 対策 )

サイドバー

よく使うカスタマイズ

最近の記事

Profile

PAGE TOP