WordPress画像挿入時動作のカスタマイズ

投稿日:

 愛用中のWordPress。書きやすいし、気に入っている。

 しかし、記事に画像を挿入するときの動作が気に入らない。WordPressの画像の挿入機能は、タテヨコをimgタグのwidth・height両属性で書いてくる。つまり

「<img …… width=”320px” height=”240px” …… >」

……というふうに書きこんでくるのだが、これが気に入らないのである。

 これだと、ブラウザのウィンドウ・サイズなどを変更したり、モバイルや携帯で表示させたときに画像がハミ出したり、周囲の文字が収まりきらず、おかしな具合に画面が散らかったりしてしまう。リサイザブルでないわけである。ここは

「<img …… style=”width:50%;” …… >」

……等であってほしい。こういうふうであれば、ウィンドウのサイズを小さくしたブラウザで表示しようが、携帯やモバイルで表示しようが、必ず表示領域の半分の大きさで画像が表示されるわけである。

 しかし、現行のWordPressはそういうふうにはなっていないし、そういうふうにユーザ設定を追加する機能もない。

 それで、画像を挿入するときには、毎回この「<img …… width=”320px” height=”240px” …… >」というタグの「width……height……」というところを手で削り、「style=”width:50%;”」と書き直していた。

 しかし、毎回毎回、じつに面倒臭い。

 そこで、意を決してカスタマイズした。

 この「width」「height」を書き込んでいるのは、WordPressインストールディレクトリの下の「wp-admin/includes/media.php」というファイルである。

 このファイルの末尾に、次のように書き加える。

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, ' style="width:50%;" ', $html );
	return $html;
}
add_filter( 'image_send_to_editor', 'remove_hwstring_from_image_tag', 10, 7 );

 これで、邪魔くさいwidth・heightの代わりに幅50%のスタイルが無理やり書き込まれる。

 この改良に当たり、次のサイトを参考にさせていただいた。

 ただ、これをやっちまうと、WordPressのアップデートがあるたびにこのファイルをカスタマイズしなければならないわけである。うーん。……ま、いいか。

コメントを残す

このサイトはスパムを低減するために Akismet を使っています。コメントデータの処理方法の詳細はこちらをご覧ください