メディアアップロード時のimg タグからwidth などを除去する方法と、独自のクラスを追加する方法

WordPress で記事の投稿画面から画像をアップロードして本文に挿入する際、自動で付与されるimg タグのwidth、height、class 属性を削除する方法と、class=”thumbnail” などの独自のクラスを追加する方法のご紹介です。

メディアアップロード時のimg タグ

投稿画面で「メディアを追加」ボタンをクリックして画像のアップロードを行い、記事への挿入をすると以下のようなimg タグが出力されます。

<img src=”sample.jpg” alt=”” width=”400″ height=”266″ class=”alignnone size-large wp-image-120″ />

src 属性の他、alt やwidth、height、class などが自動で出力されますが、ご利用のテーマのfunctions.php を編集することで、width、height、class 属性を消したり、独自のクラスを付与することが可能になります。

メディアアップロード時のimg タグからwidth、height、class を消す

まずはメディアアップロード時のimg タグからwidth、height、class の属性を消してしまう方法ですが、以下の記述をfunctions.php へ追加します。

add_filter( 'post_thumbnail_html', 'remove_width_attribute', 10 );
add_filter( 'image_send_to_editor', 'remove_width_attribute', 10 );

function remove_width_attribute( $html ) {
   $html = preg_replace( '/(width|height)="\d*"\s/', "", $html );
   $html = preg_replace( '/class=[\'"]([^\'"]+)[\'"]/i', '', $html );
   return $html;
}

投稿画面より画像をアップロードして記事に挿入すると、以下のようにimg タグが出力されます。

メディアアップロード時のimg タグに独自のクラスを追加

今度はメディアアップロード時のimg タグに、独自のクラスを追加する方法ですが、以下の記述をご利用のテーマのfunctions.php へ追加します。

function my_image_class_filter($classes) {
	return $classes . ' thumbnail';
}
add_filter('get_image_tag_class', 'my_image_class_filter');

試しにthumbnail というクラスを追加してみましたが、以下のようにimg タグが出力されるようになると思います。

<img src=”sample.jpg” alt=”” width=”400″ height=”266″ class=”alignnone size-large wp-image-120 thumbnail” />

メディアアップロード時のimg タグからwidth などを除去する方法と、独自のクラスを追加する方法