WordPress 記事に挿入する画像にclassを追加する方法

2016.05.20 2024.08.20

WordPress

WordPressの記事に挿入する画像にclassを追加する方法です。

WordPressの記事に挿入する画像にclassを追加する方法

WordPressで記事中に「メディアを追加」から画像を挿入すると img の class はこんな感じですね。


class="alignnone size-medium wp-image-9"

この名前を利用してスタイルシートを記述するのもいいのですが、class を追加したい場合にちょっと困ります。というのも Bootstrap3 では、レスポンシブな画像を表示するためには「img-responsive」を必ず追加しなければなりません。

お客様側で WordPress の管理画面から記事追加とか編集されると、class なんて間違いなく付加してくれません。当たり前ですよね、筆者でも頼まれても忘れちゃうし、素人さんならできるだけ html はみたくないって感じですもんね。

となれば、挿入のタイミングで自動で付加するしかありません。

そんなわけで WordPressの記事に挿入する画像にclassを追加する方法 を紹介します。ついでに width と height も削除しちゃいましょう。

get_image_tag_classをフックする

とはいえ、WordPressのソースを直接変更してしまうとバージョンアップの時に困ったことになります。どうやってやろうかと、とりあえずWordPressのソースを見ていたら media.php に以下の記述がありました。


$class = apply_filters( 'get_image_tag_class', $class, $id, $align, $size );

これをフックしてclassを追加することにしました。function.phpに以下を追記します。


/**
 * Bootstrap用レスポンシブ表示
 */
add_filter('get_image_tag_class', function($class) {
  return $class . ' img-responsive';
});

するとこんな感じで表示されます。


class="alignnone size-medium wp-image-9 img-responsive"

これで完璧！

っと思ったら、


width="300" height="200"

って記述もあった・・・orz..

これじゃ「img-responsive」を追加しても意味がないですね。なので width と height も削除する記述を追記します。


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 );
  return $html;
}

すると、こんな感じで表示されます。


<img src="/wp-content/uploads/2016/05/noimage-300x200.jpg" alt="noimage" class="alignnone size-medium wp-image-9 img-responsive" />

ふむ、きれいにおさまった＾＾

皆さんも試してみてください。

おつかれさまでした。