●回答

関連記事のサムネイルを、CSSでエントリーカードのように正方形で、全て表示する事はできません。
サムネイル画像自体の比率が、9:16でトリミングされているからです。

●問題点

そもそもエントリーカードのサムネイル比率が、本来の比率ではありません。
[Cocoon設定]→[画像]→サムネイル画像は9:16となっています。（図示のようにアスペクト比が出力されている）

この為、functions.phpでカスタマイズもしくは、親テーマそのものを変更されていると思われます。
ご確認願います。

@chu-ya 

chu-ya様

ご教示いただきまして、ありがとうございます。

関連記事のサムネイルはエントリーカードのように全て表示することはできないこと、承知いたしました。

ご指摘の点につきまして、エントリーカードのサムネイル比率を正方形に変更いたしましたが、依然として、関連記事・人気記事のサムネイルは全体像が収まることはなく、object-fitも機能していないようです...

関連記事・人気記事のサムネイル写真はアスペクト比率がそれぞれ異なりますので、無駄な余白が発生してでも、1:1でも9:16の比率でも一定の枠組み内で全体を表示させることは仕様上、難しいのでしょうか。

先にも回答しましたが、関連記事のサムネイル（以下）のように、前回の比率9:16でトリミングされ、登録されています。

ｈttps://shirouto-matome.com/wp-content/uploads/2024/06/smuk179jp-300x180.jpg

●サムネイルについて

サムネイルは、画像登録時に自動生成されます。

既に登録されている画像は、比率が9:16の為、Cocoon設定を変更しても、9:16のままとなります。
ただし設定に合わせ、object-fit:cover;を用い1:1比率に合わせ表示します。

※object-fitが効かない詳細は、後述の通り。
ご自身で、サムネイル表示サイズをCSSで指定し、containとしているので、1:1にはなりません。

以下を参考にして下さい。
https://wp-cocoon.com/regenerate-thumbnails/

●object-fitについて

図示したように、ご自身で、子テーマCSSにサムネイル表示サイズ（横長）を記述しています。
また、contatinとしているので、画像はフィットしません。

@chu-ya 

chu-ya様

ご丁寧に説明いただきまして、ありがとうございます。

[Cocoon設定]→[画像]→サムネイル画像による設定するアスペクト比率が、実際に出力されるサムネイルの比率とリンクすること理解いたしました。大変勉強になりました。

この場合、設定よりサムネイル画像を1:1に変更の上、サムネイル画像を再生成すること、また自ら設定しているCSSのサムネイル表示サイズを修正することで、関連記事に正方形の画像を表示することができるかと存じます。

一方で、サムネイル比率を9:16に設定したい画像と、1：1に設定したい画像が混在している記事群をcsv importer等でまとめてアップロードしたい場合は、サムネイル比率の設定を9:16にしている時は、比率1:1にしたい画像も9:16になる、逆も然りとなるかと存じます。　

この場合の対処法としては、サムネイル設定を9:16に変更した上で、9:16にしたいサムネイルの記事のみをまとめてアップロードし、それを終えたらサムネイル設定を1:1に変更し、1:1にしたいサムネイルの記事のみをまとめてアップロードするということになりますでしょうか？

或いは、サムネイルに設定する画像をサムネイルサイズの画像ではなく、ミディアムサイズ(こちらはトリミングされることはないと理解しております)の画像に変更する等のことも可能でしょうか？

大変お手数ですが、何卒宜しくお願い申し上げます。

●回答

投稿者:: @esuzaus

↑

サムネイル比率を9:16に設定したい画像と、1：1に設定したい画像が混在している記事群

上記の運用はした事なく、曖昧な回答になる点、ご了承下さい。

サムネイルの比率は1つだけで、混在はできない仕様です。
カードによってサムネイルサイズを混在したいと言う事は仕様上、できないと思います。

元画像（アイキャッチ）が1:1で、トリミングされず全カード表示させたいなら、1:1で出力すべきです。

先の話では、エントリーカードと関連記事、人気記事のサムネイルを1:1にしたい。
と言う事なら、1:1に設定し、サムネイルを再生成すれば、事済むと思いますが？

●補足

元画像の比率に従い、必要に応じ、object-fitでトリミングしサムネイル表示させたいと言う事でしょうか？
私のサイトは、メディアには、アップロードした元画像しかありません。
functions.php、WordPress設定で、Cocoon、WordPressが生成するサムネイルを全て停止しています。
この為、Cocoon設定に関係なく、サムネイルには元画像が表示されます。
これをcssで好きなように調整しています。

●ご参考

https://gungii.com/genepic-info/

https://zbnr-hp.com/stop-thumbnail/

@chu-ya 

chu-ya様

弊方の説明がわかりづらく、大変恐縮でございます。

イメージとしては添付画像のとおりです。

サムネイルそのものの比率を混在させると言いますよりかは、サムネイル画像の枠は固定でありつつも、比率1:1の画像も9:16の画像も全て全体を表示させたいというものです。

より具体的にも申し上げますと、今回のケースでは正方形のサムネイル枠内に9:16の画像をトリミングせず、全表示させたいというものになります。

正方形の枠内に9:16の画像をobject-fitを用いて全表示させると、必然的に余白箇所も発生するものと存じますが、その点につきましては許容範囲内です。

●回答

先述の通り、トリミングせず、1:1と9:16を、サムネイル画像として混在できません。

例えば9:16と設定した場合、アイキャッチ画像300×300px(1:1)の元画像は、図示の通り、赤い部分がトリミングされ、サムネイル画像が作成されます。

ご自身のメディアフォルダー（uploadsフォルダー）を参照してみて下さい。

アイキャッチ画像を、トリミングされずサムネイル表示するなら、Cocoon設定の比率に合わせ、アイキャッチ画像を作る必要があります。

●方法

くどいですが、トリミング表示させるには、全てのアイキャッチの画像を、設定と同じ比率で作る必要があります。

1. [Cocoon設定]→[画像]→サムネイル画像を1:1に設定する。
2. 長方形のアイキャッチ画像の上下に白地を設け、1:1とする。
3. その画像に、現在の長方形のアイキャッチ画像と置き替える。

この場合、エントリーカードのサムネイルの上下に白地が表示されます。

@chu-ya 

chu-ya様

弊方が望む条件でサムネイルを表示させるには、アイキャッチ画像の作成時点で、設定と同一の比率で作成する必要がございますこと、承知いたしました。

大変勉強になりました。弊方の理解が至らぬ中で懇切丁寧にご解説いただきまして、深謝申し上げます。

現時点で投稿済みのアイキャッチを改めて作成しなおすことは大変な手間でありますため、表示方法はある程度妥協する方向で模索してみようと思います。

@chu-ya 

chu-ya様

返信が入れ違いになってしまいました。大変失礼いたしました。

弊方の望む表示方法は至極ご理解の通りでございます。わいひら様のご回答をお待ちします。

元々関連記事などに出力されている画像はトリミングされたものしかないので、画像のアスペクト比を保ったまま出力させるのであれば、元画像を使うしかないかと思います。

以下のようなコードを子テーマのfunction.phpに書いてCSSを当てる感じになるかと思います。

add_filter( 'post_thumbnail_size', function($size, $post_id){
  return 'full';
}, 10, 2);

※関連・新着・人気記事以外も全てがフルサイズ（元画像）になります。
※画像が大きすぎる場合は、add_image_sizeで画像サイズを指定して、$crop = false で新たなサムネイルサイズを定義して指定する必要があるかと思います。
※アイキャッチが指定されていないとき（いわゆるNO IMAGE）のケースには対応していません。

@yhira 

わいひら様

ご教示いただきまして、誠にありがとうございます。

頂いたコードを反映の上、CSSを調整いたしましたところ、思い通りのデザインとすることができました。

大変勉強になりました。改めまして、ありがとうございました。

検索から、このトピックにたどり着いた方向けに完成図と、実際に使われたCSSを貼っておきます。

img.related-entry-card-thumb-image.card-thumb-image.wp-post-image {
  width: 100%;
  height: 100%;
  object-fit: contain;
}