この記事は最後に更新してから1年以上経過しています。

5.3への準備:投稿写真を使っているサイトは準備しておこう

説明

この記事は先日公開した「5.3の新機能:JPEG画像の向きを調整」の続きのようなものになる。高解像度の投稿写真を扱っているサイトは、5.3のリリースに合わせて対応を検討しておくべきことをまとめてみた。

はじめに、この記事は公開された5.3 Beta 2をもとにしており、正式リリースの際に変更される可能性があることを予めお断りする。

縮小イメージの生成を制限している場合

自動的に縮小イメージを生成する機能は、サイト公開後に縮小イメージが必要になった際、すすぐに使用できるメリットがある。半面、少なからずサーバーのストレージを消費するため、使用しない縮小イメージを生成しないように設定しているサイトもある。5.3ではこれまでよりも大きめな縮小イメージが生成されるようになっており、そうしたサイトでは5.3のリリースにあわせて対応が必要となるだろう。

次の表は5.3で新テーマ「Twenty Twenty」を適用している場合に生成される縮小イメージの種類を示す。

サイズ名高さcrop備考
'thumbnail'150150幅および高さが150ピクセル
'medium'300300幅または高さが最大300ピクセル
'medium_large'7680幅768ピクセル固定
'large'10241024幅または高さが最大1024ピクセル
'1536x1536'15361536幅または高さが最大1536ピクセル(5.3以降)
'2048x2048'20482048幅または高さが最大2048ピクセル(5.3以降)
'post-thumbnail'12009999幅1200ピクセル固定(テーマ依存)
'twentytwenty-fullscreen'19809999幅1980ピクセル固定(テーマ依存)

管理ページの「メディア」で新しい画像をアップロードした場合、縮小イメージを生成する前に'intermediate_image_sizes_advanced'フィルターによって最終的に作成するサイズが決定する。既存のサイトですでにこのフィルターを使用している場合は、次のような感じになっているのではないだろうか(フィルターの第3パラメータは5.3で追加)。

function mytheme_intermediate_image_size( $new_sizes, $image_meta, $attachment_id ) {
	unset( $new_sizes['medium'] );
	unset( $new_sizes['medium_large'] );
	unset( $new_sizes['large'] );
	return $new_sizes;
}

add_filter( 'intermediate_image_sizes_advanced', 'mytheme_intermediate_image_size', 10, 3 );

このようになっている場合は、5.3で追加される'1536x1536'と'2048x2048'も$new_sizesの配列から除外することになる。今後、さらにサイズが追加されることを考慮するなら、フィルター関数を以下のようなコードにして、テーマで使用するサイズ名を$requiredで指定する方法もある。

function mytheme_intermediate_image_size( $new_sizes, $image_meta, $attachment_id ) {
	static $required = array( 'thumbnail', 'post-thumbnail' );
	foreach ( $new_sizes as $size_name => $size ) {
		if ( ! in_array( $size_name, $required ) ) {
			unset( $new_sizes[$size_name] );
		}
	}
	return $new_sizes;
}

幅または高さが2560ピクセルよりも高解像度な投稿写真を使っている場合

前述の記事で触れたように、5.3では高解像度のしきい値が設定され、次の'big_image_size_threshold'フィルターで変更可能になっている(標準は2560、0を返すとオリジナルの解像度が有効となる)。

$threshold = (int) apply_filters( 'big_image_size_threshold', 2560, $imagesize, $file, $attachment_id );

このしきい値により、現状の5.2.3と5.3とでは高解像度の写真をアップロードした際に、メディアとして使用されるファイルが変わるが、それには新機能の自動向き調整機能も影響する。向き調整を行う際に関わってくるのが、'wp_image_maybe_exif_rotate'フィルターである(標準はそのファイルのOrientationc値、0または1を返すと向きは調整されない)。

$orientation = apply_filters( 'wp_image_maybe_exif_rotate', $orientation, $this->file );

解像度が幅4032×高さ3024ピクセル(Orientationが6:縦向き)の写真ファイル「IMG_0332.jpg」をアップロードした場合を例として紹介する。

バージョン条件メディアのファイル
5.2.3標準IMG_0332.jpg
アップロードしたオリジナルファイル
5.3.0標準
しきい値:標準
向き調整:有効
IMG_0332-2560.jpg
オリジナルを回転し、幅1920×高さ2560ピクセルに縮小したもの
5.3.0しきい値:標準
向き調整:無効
IMG_0332-2560.jpg
オリジナルを幅2560×高さ1920ピクセルに縮小したもの
5.3.0しきい値:無効
向き調整:有効
IMG_0332-rotated.jpg
オリジナルを回転し、保存し直したもの
5.3.0しきい値:無効
向き調整:無効
IMG_0332.jpg
アップロードしたオリジナルファイル

5.3で5.2.3との互換性を保つなら、しきい値:無効と向き調整:無効を指定することになる。その場合は、テーマのfunctions.phpに次の内容を追記すればよい。

add_filter( 'big_image_size_threshold', '__return_zero', 10, 2 );
add_filter( 'wp_image_maybe_exif_rotate', '__return_zero', 10, 2 );

JPEG画像の品質

アップロードしたJPEGファイルから縮小イメージや向きを調整したイメージを作成する際、「品質」パラメータが画質とファイルサイズに影響を与える。JPEG画像の場合、「品質」パラメータは有効範囲は1~100で、標準では「82」が設定されている。この数値が大きい程、画質がよく、ファイルサイズが大きくなる。この「品質」パラメータを変更する場合は、'wp_editor_set_quality'フィルターが使用できる。具体的に「品質」パラメータを75に変更する場合は次のようにすればよい。

function set_jpeg_quality_to( $quality, $mime_type ) {
	if ( 'image/jpeg' === $mime_type ) {
		return 75;
	}
	return $quality;
}

add_filter( 'wp_editor_set_quality', 'set_jpeg_quality_to', 10, 2 );

今回のアップデートは投稿写真を使っているサイトには少なからず影響を与えるだろう。正式リリースまで1か月ほどあるので、その間にしっかり準備しておこう。


最終更新 : 2019年10月10日 11:27

お勧め

add_shortcode(2018年5月27日 更新)

void add_shortcode( string $tag, mixed $func )
ショートコード(独自タグ)を追加する。ショートコードは、投稿記事内でテキスト内容がない[tag]や、テキストを内包する[tag]テキスト[/tag]の書式で使用できる独自タグのこと。標準の状態では、 the_content関数によって表示する直前のフィルター処理内でパラメータ$funcで指定した関数・メソッドが実行される。

get_user_setting(2022年1月31日 更新)

mixed get_user_setting( string $name [ , string $default = false ] )
ユーザーインターフェイス設定を取得する。

have_posts(2018年5月27日 更新)

bool have_posts( )
次の投稿データが存在するかを調べる。

in_category(2018年5月27日 更新)

bool in_category( mixed $category [ , mixed $post = null ] )
投稿情報が指定したカテゴリーに属しているか調べる。

add_feed(2024年6月24日 更新)

string add_feed( string $feedname, callable $callback )
フィードを追加する。