WordPress の投稿記事に画像を貼る手順と sizes 属性値の変更

1. はじめに

この Webサイトは WordPress で作っているのですが、記事の中に画像を挿入する手順と、その画像をうまく表示させるために追加している設定について紹介したいと思います。

まずは、追加している設定からです。

2. 事前の追加設定

この Webサイトでは、WordPress が自動的に img タグに追加する srcset 及び sizes 属性値のうち、sizes だけ上書きするようにしてあります。

なぜこんなことをするのかというと、自動的に追加される sizes 属性値が、現在使用している自作テーマの画面サイズに合っていなかったためです。

元々、img タグは以下のように出力されていました（一例です）。

<img src="/wp-content/uploads/2017/12/foo-1024x696.png"
  alt="" class="alignnone size-medium wp-image-nnnn"
  srcset="
    https://example.com/wp-content/uploads/2017/12/foo-300x204.png 300w,
    https://example.com/wp-content/uploads/2017/12/foo-768x522.png 768w,
    https://example.com/wp-content/uploads/2017/12/foo-1024x696.png 1024w"
  sizes="(max-width: 1024px) 100vw, 1024px">

srcset 属性はこれで問題ありませんが、sizes 属性は問題があります。

ここで 1024px となっている値は、WordPress が内部で保存されている画像などからひっぱってきた値であり、現在使用しているテーマに合っていませんし、100vw というのも同じくテーマにフィットしていませんでした。

現在のテーマにあう値を出力するために、wp_calculate_image_sizes フィルターフックを使い、以下のように変更しています（functions.php）。

/**
 * img タグの sizes 属性値を上書きする
 */
function custom_wp_calculate_image_sizes( $sizes, $size ) {
    // テーマにフィットする幅を指定する
    return "(max-width: 767px) 70vw, (max-width: 991px) 350px, 500px";
}
add_filter('wp_calculate_image_sizes', 'custom_wp_calculate_image_sizes', 10 , 2);

この処理により、出力される img タグは 以下のようになります。

<img src="/wp-content/uploads/2017/12/foo-1024x696.png"
  alt="" class="alignnone size-medium wp-image-nnnn"
  srcset="
    https://example.com/wp-content/uploads/2017/12/foo-300x204.png 400w,
    https://example.com/wp-content/uploads/2017/12/foo-768x522.png 868w,
    https://example.com/wp-content/uploads/2017/12/foo-1024x696.png 1124w"
  sizes="(max-width: 767px) 70vw, (max-width: 991px) 350px, 500px">

sizes 属性値が変わっていることが分かります。

ちなみに、ここでの sizes 属性では以下を指定しています。

1. viewport の幅が 767px 以下の場合は、70vw の幅で画像を表示する。
   • 簡単に言うと、ウィンドウ幅の70%の大きさで表示するということです。
   • この Webサイトはこのサイズの時、1カラムになりますので この指定にしました。
2. それ以外の場合で、viewport の幅が 991px 以下の場合は、350px の幅で画像を表示する。
3. それ以外の場合は、500px の幅で画像を表示する。

あとは Webブラウザが srcset の中の画像から一番適したものを選んでくれます。

3. 投稿記事を作成する時に、画像を挿入する手順

[メディアを追加] ボタンから画像を挿入

記事の中に画像を貼る際には、[メディアを追加] というボタンから画像を挿入しています。

この時、[添付ファイルの表示設定] というウィンドウで指定したサイズが、img タグの src, width, height 属性としてセットされます。

ここで src に指定された画像は、srcset 属性値に非対応のブラウザで使用されますので、一番表示して欲しいサイズを選んでおく必要があります。

挿入された HTMLコードは、こんな感じです。

<a href="xxxx.png"><img src="xxxx.png" alt="" class="alignnone size-full wp-image-nnnn" width="787" height="277" /></a>

※ 先ほどのウィンドウで、[リンク先] として「メディアファイル」を選択しましたので、a タグで囲まれています。

やることはこれだけです。あとは、WordPress が srcset と sizes 属性を追加してくれます。Webブラウザは、sizes 属性値で決定されるサイズで画像を表示するため、srcset に指定された画像ファイルの中から最適なものを選んでダウンロード・表示してくれます。

4. 参考

• img – HTML | MDN
• Responsive Images in WordPress 4.4 – Make WordPress Core