WordPress widthとheightを画像に自動追加する方法
WordPressで画像にwidthとheightを自動追加する方法です。
imgタグにwidthとheight属性がない場合、Lazy Loadなどの画像の遅延読み込みをおこなっていると、ブラウザが画像を読み込む前に画像のアスペクト比が計算できないため、レイアウトシフトが起こる場合があります。
というか、実際にモバイルでおこっていたようで、Pagespeed Insightsで指摘されていた。
WordPress5.5から標準でwidthとheight属性が追加されるようになったわけだけど、どうも古い投稿では出ていないものがあるようだ。もしかしたらWordPressのメディアへPngファイルを投稿したものの、途中からWebPファイルへ変換して直接uploadsへアップロードして拡張子を一括変換した影響かもしれない。とまあ、理由は不明だけど、投稿１件ずつ修正するのはめんどくさがりな筆者は耐えられない。というわけで自動化をすることになりました。
ここでは 投稿のimg要素にwidthとheight属性を自動追加する方法 を紹介します。
投稿のimg要素にwidthとheight属性を自動追加するコード
対象は、投稿内のwidthとheight属性を持たない画像です。
下記のコードをテーマのfunctions.phpに追記してください。
// 画像 width と height 属性を自動追加
function add_imgsize($content) {
$pattern = '//i';
preg_match_all($pattern, $content, $imgs);
foreach ( $imgs[0] as $i => $img ) {
if ( false !== strpos( $img, 'width=' ) && false !== strpos( $img, 'height=' ) )
continue;
$imgurl = $imgs[1][$i];
$imgsize = @getimagesize( $imgurl );
if ( false === $imgsize )
continue;
$replacedimg = str_replace( '<img ', '<img ' . $imgsize[3] . ' ', $imgs[0][$i] );
$content = str_replace( $img, $replacedimg, $content );
}
return $content;
}
add_filter('the_content','add_imgsize');
やっていることは単純。投稿内のimgタグを検索してwidthとheightがない場合は画像URLからサイズを取得し、コードを置換することでサイズを追加しています。
「getimagesize()」について詳しく知りたい方は「PHP 画像のサイズ（width、height）を取得する方法 | WordPress」を参考にしてみてください。
ちなみに「@getimagesize()」としているのは「getimagesize()」をエラーメッセージを表示せずに呼び出すためです（エラー制御演算子:@）。画像が存在しない場合や破損している場合に、PHPの警告（Warning）が画面に出るのを防ぐ目的で使っています。ファイルが存在するかチェックする方が正確なんだけど、投稿時にメディアから追加しているんでファイルがある前提で作っています。必要に応じて修正してください。
まとめ
WordPressで画像にwidthとheightを自動追加する方法を紹介しました。
おかげでレイアウトシフトが起こる問題は解決できた。よかったよかった。
おつかれさまでした。