WordPressで画像を貼り付ける時に、
以下のように
width、height、classが自動挿入されます。

「これってどういう意味があるの？」
と疑問に思いませんでしたか？

基本的に画像の挿入のhtmlタグは次のような形です。

私はできるだけコードをシンプルにしたいので

上のような基本の形にデフォルトで
挿入されるようにカスタマイズしました。
 

今回は、WordPressで画像を貼り付ける時に
自動挿入されるwidth・height・classの
意味と削除方法を紹介します。

自動挿入されるclass・width・heightの意味

記事冒頭で示した以下のコードを例に、
それぞれのタグの意味を順番に説明します。

width=”150″ height=”150″

これは単語の通り、

width=画像の横サイズ
height=画像の縦サイズ

を指定しています。
 

しかし、WordPressの場合は
画像をアップロードした時に
自動的にサイズが異なる画像が作成されます。

「画像URL」を確認してみると、
「”http://・・・猫2匹-150×150.jpg”」
と「150×150」となっています。

ということは、サイズを指定しなくても
「150×150」のサイズの画像が
貼り付けられているということになります。

つまり、サイズを変更する時以外は
widthとheightの入力は必要がないということです。

class=”alignnone size-thumbnail wp-image-2578″

次にclassの部分の意味を説明します。
 

このclass内のコードは

「alignnone」
「size-thumbnail」
「wp-image-2578」

と3つの部分に分けて考えます。
 

「alignnone」は「回り込みなし」という意味です。
 

「添付ファイルの表示設定」
→「配置」で設定している部分になります。

 

「配置＝なし」に設定する場合は、
特にタグで指定する必要はありません。

もし、「配置＝なし」以外、
つまり「回り込み」を指定したいのであれば、
以下の様なタグを追加することにより指定できます。

次に「size-thumbnail」の部分ですが、
これはどの画像サイズファイルかを示しています。

「添付ファイルの表示設定」
→「サイズ」で設定しているサイズを表現しています。

 

サイズによって以下のように表現されます。

最後に「wp-image-2578」の部分ですが、
これはWordPressが画像1つ1つに
割り当てられているナンバーを表現したものです。

特にブラウザの表示上は意味がありません。

この記述をすることによる意味は、、、
なんでしょう、、、わかりません。

自動挿入されるclass・width・heightの削除方法

上で説明したように、
基本的にwidth、height、classの自動挿入は
なくても困るものではありません。

コードを簡略化するために、
画像貼り付け時に自動挿入される
width、height、classの削除方法を紹介します。

WordPressのダッシュボード
「外観」→「テーマエディター」をクリックします。

 

「functions.php」をクリックします。

 
※functions.phpの編集は、
　FTPソフトを使用できる方のみ　行ってください。
　functions.php内で入力ミスをすると
　サイトにアクセスできなくなります。
 

「functions.php」内に以下のコードを追加します。

//▼画像貼り付け時の自動挿入タグを削除▼
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 );
	$html = preg_replace( '/class=[\'"]([^\'"]+)[\'"]/i', '', $html );
	return $html;
}
//▲画像貼り付け時の自動挿入タグを削除▲

コードを追加したら、「ファイルを更新」をクリックします。

 

以上のカスタマイズで、
画像貼り付け時にwidth、height、classが
自動挿入されなくなります。
 

このカスタマイズをした後は、
画像貼り付け時に配置を設定しても反映されません。

もし回り込みの指定をしたい場合は、
自分でタグを入力する必要がありますので
注意してください。