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

Flatpickr
inoue
inoue
TIPS

Flatpickrで日時入力をカレンダー表示にする

BASE DESIGN THEME
inoue
inoue
TIPS

BASEテーマカスタマイズ【実践編】見出しの文言を変更できるようにする

BASE DESIGN THEME
inoue
inoue
TIPS

BASEテーマカスタマイズ【デザインオプション編】テーマに新しい機能を加える方法

BASE DESIGN THEME
inoue
inoue
TIPS

BASEテーマカスタマイズ【準備編】カスタマイズに必要な前提知識について

BACKGROUND VIDEO
inoue
inoue
TIPS

動画をWebページの背景に埋め込む時のテクニック

Google Apps Script
inoue
inoue
TIPS

【GAS】スプレッドシートからメールを送信する方法

NEW POSTS

Sass @import → @use
inoue
inoue
TRY

【Sass】@importを@useに置き換えてみる《FLOCSS対応》

Stripe Payment Links
inoue
inoue
TRY

コーディング一切不要のStripe Payment Linksで決済機能を試してみる

BASE Partners
inoue
inoue
COLUMN

【BASE Partners】有料テーマの無償提供特典について

BASE Partners
inoue
inoue
COLUMN

BASEオフィシャルパートナーに認定されました

BASE DESIGN THEME Q &A よくある質問
inoue
inoue
COLUMN

【BASEデザインテーマ】よくある質問まとめ

Drawer Menu
inoue
inoue
TIPS

CSSと簡単なJSでできるドロワーメニューの実装方法

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