WordPressでBootstrapを使う際、画像サイズを可変させる方法。

WordPressが出力するimgタグをそのまま使った場合、Gridシステムを使ったとしても画像サイズは変更されず横が切れて表示されてしまう。これを回避するために以下の対応を行う。

投稿記事の場合

functions.phpに以下のコードを追記する。
やってる事は、一度Wordpressが吐き出した投稿記事から「"alignnone(この箇所は任意の文字列)"」を探し出し、それを「"img-responsive"」に置き換える。
Wordpressはデフォルト記事の画像を出力する際、クラスに「alignnone」という文字列から始まる名前を付与するのでその箇所を書き換えることでレスポンシブ対応する。

add_filter('the_content', 'imgresponsive_replace');
function imgresponsive_replace ($content){
   global $post;
   $pattern = "/\"alignnone(.*?)\"/i";
   $replacement = 'img-responsive';
   $content = preg_replace($pattern, $replacement, $content);
   return $content;
}

サムネイルの場合

サムネイル出力をする箇所を以下のように変更。
サムネイルのurlを変数に格納しそれを別途imgタグを作って使う。クラスはレスポンシブ対応するよう"img-responsive"を指定する。

<?php
$image_id = get_post_thumbnail_id();
$image_url = wp_get_attachment_image_src($image_id, true);
?>
<img src="<?php echo $image_url[0]; ?>" class="img-responsive" alt="thum">