Written by Kasumi

WordPressの画像挿入時に自動で付与されるwidth・heightを削除する方法

WordPressで投稿記事を作成時、画像を挿入すると自動でimgタグにwidth,heightが入る。

width,heightが入らないようにしたい。

本記事ではこのような悩みを解決。

実装方法について解説します。

functions.phpにコードを記述

//---------------------------------------
// 【投稿記事の画像挿入時にwidthとheightを削除】
//---------------------------------------
function remove_width_attribute( $html ) {
    $html = preg_replace( '/(width|height)="\d*"\s/', "", $html );
    return $html;
}
add_filter( 'post_thumbnail_html', 'remove_width_attribute', 10 );
add_filter( 'image_send_to_editor', 'remove_width_attribute', 10 );

上記コードをfunctions.phpに記述する事でwidth,heightを削除できます。

以上で実装完了です。

width,height指定はSEO的に必要?

googleが提供してる【Page Speed Insights】でサイトを確認すると、

【imgタグにwidthとheightが明示的に指定されてない】とエラーがでます。

widthとheightを入れる事でCLSを改善できます。

CLSの改善とはwebページを開いたとき、要素が突然移動したりする【レイアウトシフト】を無くす事を意味ます。

上記の事から、前章のコードを実装してしまうとwidth・heightの指定が無くなるのでSEO的には良くありません。

width、heightの自動指定は残したままレスポンシブに対応する

img {
  width: 100%;
  height: auto;
}

WordPressのwidth、heightの自動指定はバージョン5.50からの仕様です。

バージョンを更新された際に画像の縦横比が崩れた場合、imgタグに上記CSS(width: 100%;、height: auto;)を追記する事で自動指定を残したまま崩れを修正できる可能性があります。                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                            

まとめ

旧WordPressテーマをご使用の場合、5.50のアップデートでwebページの表示崩れが起こってる方は本記事を参考に修正してみてください。

以上で解説を終わります。

目次

関連記事

WordPress

投稿記事をCSVで管理!CSVのエクスポート、インポートを簡単にできるプラグインを紹介【ワードプレス】

更新日:2019.11.28
1894
WordPress プログラミング

【ACFプラグイン】Advanced Custom Fieldsの使い方・出力方法を紹介

2022.03.20
1829
WordPress

Jetpackの関連記事数を変更する方法【WordPress】

2022.05.23
729
WordPress プログラミング

ワードプレスの管理画面をアクセス制限(IP制限)してセキュリティを強化しよう

2021.03.01
1807