WordPressをレティナ対応させた

　サイトをレティナディスプレイに対応させました。

1 実は既にレティナ対応はしていた
2 以前作ったショートコードを改造しよう
3 どうしているのか
4 全面対応はできていないが軽いのがいい

実は既にレティナ対応はしていた

　実はWordPressのプラグイン「WP Retina 2x」というプラグインでこのサイトはレティナ対応済みだったのですが、どうもプラグイン自体が重い。GCEに引っ越す前はサーバースペックが割とあったので気にならなかったけど、今はスペック低いのでページ表示にものすごく時間がかかるようになってしまった。

　調べるのには「P3 (Plugin Performance Profiler)」というプラグインを使いました。なんとWP Retina 2xだけでページ表示に2秒!も使っているという。過去の履歴も残っていたのでみたけど、以前は他のプラグインも合わせて0.2秒ぐらいだったので、これはいかん。

　プラグインは止めて、いったんレティナ表示はあきらめたのですが、調べてみるとWordPressの4.4ではレスポンシブ・イメージというのに対応するらしい。

WordPress 4.4 Beta 1

　imgタグにsrcset属性というものを追加して、そこにレティナ用の画像のありかを記載しておくものらしい。さっそくこれの元になるプラグインがあるので、入れてみたんだけど、いっこうに変化がない。imgタグにsrcsetが追加されるのではないのか? 設定もない…。

WordPressでレスポンシブ・イメージの自動化を可能に。RICG公認プラグインが公開

　こちらのページに答えがありました。あくまでこのプラグインは、WordPressの管理画面から画像をアップロードしたときに自動でsrcset属性を追加してくれるモノらしいです。MarsEditでブログ書いている自分にはまるで意味がない、なんてこった。

以前作ったショートコードを改造しよう

MarsEditから実寸画像リンク付きで縮小サムネイルつけて投稿する方法 | A-tak-dot-com

　以前、適切なサムネイルを取得するショートコードを作りました。このショートコードはWordPressの関数を使って画像を取得しているので、WP Retina 2X入れるだけで、自動でレティナ化出来ていたんですよね。

　ただ、よくよく考えればショートコードの中でsrcset属性の中身も出力してあげればいいわけです。

　そんなわけでこんなショートコードをfunction.phpに追加しました。

[php]
//独自サムネイル追加
add_image_size(‘pc’ ,700, 525 ,false );
add_image_size(‘retina’ ,1400, 1050 ,false );

//サムネイル表示ショートコード
// このショートコードを使うと指定した指定したサイズに近いサムネイル画像のURLを取得できる
// 画像の指定は添付ファイルIDではなく元画像のURLを使うのでMarsEditのような外部ブログエディタから使用可能
// ブログエディタのテンプレートに登録して使うことを想定
//
// 指定例:
// [[getthumnail url=https://a-tak.com/blog/wp-content/uploads/2015/07/for-you.png width=700 height=700]]
function get_thumnail_by_url($args) {
extract(shortcode_atts(array(
‘url’ => ”,
‘width’ => 700,
‘height’ => 700,),$args));
return get_thumnailurl($url, $width, $height);
}

add_shortcode( ‘getthumnail’, ‘get_thumnail_by_url’);

//サムネイルsrc/srcset取得ショートコード
// imgタグのsrcとsrcset属性を取得するショートコード
// srcsetの2xの画像は2倍サイズを自動計算して取得する
//
// 指定例:
// [[getthumnailsrc url=https://a-tak.com/blog/wp-content/uploads/2015/07/for-you.png width=700 height=700]]
function get_thumnailsrc_by_url($args) {
extract(shortcode_atts(array(
‘url’ => ”,
‘width’ => 700,
‘height’ => 700,),$args));
$ret = ‘src="’ . get_thumnailurl($url, $width, $height) . ‘" srcset="’ . get_thumnailurl($url, $width*2, $height*2) . ‘ 2x,’ . get_thumnailurl($url, $width*3, $height*3) . ‘ 3x"’;
return $ret;
}

add_shortcode( ‘getthumnailsrc’, ‘get_thumnailsrc_by_url’);

//サムネイルURL取得
function get_thumnailurl($url, $width, $height) {
if ($url!=”) {
$images = get_children( ‘post_parent=’.get_the_ID().’&post_type=attachment&post_mime_type=image’);
if ( empty($images)) {
//添付なし
return get_stylesheet_directory_uri().’/img/no-image.jpg’;
} else {
$img_args = array($width, $height);

foreach ( $images as $attachment_id => $attachment ) {
if (wp_get_attachment_url( $attachment_id ) == $url) {
$img = wp_get_attachment_image_src($attachment_id, $img_args);
return $img[0];
}
}
}
}
}
[/php]

　「getthumnailsrc」というショートコードを新たに作りました。以前のショートコード(getthumnail)も互換性のため残しています。

　使い方は

[[getthumnailsrc url=画像のURL width=幅 height=高さ]]

という感じです。高さは省略可。

たとえば以下のようにするとします。

画像を表示する領域は700px
img1.jpgという幅2,100pxの画像をアップロードする
add_image_size関数で700pxと1,400pxのサイズを登録

この場合、以下のようにショートコードを書きます。
[html]
<img [src=”https://a-tak.com/img1.jpg”]] />
[/html]

すると、
[html]
<img src="https://a-tak.com/img1x700.jpg" srcset="https://a-tak.com/img1x1400.jpg 2x,https://a-tak.com/img1.jpg 3x">
[/html]
のように出力されます。

　あとは対応ブラウザがいい感じに処理してくれて、iPhone6やMacBook Pro with Retina displayのような2倍解像度の機種の場合、srcsetの2xで指定されているimg1x1400.jpgが表示されます。iPhone 6 Plusのような3倍解像度の機種は3xのところのimg1.jpg、それ以外はsrcに指定したimg1x700.jpgが表示されます。