ブロックエディターの画像ブロックやギャラリーブロック、メディアと文章ブロックなどの一部のブロックは、追加した画像の img 要素に width と height 属性がありません。
width と height 属性がない場合、WordPress 5.5 より追加される（予定）の、ネイティブ Lazy Load などの画像の遅延読み込みなどを行っていると、ブラウザが画像を読み込む前に画像のアスペクト比が計算できないため、ページレイアウトのシフト（Layout Jank）が起こる場合があります。これにより、アンカーリンクのスクロール位置のズレが生じる場合があります。また、検索エンジンによってはページエクスペリヘンスが評価の対象となる場合（下記リンクを参照）があり、SEO の観点からもページレイアウトのシフトは避けたいところです。
より快適なウェブの実現に向けたページ エクスペリエンスの評価
img 要素に width と height 属性を自動追加
そこで、投稿の img 要素に width と height 属性を自動追加する方法を紹介します。
対象は、投稿（コンテンツ）内の、width と height 属性を持たない、添付画像（添付ファイル）です。
下記のコードをテーマの functions.php に追記します。特に設定はありません。これで自動で追加されるようになります。
add_filter( 'the_content', '_image_dimensioning_filter_content_tags' );
add_filter( 'the_excerpt', '_image_dimensioning_filter_content_tags' );
//add_filter( 'widget_text_content', '_image_dimensioning_filter_content_tags' );
/**
* Filters specific tags in post content and modifies their markup.
*
* @param string $content The HTML content to be filtered.
* @param string $context Optional. Additional context to pass to the filters. Defaults to `current_filter()` when not set.
* @return string Converted content with images modified.
*/
function _image_dimensioning_filter_content_tags( $content, $context = null ) {
if ( null === $context ) {
$context = current_filter();
}
if ( false === strpos( $content, '<img' ) ) {
return $content;
}
if ( ! preg_match_all( '/<img\s[^>]+>/', $content, $matches ) ) {
return $content;
}
$images = array();
foreach ( $matches[0] as $image ) {
if ( preg_match( '/wp-image-([0-9]+)/i', $image, $class_id ) ) {
$attachment_id = absint( $class_id[1] );
if ( $attachment_id ) {
$images[ $image ] = $attachment_id;
continue;
}
}
$images[ $image ] = 0;
}
foreach ( $images as $image => $attachment_id ) {
if ( $attachment_id ) {
$size = array();
$filtered_image = $image;
if ( false === strpos( $filtered_image, ' width=' ) && false === strpos( $filtered_image, ' height=' ) ) {
if ( preg_match( '/src\s*=\s*[\"|\'].*?-([0-9]{2,4})x([0-9]{2,4})\.(jpe?g|png|gif)[\"|\']/i', $image, $s ) ) {
$size = array( $s[1], $s[2] );
} else {
$s = wp_get_attachment_image_src( $attachment_id, 'full' );
if ( $s ) {
$size = array( $s[1], $s[2] );
}
}
if ( $size ) {
$filtered_image = str_replace( '<img', '<img width="' . $size[0] . '" height="' . $size[1] . '"', $filtered_image );
$content = str_replace( $image, $filtered_image, $content );
}
}
}
}
return $content;
}プラグイン
同様の機能を持つプラグインも作成しました。プラグインで簡単に設定したいという方は、こちらをどうぞ。
※ WordPress 5.0 から 5.4.x 用です。
今後
なお、今後の WordPress (Gutenberg) のバージョンアップにおいて、img 要素に width と height 属性が追加される可能性があります（下記リンクを参照）。そのときは、このコード（プラグイン）は不要になるので、削除してください。
Images should always provide dimensions #23244
更新履歴
2020年6月22日
- 画像サイズの取得方法を変更しました。(Special thanks to セルティスラボ)
追記
WordPress 5.5 より、標準で width と height 属性が追加されるようになりました。よってこのコード (プラグイン) は不要です。WordPress 5.0 から 5.4.x の場合のみ組み込んでください。