BLOG

imgタグからwidth/height/classを削除する方法

imgタグからwidth/height/classを削除する方法
考える人

imgタグ(画像)に不要なコードがあるって聞いたんだけどホントなの?

設定方法を知っておきたい。

こういった疑問に答えます。

本記事の内容

  • imgタグにwidth/height/classを挿入しない方法
  • (記事の横幅以下の)小さい画像を中央寄せにしたい時

WordPressの『メディアを追加』でimgタグにデフォルトで挿入されるwidth(幅)/height(高さ)/class(クラス)の3つの属性。

別になくても画像は表示されるって知ってましたか?

HTMLにwidthとheightを書くか否かは意見が分かれるところなので

今日はデフォルトで挿入しない設定があるよ!ってことだけ覚えて帰ってください。

コピペするだけなのでカンタンですが、functions.phpをイジるのでバックアップは必ず取るようにしましょう。

また、functions.phpをイジる時は必ず子テーマにしてください。

親テーマをカスタマイズしてもアップデートの際に更新され消えてしまいますし、バグった時に取り返しがつかなくなる恐れがあります。

カスタマイズは自己責任でお願いしますm(_ _)m

imgタグにwidth/height/classを挿入しない方法

カンタン4ステップ

  1. 『外観』の『テーマエディタ』をクリック
  2. 『編集するテーマを選択』で『子テーマ』を選択
  3. テーマのための関数(functions.php)に該当コードをペースト
  4. 『ファイルを更新』をクリック

デフォルトでは下記のような長いコードが生成されます。

<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と?>は初めから記述されているので、間の7行だけをコピーして?>の上にペーストする感じです)。

widthとheightを残したい場合は5行目を削除、

classを残したい場合は6行目を削除すればOKです。

<?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"

なるべく早く対策することで画像を追加する度に増えるコードを整理できますよ😌

あわせて読みたい
ブロガーなら今すぐ知っておきたい【画像】に関する記事まとめ9選
ブロガーなら今すぐ知っておきたい【画像】に関する記事まとめ9選 WordPressでブログを運営しているけど、画像に関して知らないことがまだまだありそう。 一覧でまとまってる...