MENU CLOSE

【WordPress】画像に自動付与されるsrcset属性を削除する

wordpress

アイキャッチ画像のsrcsetを削除する方法

これをfunctions.phpに追記します。

add_filter('wp_calculate_image_srcset_meta', '__return_null');

アイキャッチ画像のsrcsetって?

WordPressでthe_post_thumbnail()などを使ってアイキャッチ画像を表示する際に、自動的にレスポンシブ対応されデバイスサイズごとに違う大きさの画像を読み込むようにimgタグにsrcset属性が設定されます。

<img width="2160" height="900" src="https://notes.sharesl.net/wp-content/uploads/2019/05/wordpress.jpg" class="attachment-top_mv size-top_mv wp-post-image" alt="wordpress" srcset="https://notes.sharesl.net/wp-content/uploads/2019/05/wordpress.jpg 2160w, https://notes.sharesl.net/wp-content/uploads/2019/05/wordpress-768x320.jpg 768w" sizes="(max-width: 2160px) 100vw, 2160px">

このような感じです。

ページ読み込みの際の容量とかを考えるとこの方が最適化されて良いとは思いますし、特に問題ないならそのままにしておいた方が良いのでしょう。

ただそれにしてもWordPressの中で自動生成している画像が勝手に設定されるので、トリミングされて全然アスペクト比が違ったものが設定されたり、解像度の足りないものが勝手に設定されたりするので、あまり使えないサイトもあります。それはそもそもメディアの設定が悪いと言われればそうかもしれませんが。笑

そこでsrcsetを無効化したいっていう時にこちらのフィルターフックを使うと幸せになれます。

add_filter('wp_calculate_image_srcset_meta', '__return_null');

冒頭にも書いたこの一文をfunctions.phpに追記するだけでOK!
srcset属性だけでなくsize属性も同時に無効化されます。

無効化せずに変更する方法

wp_calculate_image_srcset_metaというフィルターフックは今回のように__return_nullを設定すると無効化になりますが、普通に関数をフックしてsrcsetやsizesの値を上書きすることもできるようです。

function filter_wp_calculate_image_srcset( $sources, $size_array, $image_src, $image_meta, $attachment_id ) {
  if ( $size_array[0] >= 960 ) {
    $w                = 960;
    $target_extension = ["/\.png\z/", "/\.jpg\z/", "/\.jpeg\z/"];
    $suffix           = ["-${w}w.png", "-${w}w.jpg", "-${w}w.jpeg"];
    $new_url          = preg_replace( $target_extension, $suffix, $image_src );
    $sources[$w]      = [
      'url'        =>$new_url,
      'descriptor' => 'w',
      'value'      => $w,
    ];
    return $sources;
  }
}
add_filter( 'wp_calculate_image_srcset', 'filter_wp_calculate_image_srcset', 10, 5 );

こちらは960px以上の時に画像の接尾語を-960w.jpg-960w.pngとなるように変更しています。

適用した例は以下のソースです。

<img width="2160" height="900" src="https://notes.sharesl.net/wp-content/uploads/2019/05/wordpress.jpg" class="attachment-top_mv size-top_mv wp-post-image" alt="wordpress" srcset="https://notes.sharesl.net//wp-content/uploads/2019/05/wordpress.jpg 2160w, https://notes.sharesl.net/wp-content/uploads/2019/05/wordpress-768x320.jpg 768w, https://notes.sharesl.net/wp-content/uploads/2019/05/wordpress-960w.jpg 960w" sizes="(max-width: 2160px) 100vw, 2160px">

こちらは以下のページを参考にさせていただきました。

WordPressのsrcset閾値を変更する方法

https://it-soudan.com/how-to-change-srcset-on-wordpress/

さいごに

今回のsrcsetの件は、WordPress4.4以降の機能追加ですので割と昔からある機能です。当時はsrcsetとかをあまりまだ使っていなかったのですが、WordPressが対応したのを知り、srcsetとはなんぞ!?と思ってそこから調べていって、picture要素を使ったレスポンシブイメージについてなどを学習した記憶があります。今は「Picturefill」などのpolyfillを取り入れることでIEでもレスポンシブイメージを手軽に使えるようになっていて、僕もバンバン使っています。そのため他の部分だけレスポンシブイメージを取り入れてWordPressのアイキャッチは無効化するってなんか違うかも・・・って思い始めているので、今後はうまく最適化していかないといけないかなーと思います。

記事一覧

RELATED

wordpress
inoue
inoue
TIPS

【WordPress】Smart Custom Fieldsをコード定義で管理する

lazysizes
inoue
inoue
TIPS

lazysizesを使って画像を遅延読み込みする

Gutenberg
inoue
inoue
TIPS

【WordPress】Gutenbergでカスタム投稿にタクソノミーが表示されない時

wordpress
inoue
inoue
TIPS

【WordPress】pre_get_postsの使い方

wordpress
inoue
inoue
TIPS

【WordPress】テーマ作成に使うテンプレートタグを集めました

wordpress
inoue
inoue
TIPS

【WordPress】自作の関数でcanonicalタグを出力する

ブログ記事一覧
  • HOME
  • TIPS
  • 【WordPress】画像に自動付与されるsrcset属性を削除する