WordPress 記事に挿入する画像にclassを追加する方法 ホームページ制作 | 墨田区

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

LINEで送る
Pocket

WordPressの記事に挿入する画像にclassを追加する方法をご紹介します。
WordPressの記事に挿入する画像にclassを追加する方法

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

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

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

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

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

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




【PR】マジか?!「アレ」してるLINEスタンプっていったい・・・


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" />

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

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


おつかれさまでした。

LINEで送る
Pocket

この記事がお役に立ちましたら シェア をお願いいたします。

コメントを残す

コメント(必須)

お名前 (必須)
メールアドレス
(アドレスは公開されません)

Trackback URL