fotodeo

タイトルをだいぶ端折りましたが今日は『imgに勝手にwidth/height入れなくする』作業をしたいと思います。

昨年wordPressがver.5.5.0以上に上がりました。それまでは問題なかったような気がするのですが、レスポンシブデザインをうたうサイトでは問題が発生しました。
場合によっては幅は画面内に収まるのに縦が伸びた画像になってしまう事例が出ました。

原因はver.up

Lazy-load（遅延ロード）が勝手に導入されることにより不都合が発生するようになりました。

　Lazy-loadとは画像やiframeコンテンツなどが見えていない状態（ビューポート外）はロードさせずに、見えはじめた状態（ビューポート内）の時だけロードさせるようにして、ページの表示を速くするテクニックです。

何が問題かというと、見えていない場所の画像はロードしないようにできるのは良いのですが、表示させる領域を確保しようとします。これがimgに勝手にwidth/heightを設定してしまう原因となっています。

対策方法

縦と横の設定をきちんと行っても良いのですが、面倒なので超お手軽方法！
imgタグのwidth属性とheight属性を出力しないように、functions.phpにてフィルターをフックして対処します。

add_filter( 'wp_img_tag_add_width_and_height_attr', '__return_false' );

これを張り付けるだけで問題解消です(๑•̀ㅂ•́)و✧

まとめ

縦を％やJavaScriptでセットし、Lazy-loadと共存とかも考えましたが、それでコードをややこしくしていくのも嫌だったのでググっていてこの方法にたどり着きました。原状このコード一文で問題なく表示されるようになったので問題が発生している方は一度お試しあれ。functions.phpのバックアップもお忘れなく♪