WordPressで投稿に挿入した画像には、以下のようにwidthとheightが追加されます。ブロックエディターになってからはwidth/height属性は付かないようになっていたと思いますが、WordPress5.5ではまた自動追加されるようになりました。
<img loading="lazy" width="800" height="423" src="https://example.com/wp-content/uploads/2020/08/sample.jpg" alt="" class="wp-image-1" srcset="https://example.com/wp-content/uploads/2020/08/sample.jpg 800w, https://example.com/wp-content/uploads/2020/08/sample-300x159.jpg 300w, https://example.com/wp-content/uploads/2020/08/sample-768x406.jpg 768w" sizes="(max-width: 800px) 100vw, 800px">場合によっては、width/height属性が入ることで意図しない表示になってしまうケースもあるかもしれません。そんな時は、用意されているフックを使うことで簡単にwidth/height属性の追加を停止できます。
スポンサードリンク
WordPressの画像に追加されるwidthとheightを削除する方法
この方法は以下のツイートを参考にさせていただきました。
ドンピシャなフィルターフックあるよ！とお知らせしたい・・・
— 石鷹／ishitaka (@xakuro_com) August 14, 2020
add_filter( ‘wp_img_tag_add_width_and_height_attr’, ‘__return_false’ );https://t.co/Ku4s6Jg4pj
画像にwidthとheightを入れたくない場合は、適用しているテーマのfunctions.phpに以下を追加します。
add_filter( 'wp_img_tag_add_width_and_height_attr', '__return_false' );上記を追加することで、画像の出力は以下のように変わります。
<img src="https://example.com/wp-content/uploads/2020/08/sample.jpg" alt="" class="wp-image-1" srcset="https://example.com/wp-content/uploads/2020/08/sample.jpg 800w, https://example.com/wp-content/uploads/2020/08/sample-300x159.jpg 300w, https://example.com/wp-content/uploads/2020/08/sample-768x406.jpg 768w" sizes="(max-width: 800px) 100vw, 800px">なお、width/height属性だけでなく、「loading=”lazy”」も削除されます。
あとがき
何らかの理由で画像からwidthとheightを削除したい場合は、ぜひお試しください。ネイティブLazy Loadも無効化されてしまうので、その点は注意が必要です。