WordPress アイキャッチ画像サイズ カスタマイズまとめ

WordPressのアイキャッチ画像関連でよく使うカスタマイズのまとめです。自分用のメモとして。

アイキャッチを有効にする

add_theme_support('post-thumbnails');

 
アイキャッチのサイズを指定する

<?php set_post_thumbnail_size($width,$height,$crop); ?>

$width 画像の横サイズ
$height 画像の縦サイズ
$crop トリミングをするかどうか（デフォルト: false ）
false 縦横サイズの長い方でリサイズ
true 画像の中心から指定サイズにトリミング

アイキャッチ画像のサイズを追加する

アイキャッチ画像の基本サイズは、WordPress管理画面の設定＞メディアで設定可能。
各サイズの表示方法

• サムネイル　thumbnail

  <?php the_post_thumbnail('thumbnail'); ?>

• 中サイズ   medium

  <?php the_post_thumbnail('medium'); ?>

• 大サイズ   large

  <?php the_post_thumbnail('large'); ?>

上記サイズ以外にもサイズを追加したい場合
add_image_size() で指定する

<?php add_image_size($name,$width,$height,$crop); ?>

• $name 画像サイズの名前
• $width 画像の横サイズ
• $height　画像の縦サイズ
• $crop トリミングするかどうか（アイキャッチの指定方法と同じ）
  false 縦横サイズの長い方でリサイズ
  true 画像の中心から指定サイズにトリミング

<?php add_image_size('myimgsize' , 600 , 320 , true ); ?>

追加した画像サイズの出力

the_post_thumbnail( 'myimgsize' );

配列で出力

<?php //ループ内で使用
$thumb_id = get_post_thumbnail_id($post->ID); //アタッチメントIDの取得
$myimg = wp_get_attachment_image_src( $thumb_id, 'myimgsize' );
?>
<img src="<?php echo $myimg[0]; ?>" alt="<?php the_title(); ?>" />

アイキャッチのトリミングを中心以外にする

add_image_size( 'myimgsize', 600, 300, array( 'left', 'top' ) );

$crop部分でトリミングの基点を指定することができます。クロップ位置を設定する場合、配列の最初の値はx軸で、2番目の値はy軸です。
x軸には‘left’ ‘center’,  ‘right’が指定可能
y軸には ‘top’, ‘center’,  ‘bottom’が指定可能
どちらもデフォルトはcenter

既にアップ済みの画像をリサイズするにはプラグインで

画像サイズを追加しても、既にアップロードしている画像には適用されません。その場合は「Regenerate Thumbnails」というプラグインを使って一気にリサイズできます。
Regenerate Thumbnails
https://ja.wordpress.org/plugins/regenerate-thumbnails/