サムネイルに自動生成画像ではなく元画像を表示する方法

はじめに

以下について回答します。

サムネイルを自動生成された画像でなく、元画像を表示したい。

トップページの記事一覧などで使用されるサムネイルの画像は、自動生成されたサイズを調整されたものが表示されているかと存じます。 その設定をタイトルの通り、元画像のまま表示したいです。理由としては、正方形画像の縦をすべて表示したいためです。 サ...

wp-cocoon.com

エントリーカードでは、デフォルトでサムネイルに自動生成された320px幅の画像が使用されます。
しかし、場合によってはこの自動生成画像ではなく、元画像そのものを表示したいことがあります。

上記ではエントリーカードのみを対象としていますが、エントリーカードだけでなく、全てのサムネイルを元画像に変更します。

この記事では、この方法について説明します。

実装手順

以下のコードをfunctions.phpに追加します。

// 投稿・固定ページのアイキャッチ元画像
add_filter('post_thumbnail_html', function ($html, $post_id, $post_thumbnail_id, $size, $attr) {
  if (!is_admin()) {
    $image_url = wp_get_attachment_image_src($post_thumbnail_id, 'full');
    if ($image_url) {
      $html = '<img src="' . esc_url($image_url[0]) . '" class="card-thumb-image wp-post-image" decoding="async">';
    }
  }

  return $html;
}, 10, 5);


// カテゴリー・タグ一覧のアイキャッチ、NO IMAGE元画像
add_filter('get_image_sized_url', function ($sized_url, $url, $w, $h) {
  return $url;
}, 10, 4);

さいごに

今回紹介した方法を使えば、サムネイルとして自動生成された小さい画像ではなく、元画像をそのまま表示できます。
これにより、画像の比率を変更しても、プラグイン「Regenerate Thumbnails」でサムネイルを再生成することなく、元画像をそのまま表示できます。

テーマ全体のサムネイル画像の縦横比（アスペクト比）を変更する方法

テーマで利用されているサムネイル画像のアスペクト比を変更したい場合に一括して変更する方法です。

wp-cocoon.com