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')
);
?>

わからないことは人に聞こう

プログラミングをする上で、わからないことはネットなどを使い自分で調べる技術が必要ですよね。

時間がかかっても、ある程度のことは解決できます。

しかし、どうしても答えにたどり着けなかったり、探す時間が惜しいときもあります。

そこでオススメなのが無料登録でプログラミングに関する質問ができるテラテイルです。

質問の投稿にコードも投稿できるので、自分のコードを投稿して問題のある箇所を指摘してもらうことができます。

プログラマーには、自分で探す技術も必要ですが、人に聞く技術は更に重要です。

登録無料で質問できますので、テラテイルで質問する力を磨いてみましょう！

今すぐテラテイルで質問する

おわりに

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

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