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 へ追加します。[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;
}
[/php] 投稿画面より画像をアップロードして記事に挿入すると、以下のようにimg タグが出力されます。
<img src=”sample.jpg” alt=”” />
メディアアップロード時のimg タグに独自のクラスを追加
今度はメディアアップロード時のimg タグに、独自のクラスを追加する方法ですが、以下の記述をご利用のテーマのfunctions.php へ追加します。[php] function my_image_class_filter($classes) {
return $classes . ‘ thumbnail’;
}
add_filter(‘get_image_tag_class’, ‘my_image_class_filter’);
[/php] 試しにthumbnail というクラスを追加してみましたが、以下のようにimg タグが出力されるようになると思います。
<img src=”sample.jpg” alt=”” width=”400″ height=”266″ class=”alignnone size-large wp-image-120 thumbnail” />
コメントを残す