WordPressでは画像をアップロードすると、いくつかの異なるサイズの画像が自動的に作成されています。この機能により、投稿に追加する画像サイズを簡単に選べたり、サイトを訪れた人の通信環境等に合わせて自動的に適切なサイズの画像を送信したりしています。
この記事では、自動的に作成される画像サイズの変更や、追加・削除する方法を紹介します。
## 画像の保管場所は?
アップロードされた画像や、自動的に作成されたサイズ違いの画像は、WordPressの中のフォルダに保管されています。
インストールした場所にある「wp-contents」フォルダの中の「uploads」フォルダです。設定により、ここに直接画像が置かれている場合と、年月別のフォルダに分けて置かれている場合があります。FTPソフトや、サーバーのファイルマネージャ機能を使うと確認できます。
「image001-100x100.jpg」のように、「画像名-横サイズ-縦サイズ」という名前のものが自動的に作られたサイズの画像です。初期設定では、通常3~4種類ずつ作成されていますが、小さい画像をアップロードした時は作られないものがあります。逆に、テーマやプラグインにより、さらに追加されていることなどもあります。
なお画像関係のうち、アップロードした時に入力している「タイトル」や「キャプション」などは、データベースで管理されています。
## 画像サイズを変更するには?
「設定」メニューの「メディア」画面を使います。ここでは最初からWordPressが用意しているサムネイル(thumbnail)、中(medium)、大(large)の3種類の画像サイズを変更することができます。
「中サイズ」と「大サイズ」は、幅の上限と高さの上限が指定できます。上限以内に収まるように縦横比は変えずに縮小されます。
「サムネイル」は、さらにトリミングのオプションがあります。トリミングを有効にすると、指定したサイズになるように切り取ってくれますので、正方形のサムネイルを作ることもできます。
ここで設定した値は、データベースの「wp_options」テーブルで管理されています。サムネイルの場合、「thumbnail_size_w」「thumbnail_size_h」「thumbnail_crop」という名前で保存されます。
なお、WordPress4.4から「medium_large」(横幅768)の画像も作られるようになりましたが、設定画面には項目がなく変更できません。
## 画像サイズを追加するには?
functions.phpにadd_image_sizeを加えると、画像サイズを追加できます。
add_image_size( 'image300', 300, 300, true );
サイズ名、幅(初期値0)、高さ(初期値0)、画像の切り抜きするかどうか(初期値false)、の順に記述します。
なお、追加した画像サイズは設定画面に表示されませんので、忘れないようにしましょう。
### 追加したサイズで記事に挿入
add_image_sizeをするとそのサイズの画像が作成されるようになりますが、画像を記事に挿入する時の選択肢には追加したサイズが表示されません。
「image_size_names_choose」フィルタを使うと、追加したサイズが選択肢に表示されるようになります。
function my_image_sizes( $sizes ) {
$my_sizes = array(
'image300' => __('縦横300'),
);
return array_merge( $sizes, $my_sizes );
}
add_filter( 'image_size_names_choose', 'my_image_sizes' );
add_image_size( 'image300', 300, 300, true );
「WP Image Size Selection」というプラグインを導入すると、「image_size_names_choose」フィルタは使わずに、add_image_sizeのみで選択可能になります。
## 画像サイズを削除するには?
「サムネイル」「中」「大」は、設定画面で幅と高さの両方とも0にすると、今後アップロードされものは、そのサイズの画像が作成されなくなります。
### その他の画像サイズも画像作成をやめるには?
テーマなどが追加している画像サイズは、設定画面から作成を止めることができません。このようなときは「intermediate_image_sizes」フィルタを使います。
例えば、サムネイルと中サイズのみ作成するには、次のようにfunctions.phpに追加します。
function my_intermediate_image_sizes($sizes) {
return array('thumbnail','medium');
}
add_filter('intermediate_image_sizes', 'my_intermediate_image_sizes');
逆に、作成しないサイズを指定することもできます。
function my_intermediate_image_sizes($sizes) {
$delete = array('large','medium_large');
return array_diff($sizes, $delete);
}
add_filter('intermediate_image_sizes', 'my_intermediate_image_sizes');
また、「intermediate_image_sizes_advanced」というフィルタを使う方法もあります。こちらは $sizes の他に $metadata を受け取れるので、もっと細かい制御も可能です。
function my_intermediate_image_sizes_advanced($sizes, $metadata) {
unset($sizes['large']);
unset($sizes['medium_large']);
return $sizes;
}
add_filter('intermediate_image_sizes_advanced', 'my_intermediate_image_sizes_advanced', 10, 2);