WordPressでサイトを作っていると、記事の一覧を表示するときにアイキャッチ画像を表示することが多いと思います。その際、任意のサイズのサムネイル画像を表示したくなることがあります。任意のサイズのサムネイル画像をアップロード出来るようにする方法をご紹介します。
サイズの追加方法
そもそもWordpressのサムネイル画像はデフォルトで３つ用意されています。その３つが以下の通りです。
- サムネイル 150px × 150px
- 中サイズ 300px × 300px
- 大サイズ 640px × 360px
メディアに画像をアップロードする際にアップロードした画像の他にこの３つのサイズで画像がリサイズされサーバーに保存されています。これらの３つについては、管理画面の設定→メディア設定から変更することができます。
これ以外に追加する際は、下記の１行をfunction.phpに記述することで追加することができます。
<?php add_image_size( $name, $width, $height, $crop ); ?>
引数の内容を以下の通りです。
- $name、画像サイズの名前
- $width 画像の横幅
- $height 画像の縦幅
- $crop 画像をトリミングするかどうか。trueで切り出し、falseで指定の幅または高さに合わせてリサイズ。デフォルトはfalse
実際に利用する場合は以下のようになります。
<?php add_image_size('addimg' , 320 , 320 , true ); ?>
これで指定したサイズの画像がアップロードした際に保存され利用できるようになります。
利用方法は以下の通りです。
<?php $thumb_id = get_post_thumbnail_id($post->ID); $myimg = wp_get_attachment_image_src( $thumb_id, 'addimg' ); ?>
トリミングを中心以外にする
画像のトリミングをtrueにしていた場合、デフォルトでは画像の中心から指定のサイズでトリミングされます。この中心からとリングを変更することができます。その方法は以下の通りです。
<?php add_image_size('addimg' , 320 , 320 ,array( 'left', 'center' ) ); ?>
$crop部分でトリミングの基点を変更することができます。クロップ位置を設定する場合、配列の最初の値はx軸で、2番目の値はy軸です。
x軸には‘left’ ‘center’, ‘right’が指定可能
y軸には ‘top’, ‘center’, ‘bottom’が指定可能
どちらもデフォルトはcenter