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へ追加します。|
1 2 3 4 5 6 7 8 |
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 src=”sample.jpg” alt=”” />
メディアアップロード時のimgタグに独自のクラスを追加
今度はメディアアップロード時のimgタグに、独自のクラスを追加する方法ですが、以下の記述をご利用のテーマのfunctions.phpへ追加します。|
1 2 3 4 |
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” />
コメント