Retinaディスプレイに対応する - 実践的テーマを作成する #5

functions.php

<?php
// ・・・途中まで省略

// 倍解像度画像サイズを追加する
add_image_size('thumbnail_for_2x', 300, 300);
add_image_size('medium_for_2x', 600, 600);
add_image_size('large_for_2x', 1200, 1200);

// メディアライブラリに倍解像度画像サイズを登録する
add_filter( 'image_size_names_choose', 'my_custom_image_sizes' );
if( !function_exists('my_custom_image_sizes') ) {
	function my_custom_image_sizes( $sizes ) {
		return array_merge( $sizes, array(
				'thumbnail_for_2x' => __('高解像度画像 サムネイル'),
				'medium_for_2x' => __('高解像度画像 中サイズ'),
				'large_for_2x' => __('高解像度画像 大サイズ'),
		) );
	}
}

// Fullサイズと等しい場合は、画像サイズ選択メニューに高解像度用画像サイズを追加する
// きちんと作る場合は、widthやheightなどのkey存在確認したほうがいいです。
add_filter( 'wp_prepare_attachment_for_js', 'add_imagesize_for_js_preparation');
if( !function_exists('add_imagesize_for_js_preparation') ) {
	function add_imagesize_for_js_preparation($response) {
		
		foreach ($response['sizes'] as $size => $values) {
			if( in_array($size, array('thumbnail_for_2x','medium_for_2x','large_for_2x')) ) {
				$response['sizes'][$size]['width'] = floor($response['sizes'][$size]['width'] / 2);
				$response['sizes'][$size]['height'] = floor($response['sizes'][$size]['height'] / 2);
			}
		}
		
		$full_max = max($response['sizes']['full']['width'], $response['sizes']['full']['height']);
		$key = '';
		switch ($full_max) {
			case 300:
				$key = 'thumbnail_for_2x';
				break;
			case 600:
				$key = 'medium_for_2x';
				break;
			case 1200:
				$key = 'large_for_2x';
				break;
			default:
				return $response;
		}
		$response['sizes'] = array_merge($response['sizes'], array($key => array(
				'width' =>  floor($response['sizes']['full']['width'] / 2),
				'height' => floor($response['sizes']['full']['height'] / 2),
				'url' => $response['sizes']['full']['url'],
				'orientation' => $response['sizes']['full']['orientation'],
		)));
		return $response;
	}
}

// 倍解像度画像が投稿に挿入された場合に、imgタグのwidth/height属性値を半分にする
add_filter('get_image_tag', 'change_imagesize_tohalf', 1, 6);
if( !function_exists('change_imagesize_tohalf') ) {
	
	function change_imagesize_tohalf($html, $id, $alt, $title, $align, $size) {
		
		// 高解像度用サイズが選択された場合のみ、widthとheightの値を半分にする
		if (in_array($size, array('thumbnail_for_2x','medium_for_2x','large_for_2x'))) {
			// function image_hwstring (media.php)の仕様に合わせて正規表現でwidthとheightの値をマッチさせる
			if(preg_match('/^(?<before>.*width=["'])(?<value>[d]+)(?<after>["'].*)$/', $html, $m)) {
				$val = floor($m['value'] / 2);
				$html = $m['before'].$val.$m['after'];
			}
			if(preg_match('/^(?<before>.*height=["'])(?<value>[d]+)(?<after>["'].*)$/', $html, $m)) {
				$val = floor($m['value'] / 2);
				$html = $m['before'].$val.$m['after'];
			}
		}
		return $html;
	}
}