imgタグ（画像）に不要なコードがあるって聞いたんだけどホントなの？
設定方法を知っておきたい。
こういった疑問に答えます！
本記事の内容
- imgタグにclass（width／height）を挿入しない方法
- （記事の横幅以下の）小さい画像を中央寄せにしたい時
WordPressの「メディアを追加」でimgタグにデフォルトで挿入されるclass（クラス）／width（幅）／height（高さ）の３つの属性。
別になくても画像は表示されるって知ってましたか？
HTMLにwidthとheightを書くか否かは意見が分かれるところなので、今日はデフォルトで挿入しない設定があるよ！ってことだけ覚えて帰ってください。
また、functions.phpをイジる時は必ず子テーマにしてください。
親テーマをカスタマイズしてもアップデートの際に更新され消えてしまいますし、バグった時に取り返しがつかなくなる恐れがあります。
カスタマイズは自己責任でお願いしますm(_ _)m
imgタグからclass(width/height)を挿入しない方法
カンタン４ステップ
- ①：「外観」の「テーマエディタ」をクリック
- ②：「編集するテーマを選択」で「子テーマ」を選択
- ③：「テーマのための関数（functions.php）」に該当コードをペースト
- ④：「ファイルを更新」をクリック
デフォルトでは下記のような長いコードが生成されます。
<img src="https://hebochans.com/wp-content/uploads/2020/06/xxxx.jpg" alt="代替テキストを記入していない場合は空" width="xxx" height="xxx" class="aligncenter size-full wp-image-xxxx" />下記のコードを子テーマのfunctions.phpの一番下にコピペしてください（※<?phpと?>は初めから記述されているので、間の７行だけをコピーして?>の上にペーストする感じです）。
widthとheightを残したい場合は５行目（// widthとheight を削除の行）を削除、classを残したい場合は６行目（// classを削除の行）を削除すればオッケイです。
<?php
// メディアを追加でデフォルトで挿入されるwidth/height/classをimgタグから削除
add_filter('image_send_to_editor', 'remove_image_attribute', 10);
add_filter('post_thumbnail_html', 'remove_image_attribute', 10);
function remove_image_attribute($html){
$html = preg_replace('/(width|height)="d*"s/', '', $html); // widthとheight を削除
$html = preg_replace('/class=['"]([^'"]+)['"]/i', '', $html); // classを削除
return $html; }
?>するとsrcとaltだけのシンプルなimgタグの出来上がりです。
<img src="https://hebochans.com/wp-content/uploads/2020/06/xxxx.jpg" alt="代替テキストを記入していない場合は空" />（記事の横幅以下の）小さい画像を中央寄せにしたい時
しかし、このままでは（記事の横幅以下の）小さい画像を挿入した時に画像が「左寄せ」になってしまいます。
「中央寄せ」にしたい時はclass="aligncenter"をalt=""の後ろに半角スペースを空けて記述してください。
<img src="https://hebochans.com/wp-content/uploads/2020/06/xxxx.jpg" alt="代替テキストを記入していない場合は空" class="aligncenter" />個人的には下記は絶対に不要なので削除しておきたいですね。
class="size-full wp-image-xxxx"なるべく早く対策することで画像を追加する度に増えるコードを整理できますよ😌