今回は、WordPressテーマで高解像度ディスプレイに対応した画像を出力する方法について取り上げます。縦横が2倍解像度の画像を用意するWPに限らず一般的なコトですが、iPhoneなどの高解像度ディスプレイ(以下、Retinaディスプレイとします)でサイトを見ると、画像がぼやけて見えることがありますよね。Retinaディスプレイは縦横それぞれ従来の2倍の解像度となっているため、画像をクッキリ表示させるためには、縦横それぞれ倍解像度以上にした画像を用意する必要があります。次は、これらをWordPress上でどう実現するかを考えます。話の都合上、WordPressで扱う画像の表示方法を次の4つに分類します。背景画像メディアページに表示する画像この中で対応が難しいのは#1の投稿に挿入する画像です。通常、投稿中に画像を挿入する場合は、投稿編集フォームの左上にある「メディアを追加ボタン」を押して画像を選択しますよね。この方法だと、画像サイズがそのままimgタグのwidthとheightに反映されてしまうので、画像がぼやけてしまいます。そこで本記事では、#1に対応する方法について紹介します。メニューを作ってみます。いうサイズが選択された場合は、本来の画像ファイルのwidthとheightの値を1/2にしてからimgタグを投稿に埋め込むように処理を書き換えます。サイズが選択されたらwidthとheightを1/2にする処理を実現するために、以下の4点を実装していきます。新しい画像サイズを追加するメディアライブラリのサイズ選択時に作成した画像サイズのメニューが表示されるようにするメディアライブラリのサイズ選択時のメニューのラベルを修正する作成した画像サイズが選択された場合は、widthとheightの値を1/2にするこれらは全てfunctions.phpに実装します。github)にあります。作る場合は、widthやheightなどのkey存在確認したほうがいいです。L71のコードミスを修正しました。フルサイズの高解像度モードを追加しました。続いて、ソースコードの説明をしますね。新しい画像サイズを追加する次の関数を使って、新しい画像サイズをWordPressに追加登録します。$crop)ここでは、高解像度用サムネイルを300px、中サイズを600px、大サイズを1200pxとして設定しています。Displayで1:1解像度で出力できるようにするためにwidthとheightの値を1/2に指定するので、表示上の画像サイズはそれぞれ150px、300px、600pxとなります。メディアライブラリで画像選択時に新しい画像サイズを選択可能にするフィルタを使って、先ほど追加した3つの画像サイズを選択できるようにします。/wp-includes/media.phpに実装されているフィルター’my_custom_image_sizes’は、フィルター関数に対して次のような配列を渡してきます。これらはデフォルトで用意されている画像サイズです。フィルター関数my_custom_image_sizesは、この配列にadd_image_sizesで追加した画像サイズの要素をmergeしてreturnしています。height」の形式で表示されます。このラベルのwidthとheightがそれぞれ元の1/2の値になるようにカスタマイズします。‘wp_prepare_attachment_for_js’です。このフィルターから受け取れる引数は、次のような配列です。処理中の画像のフルサイズは900x1200pxです。多くの要素がありますが、ここで利用するのは$response[‘sizes’]です。画像ファイルへのURL、縦長or横長の値が格納されています。フィルター関数add_imagesize_for_js_preparationは、配列$response[‘sizes’]のうちadd_image_sizesで追加した画像サイズに対してのみwidthとheightの値を1/2に書き換えています。2);}}ところで上図にある$response[‘sizes’]配列には、’large_for_2x’の要素がありません。上の図例で処理中の画像ファイルが’large_for_2x’と’full’のサイズが重複するので、このフィルターの前段の処理で’large_for_2x’が削除されています。そこで次のように、画像のフルサイズ==large_for_2xのサイズとなる場合は、large_for_2x要素を追加する処理を入れています。thumbnail_for_2xの場合も同様にしています。$response['sizes']['full']['orientation'],)));ここまでのカスタマイズで、メディアライブラリから画像挿入するときに、フルサイズ以下全ての画像サイズについて選択メニューが表示される状態になりました。高解像度画像用サイズが選択された場合は、widthとheightの値を1/2にする投稿に画像を挿入するときにadd_image_sizesで追加した高解像度画像用サイズが選択されたら、imgタグのwidthとheightを1/2にしてから出力する処理を追加します。ここでは、フィルター’get_image_tag’を使います。src=”...のようなimgタグの文字列そのものです。本当はimgタグを出力する前のwidthとheightの値を直接操作できるフィルター等があれば良いのですが見当たりませんでした。他にもっといい方法があるかもしれません。将来もっとよいカスタマイズができるようになるかもしれません。フィルター’get_image_tag’からは、imgタグ文字列を受け取ることが出来ます。そこでフィルター関数change_imagesize_tohalfでは、imgタグ文字列から正規表現でwidthとheightの値を取り出して、それぞれ1/2にしてからimgタグ文字列を再生成します。1/2にする処理は、高解像度画像用サイズが選択された場合にのみ行うよう実装します。以上で、カスタマイズ終了です。まとめると、add_image_sizesで、高解像度画像用サイズを作成image_size_names_chooseフィルターで、カスタム画像サイズをメニューに追加wp_prepare_attachment_for_jsフィルターで、画像サイズメニューのラベルを修正get_image_tagフィルターで、widthとheightの値を1/2に修正という流れになります。最後に今回は、投稿に画像挿入するときに、imgタグのwidthとheightを1/2にするモードを追加する機能を実装することで、RetinaDisplay対応としました。他にも色々代替手段は考えられます。投稿に2倍サイズの画像を挿入した後で、手書きでwidthとheightを1/2に修正する。2012年5月Authorプログラマー:TaeWordPressのサイト制作を始めて2年になりました。WordPressテーマの作り。