ワードプレステーマを新しくすると、アイキャッチ画像（記事のサムネイル）が勝手に切り取られてしまうので、元画像（の縦横比）に直したい

Question

前提・起きている現象

現在、サイトをリニューアル実行中です。
新しいテーマに切り替えたところ、縦横比が勝手に切り取られ、
横長のアイキャッチ画像（投稿記事のサムネイル）になってしまいました。
具体的には
従来750×500px　⇒　新テーマ670×300
※横比はただの縮小のようですが、タテが勝手に300pxに切り取られているようです

自分なりに調べたこと

新しく使用したテーマはこちらです
https://jin-demo.jp/demo-1/
が、デモサイトはタテが300pxに切り取られたような形跡はありません。

おそらく自分のサイトのどこかに、何かしら設定ミスがあるのかと想像します。
が、今まで（旧テーマ）は750×500pxで、ちゃんと元画像の縦横比そのままの縮小が表示されていました。

考えられる原因

上記から、テーマ以外の部分、いわゆる「ワードプレス」としての自分のサイト設定が
何かしら原因を起こしているのでは？、というところまで行きつきました。

が、ワードプレスのどの部分がアイキャッチ（サムネイル）を司るのかがよくわかっていないので
そのあたりのアドバイスをいただけると助かります。

補足情報（FW/ツールのバージョンなど）

バージョン 5.2.3

Answer 1

既存のテーマの仕様に基づく画像サイズを変えるのはいいやり方ではないですが
ソースを追っかけていけばwp_get_attachment_image_srcか
the_post_thumbnailに類するものに行き当たるはずなので
そこの$sizeの引数をlargeなりに書き換えれば元の縦横比の画像が表示されるでしょう

既存テーマをカスタマイズする時は後々
レイアウト崩れとかの修正に追われる可能性を覚悟した方がいいです

やる時は子テーマで

Answer 2

テーマのドキュメントを確認したところ、仕様のようです。

https://jin-theme.com/manual/eyecatch-img/

JINではアップロードしてもらった画像を、16:9の比率になるよう自動トリミングするようになっています。そのため横幅が760px以上の画像をいれてもらえると綺麗に入ります（縦は自動で切り取られます。）

横幅を760px以上とするか、テーマ内を編集することで回避する方法もあるかもしれませんが、まずは、ご質問への回答としてはテーマの仕様によって切り取られていますということになります。

Comments

[mifomifo]

ありがとうございます。なるほど、テーマ仕様なんですね。これでひとまず、根本的な問題は解決しました！

しかし
>横幅を760px以上

１）自分の画像は、横4400×タテ3000で、その基準はクリアしている
２）デモサイトは、切り取られずに、ちゃんと縦も300px以上が表示されている

ということを考えると、テーマ内のどこかをイジれば、切り取られずに表示できる、という理解でいいのでしょうか？
※初めてのテーマで慣れてないだけかもしれませんが、結構、くまなくチェックしたつもりなのですが・・・。

それともCSSで自分でカスタマイズしなければいけない、ということなのでしょうか？
とにかく写真メインなので「勝手に切り取られる」のはなんとか避けたいです。涙

[nullpot]

テーマのどこをいじれば、、、というのはテーマのソースを見なければ判断がつかなく、また、こちら有償テーマのようでちょっとダウンロードして検証も難しそうで、適切に回答できなくて申し訳ないです。

[mifomifo]

ありがとうございます。
販売元のデモサイトが、高さ300px以上になっているので
テーマ自体「切られない方法があるのでは？」と、淡い期待を寄せながら、
今一度、調べなおしてみます。

Answer 3

上の方が仕様であることを説明していただいているので私からは対処方法をお教えいたします。
まずテーマフォルダの中にindex.phpというファイルがあると思います。そこにループがあると思いますのでその中のimgタグのwidth属性を編集していただけると解決するはずです。
もしなければコメントをいただければ他の解決方法をお考えいたします。

Comments

[mifomifo]

助言ありがとうございます。まさかテーマを変えてアイキャッチでこんなに悩むとは思わず申し訳ありません。index.phpを確認してみたのですが下記が全文です。これはこれで思ったのと違う感じで恐縮です。

<?php get_header(); ?>
<div id="contents">

<!--メインコンテンツ-->
<main id="main-contents" itemscope itemtype="https://schema.org/Blog">
<?php get_template_part('include/liststyle/post-list'); ?>
</main>
<?php get_sidebar(); ?>
</div>
<?php get_footer(); ?>
---------------------------------

ちなみにsingle.phpも念のため見てみましたが、はやりimgやwidthという記述はありませんでした。
cssで一元管理されているのでは？と思うのですが如何でしょうか。。。
よろしくお願いいたします。m(__)m

[kyoya0819]

すみません 忘れてました
アイキャッチはfunctions.phpの中にあります。functions.phpをご提示いただけませんか？

[mifomifo]

あーーーっ！！！ありましたありました！！
もしかしてコレですかね？？？それらしきコードが2か所ありました
↓function.php(原文まま)

【１つめ】
//アイキャッチ画像
add_theme_support( 'post-thumbnails' );
set_post_thumbnail_size(150, 150, true );

// 画像サイズを追加する
add_image_size('cps_thumbnails', 320, 180,true);
add_image_size('small_size', 640, 360,true);
add_image_size('large_size', 1280, 720,true);

【２つめ】
// post_thumbnail で出力されるimgタグのカスタマイズ
function custom_attribute( $html ){
// width height を削除する
$html = preg_replace('/(width|height)="\d*"\s/', '', $html);
return $html;
}
add_filter( 'post_thumbnail_html', 'custom_attribute' );

【３つめ】
function cps_thumb_info($info) {
global $post;
$thumbnail_id = get_post_thumbnail_id($post->ID); //アタッチメントIDの取得
$image = wp_get_attachment_image_src( $thumbnail_id, 'small_size' ); //「full」サイズのアイキャッチの情報を取得
$thumb_src = $image[0]; //url
$thumb_width = $image[1]; //横幅
$thumb_height = $image[2]; //高さ
if ($info == "url"){
echo $thumb_src;
}elseif ($info == "width"){
echo $thumb_width;
}elseif ($info == "height"){
echo $thumb_height;
}
}

[kyoya0819]

add_image_size('small_size', 640, 360,true);の値を変えてみてください。
width, heightです

[kyoya0819]

add_image_size('small_size', 750, 500, true);
でしょうか

[mifomifo]

本当に丁寧にありがとうございます。ここまで来ると対価を支払いたいくらいです。
一応、該当箇所を編集し、新規投稿もしてみたのですがやはり16:9の比率は変わらないようでした。
だいたいの原因はわかりましたし、
あまり長くなっても申し訳ないので、次の返事を最後で、締め切りとさせていただこうかと思っています。
どうぞよろしくお願いいたします。

[kyoya0819]

add_image_size('cps_thumbnails', 375, 250,true);
add_image_size('small_size', 630, 420,true);
add_image_size('large_size', 1200, 800,true);
ではどうでしょうか？
あとstyleも提示していただけませんか？

[mifomifo]

ありがとうございます！
やっぱり変わらないようでした。。。苦笑
でも、原因はわかりましたし、だいぶポイントは絞れたので、あとは自分でやれるだけやってみます！
ダメなら諦めます。。。笑

本当に丁寧な解説、感謝感謝です！！

[kyoya0819]

原因究明できずすみません。