MENU CLOSE

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

WordPress
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

テキストの無限ループアニメーション【CSS + JS】
inoue
inoueのサムネイル
TIPS

【CSS + JS】テキストの無限ループアニメーション

shopify
inoue
inoueのサムネイル
TIPS

【Shopify】カートへの遷移を飛ばしてチェックアウトに進むボタンを設置する

PhotoSwipe v5
inoue
inoueのサムネイル
TIPS

【JS】PhotoSwipe v5を使って画像をポップアップ表示する

AVIF [ gulpでjpg・pngからAVIF画像を生成 ]
inoue
inoueのサムネイル
TIPS

gulpでjpg・pngからAVIF画像を生成する

MutationObserverでDOMを監視[PhotoSwipe(v5)+Swiper(v8)連携]
inoue
inoueのサムネイル
TIPS

【JS】MutationObserverでDOMを監視[PhotoSwipe(v5)+Swiper(v8)連携]

Google Sheets API スプレッドシートのデータをJSONで取得する
inoue
inoueのサムネイル
TIPS

【Google Sheets API】 スプレッドシートのデータをJSONで取得する

NEW POSTS

GA4連携人気記事ランキング機能を自作プラグイン化してみ【WordPress】
inoue
inoueのサムネイル
TRY

【WordPress】GA4連携の人気記事ランキング機能を自作プラグイン化してみた

netlify UPDATE BUILD IMAGE [ビルドイメージの更新]
inoue
inoueのサムネイル
TRY

【netlify】ビルドイメージを更新 [ Ubuntu Xenial 16.04 → Ubuntu Focal 20.04 ]

Google Business Profile API [ PHPでクチコミ一覧取得 ]
inoue
inoueのサムネイル
TIPS

【PHP】Google Business Profile APIを使ってクチコミを取得する

screendot screenshot API
inoue
inoueのサムネイル
TRY

スクリーンショットのAPI「screendot」を使ってみた

window.matchMedia hoverを判定
inoue
inoueのサムネイル
TIPS

【window.matchMedia】メディアクエリでhoverが使えるデバイスを判定

lax.js
inoue
inoueのサムネイル
TIPS

lax.jsの使い方【スクロール連動アニメーションの実装】

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