【CSS + JS】テキストの無限ループアニメーション
【WordPress】画像に自動付与されるsrcset属性を削除する
目次
アイキャッチ画像の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
NEW POSTS
【WordPress】GA4連携の人気記事ランキング機能を自作プラグイン化してみた
【netlify】ビルドイメージを更新 [ Ubuntu Xenial 16.04 → Ubuntu Focal 20.04 ]
【PHP】Google Business Profile APIを使ってクチコミを取得する
スクリーンショットのAPI「screendot」を使ってみた
【window.matchMedia】メディアクエリでhoverが使えるデバイスを判定
lax.jsの使い方【スクロール連動アニメーションの実装】