WordPress Tips

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

2018-05-06

本記事にはプロモーションが含まれています。

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

ソラミ♪

Webエンジニアをやりつつ、デザインにも携わる株式会社コムワークの中の人。WordPress、Adobeアプリ、カワウソ好き。 2015年から当ブログ運営|2008年からGmail使用中|WordPress制作10年以上|15社以上のレンタルサーバー利用経験|100件以上のドメイン取得運用|サイト・ドメイン移転多数 »  もっとくわしく

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/

  • この記事を書いた人
  • 最新記事

ソラミ♪

Webエンジニアをやりつつ、デザインにも携わる株式会社コムワークの中の人。WordPress、Adobeアプリ、カワウソ好き。 2015年から当ブログ運営|2008年からGmail使用中|WordPress制作10年以上|15社以上のレンタルサーバー利用経験|100件以上のドメイン取得運用|サイト・ドメイン移転多数 »  もっとくわしく

-WordPress Tips