BLOG

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

2020年6月23日

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ステップ

  • ①:「外観」の「テーマエディタ」をクリック
  • ②:「編集するテーマを選択」で「子テーマ」を選択
  • ③:「テーマのための関数(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?>は初めから記述されているので、間の7行だけをコピーして?>の上にペーストする感じです)。

widthとheightを残したい場合は5行目(// widthとheight を削除の行)を削除、classを残したい場合は6行目(// 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; } 

?>

するとsrcaltだけのシンプルな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"

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

-BLOG
-,

© 2021 ブログの神様|THE GOD OF BLOG