WordPressの画像に追加されるwidthとheightを削除する方法

WordPressの画像に追加されるwidthとheightを削除する方法

WordPressの画像に追加されるwidthとheightを削除する方法
  • シェアしてね♪
  • このエントリーをはてなブックマークに追加
  • follow us in feedly


  • 一式98,000円~の格安プランをご用意!Web制作お任せください!
  • このエントリーをはてなブックマークに追加
  • follow us in feedly

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を削除する方法

この方法は以下のツイートを参考にさせていただきました。

画像に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も無効化されてしまうので、その点は注意が必要です。

この記事が気に入ったら
いいね!してね♪

Twitter で
スポンサードリンク

関連記事

コメントを残す

メールアドレスが公開されることはありません。