【WordPress対応】WebKit Nightly Buildsに実装されたsrcsetを試してみた

#WordPress

野中龍一

2013.09.30

この記事は公開されてから1年以上経過しています。情報が古い可能性がありますので、ご注意ください。

この前にリニューアルしたDevelopers.IOですが、srcset属性に対応しています。
高精細ディスプレイ（Retina Display）に対応するには、CSSだとMedia Queriesで実現できましたがHTMLではスマートな実現方法がありませんでした。srcsetの実装が進むことで高精細ディスプレイへの対応が容易になります。

srcsetは今のところWebKit Nightly Buildsでしか実装されていないので残念ながら見られることはないと思いますがMacbook Pro Retinaをお持ちの方はWebkit Nightly BuildsをダウンロードしてDevelopers.IOを開いて画像を見てみてください。とても綺麗に画像が表示されます。

srcsetの今後に期待しつつ、今回はsrcsetの使い方とWordpressのアイキャッチ機能でsrcsetを指定する方法を紹介したいと思います。

srcsetの指定方法

srcsetはimgタグの属性です。ブラウザ側が対応していなくても無視されるため、現時点で指定しても特に問題は起こりません。

サンプルコード

まずはどんな感じに指定するのかサンプルコードを見てください。

<img src="image.png" srcset="image-2x.png 2x" />

ぱっと見ただけでも何を表しているのか想像がつくと思います。image-2x.pngが対象の画像であり、2xがデバイスピクセル比ですね。ブラウザはデバイスピクセル比が2の時にimage-2x.pngが表示されます。

デバイスピクセル比とはMedia Queriesのdevice-pixel-ratioやresolutionのdppxと同じ値です。

ディスクリプタ

デバイスピクセル比の他にviewportの横幅、縦幅でも制御することができます。デバイスピクセル比やviewportに合わせて別々の画像を指定したい場合は,コンマ区切りでこのように指定する。

<img src="image.png" srcset="image-2x.png 2x, image-1.5x.png 1.5x, image-hvga.png 320w" />

指定できるディスクリプタは以下の通り。

値	意味	例
[path]	画像のURL	image.png
x	デバイスピクセル比	1.5x
w	viewportの横幅	320w
h	viewportの縦幅	480h

詳しい仕様はこちらを参照してください。

WordPressのアイキャッチにsrcsetを指定する

WordPressのアイキャッチ機能を使ってsrcset属性を指定する方法を紹介します。

thumbnailsのサポートを有効にする

まず、thumbnailsを有効化しましょう。細かな説明は省きますが通常の解像度と高解像度の画像を書き出すようにadd_image_size(解説)をfunctions.phpの中に記述してください。

<?php
add_theme_support( 'post-thumbnails' );
add_image_size( 'clip100', 100, 100, true );
add_image_size( 'clip200', 200, 200, true );
[/php]

<h3>ループ内の処理</h3>
<p>わかりやすいように関数などにはしていません。以下のようにループ内で指定することでアイキャッチにsrcset属性を指定することができます。</p>


<?php while( have_posts() ): the_post(); ?>
<div class="thumbnail">
<?php
    if( has_post_thumbnail() ):
        //属性情報を格納する配列を作る
        $attrs = array();
        
        //get_post_thumbnail_idを使い指定サイズの画像情報を取得する
        $srcset_image = wp_get_attachment_image_src( get_post_thumbnail_id(), 'clip200' );
    
        //配列の最初に格納されている画像のURLとデバイスピクセル比を属性情報の配列に入れる
        $attrs['srcset'] = $srcset_image[0] . ' 2x';
        
        //属性情報を第2引数に指定する
        the_post_thumbnail( "clip200", $attrs );
    endif;
?>
</div>
<?php endwhile; ?>