コードエディターでWordPressのレスポンシブ画像コードを生成する方法

HTML の imgタグの srcset を使うとブラウザの幅に応じで表示する画像のサイズをコントロールすることができます。
例えば、次のように書くと

<img src="/img/sample-300x300.jpg" alt="" width="300" height="300"
    srcset="/img/sample-300x300.jpg 300w,
    /img/sample-150x150.jpg 150w,
    /img/sample-768x768.jpg 768w,
    /img/sample.jpg 1000w" sizes="(max-width: 300px) 100vw,
    300px">

ブラウザの幅が 300px以下の場合は sample-300×300.jpg を、150px以下の場合は sample-150×150.jpg を、768px以下の場合は sample-768×768.jpg を読み込み、300px以下の場合は幅いっぱいに、それ以外は 300px幅で表示します。

WordPress では、ビジュアルエディターで画像を挿入すると srcset のコードを自動で生成してくれます。

しかし、コードエディターで自分でタグを描いた場合は、srcset なしの img タグになってしまいます。
srcset のコードを自動で生成してくれるようにするには工夫が必要です。

コードエディターでWordPressのレスポンシブ画像コードを手生成する方法

ビジュアルエディターで画像を挿入した場合のコードを見てみると、class に wp-image-156 というようなクラスが入っています。
この 156 は、ライブラリに登録した画像の ID です。

class に wp-image-xxx が入っていると、WordPress は srcset のコードを自動で生成してくれます。

コードエディターで手書きでコードを書く場合に、class=”wp-image-xxx” を入れておくと、srcset の部分が自動で生成されるようになります。
ID はちゃんとしたものを入れないと、srcset の部分が生成されません。
面倒ですが、画像の ID を調べて記入する必要があります。