WordPressのサムネイル画像のwidthとheightを変更して表示させる方法

WordPressで「the_post_thumbnail（）」関数を使うと画像のサムネイルを取得することができます。

しかし、widthとheightがそのサムネイル画像に合わせて自動で書きだされてしまい、Retinaディスプレイ等の高解像度ディスプレイでは画像がぼやけてしまいます。

一応下記のようにすればwidthとheightを指定できるのですが、サムネイルサイズを指定することができません。

<?php the_post_thumbnail( array(100, 100) ); ?>

200×200のサムネイルをwidth・heightを100で表示させたいのに、100に近い150pxのサムネイルが勝手に指定されてしまい期待通りの動きをしません。

そこでadd_filterを使い無理やりwidthとheightを変更しましたのでその方法を紹介します。

widthとheightを変更

「functions.php」にコードを追加。

add_filter( 'post_thumbnail_html', 'modify_post_thumbnail_html' ,99 ,5 );
function modify_post_thumbnail_html( $html , $post_id, $post_thumbnail_id, $size, $attr ){
  // width height を置換える
  if ( isset($attr['width'] ) ) {
    $replace_width = '/width="[0-9]+"/';
    $replaced_width = 'width="'.$attr['width'].'"';
    $html = preg_replace($replace_width, $replaced_width, $html);
  }
  if ( isset($attr['height'] ) ) {
    $replace_height = '/height="[0-9]+"/';
    $replaced_height = 'height="'.$attr['height'].'"';
    $html = preg_replace($replace_height, $replaced_height, $html);
  }
  return $html;
}

サムネイル表示させたい部分に、「the_post_thumbnail」関数を使い、widthとheightを指定する。

<?php
the_post_thumbnail('thumbnail' ,
 array('width' => '80' , 'height' => '80')
);
?>

週3日の副業で月50万

月50万稼げたら年収は600万で、普通の人以上の生活ができます。

それが週3日で稼げたら、残りの4日をどう過ごしますか？

• 自分の趣味に全力を注ぐ
• 家族との時間を増やし、子供の成長をしっかりと見守る
• 毎週海外へ旅行へ行く
• 新しいことに挑戦する
• 何もせず、のんびり自由な時間を過ごす

週の半分以上が自分の好きなことに使えるのなら、人生は楽しい物になりますよね！

週2日の休みが増えるということは、

年間104日も増え、365日のうち208日も自分の時間に使えるのです！

更に、今30歳だとして、65歳まで働いたら、

3,640日も変わってきます!!10年以上ですよ!10年!!

週2日の休みのために5日を無駄にする生活をいつまで続けますか？

週4日の自由をたった3日で稼いで、自分のために自由に時間を使う生活をはじめましょう！

週3日で50万円稼げる案件は、業界最大級の案件を保有しているレバテックフリーランスで見つけられます。

1分で完了する無料登録で、時間の自由への一歩を踏み出しましょう！

おわりに

タグごと書き出してくれる関数は便利な半面、小回りが効かなくて困ることがあります。

力技ですが、なんとか期待通りの結果が出て良かったです。