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
属性では以下を指定しています。
- viewport の幅が 767px 以下の場合は、70vw の幅で画像を表示する。
- 簡単に言うと、ウィンドウ幅の70%の大きさで表示するということです。
- この Webサイトはこのサイズの時、1カラムになりますので この指定にしました。
- それ以外の場合で、viewport の幅が 991px 以下の場合は、350px の幅で画像を表示する。
- それ以外の場合は、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
に指定された画像ファイルの中から最適なものを選んでダウンロード・表示してくれます。