WordPressの画像挿入時にwidthとheight指定が入らないようにする

きっかけはいつもTwitter。

YUKIさんからの、おたすけツイートを見かけたので、WordPressのカレンダーのthにclassを追加するコード（日本語限定）に続き、頑張ってみました。

後で知ったのですが、widthとheightを削る理由は、スマートフォン対応。なるほど画面サイズに合わせて縮小できるようにするには、サイズ指定が邪魔になるわけですね。納得。

編集画面に挿入される画像のHTMLソースは、wp-admin/includes/media.php の get_image_send_to_editor 関数で作成されています。ここの生成ロジックを追っていくと下記の通り。

1. get_image_send_to_editor 関数で、画像のリンクを含めたソースを生成。imgタグ部分の生成は、get_image_tag 関数を呼び出し
2. get_image_tag 関数で、imgタグを生成。width="nn" height="nn" 部分の生成は、image_hwstring 関数を呼び出し
3. image_hwstring 関数で、widthtとheight部分のソース生成

つまり、image_hwstring 関数で生成される部分をごっそり削れば良いことになります。
CODE 1の $hwstring を求めている部分のコードは、get_image_tag 関数内のものをそのまま利用しているので、$hwstring には、必ず$htmlの除外したい widthとheight が代入されていることになります。
これを空文字列に置換を行えば、挿入されるHTMLから幅と高さのコードがそっくり消えることになるのです。

CODE 1

function remove_hwstring_from_image_tag( $html, $id, $caption, $title, $align, $url, $size ) {
	list( $img_src, $width, $height ) = image_downsize($id, $size);
	$hwstring = image_hwstring( $width, $height );
	$html = str_replace( $hwstring, '', $html );
	return $html;
}
add_filter( 'image_send_to_editor', 'remove_hwstring_from_image_tag', 10, 7 );

[ 追記 ]
image_send_to_editor よりも、フィルタリングするコードが限定的（imgタグだけ）になる get_image_tag にフックした方が、厳密性が高まります。

当初、image_send_to_editor にフックしたのは、get_image_tag 関数が他でも利用されている可能性を考え、思わぬ所に影響が出ることを回避するためでしたが、後で調べてみると他に当該関数を呼び出している部分がないため、厳密性を高められる get_image_tag へのフックが望ましいことになります。

CODE 2は、get_image_tag へフックした場合のコード。コールバック関数の引数およびadd_filterの引数が異なります。

CODE 2

function remove_hwstring_from_image_tag( $html, $id, $alt, $title, $align, $size ) {
	list( $img_src, $width, $height ) = image_downsize($id, $size);
	$hwstring = image_hwstring( $width, $height );
	$html = str_replace( $hwstring, '', $html );
	return $html;
}
add_filter( 'get_image_tag', 'remove_hwstring_from_image_tag', 10, 6 );