WordPressで画像に自動追加されるようになったsrcset属性とsizes属性を無効化する方法

• シェアしてね♪
• Tweet
• 
• 61

  

---

• 
  ワンコインで広告掲載してみませんか？

• Tweet
• 

WordPress4.4以降では、画像を出力する際にsrcset属性とsizes属性が自動で追加されるようになりました。例えば、以下のような感じで、挿入した画像に自動的にsrcset属性とsizes属性が追加されます。

<img width="758" height="419" src="http://techmemo.biz/wp-content/uploads/2016/07/example.png" class="attachment-featured size-featured wp-post-image" alt="" title="" srcset="http://techmemo.biz/wp-content/uploads/2016/07/example.png 758w, http://techmemo.biz/wp-content/uploads/2016/07/example-641x354.png 641w" sizes="(max-width: 758px) 100vw, 758px">

srcset属性とsizes属性は、画面のサイズによって画像を出し分けたり、Retinaディスプレイに対応させる時に活用します。これらの属性の詳細については、Kia Kingさんの記事が丁寧に解説してあって非常にわかりやすいので、ぜひご参照ください。

さて、このsrcset属性とsizes属性、サイトによっては不必要な場合もあると思います。そこで今回は、これらの属性を自動追加しないように、無効化する方法をご紹介いたします。

WordPressのレスポンシブイメージ(srcset属性とsizes属性)を無効化する方法

適用しているテーマのfunctions.phpに以下1行を追加するだけで、レスポンシブイメージを無効化できます。

add_filter( 'wp_calculate_image_srcset', '__return_false' );

上記を追加すると、サイト全体でレスポンシブイメージが無効化されます。記事本文内だけで無効化したい場合は、以下のように記述します。

remove_filter( 'the_content', 'wp_make_content_images_responsive' );

環境に合わせて適切な方をfunctions.phpに追記してください。

あとがき

srcset属性とsizes属性は非常に便利な属性ですし、スマホやタブレットへの対応が当たり前になったこれからの時代では、活用頻度は増えてくると思います。今のうちにある程度使い方を理解しておいた方が良さそうです。

それでも、現時点では必要ないよという場合は、上記手順で無効化しておきましょう。

Tweet