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

きっかけはいつもTwitter。

wordpressで記事に画像を張り込むときにコードにwidthとheightが入らないようにする方法、誰か知りませんかー!!!

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から幅と高さのコードがそっくり消えることになるのです。

この記事は、jim912によって書かれたものです。
引用を行う場合は、著作権法に定める範囲にて、引用元であるSimple Colorsの出展元表示とhttp://www.warna.info/archives/700/へのリンクを必ず行って下さい。

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 );
カテゴリー: WordPressの小技 タグ: , , パーマリンク

WordPressの画像挿入時にwidthとheight指定が入らないようにする への4件のフィードバック

  1. ピンバック: 今更ですが、レスポンシブ Web デザイン(Responsive Web Design) :: デザインワークス・オンサイド

  2. ピンバック: メディアから追加した画像にwidthとheightを入れなくする方法 [wordpress] | D-31N.COMデザインスタジオ

  3. ピンバック: WordPressのレスポンシブデザインで画像サムネイルのwidthを100%に自動設定する方法 | R18ネットビジネスの稼ぎ方

  4. ピンバック: 画像を投稿に挿入するタグをカスタマイズ | データベースに接続できません

コメントを残す

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です