ループ処理中のアイキャッチ画像が、CSSで指定したサイズで表示されない。

Question

前提・実現したいこと

wordpressで独自テーマを作成中です。
現在メインループ処理でトップページに記事カード一覧を表示させようとしています。

しかし、アイキャッチ画像のみ正しく表示されないため困っています。

発生している問題

アイキャッチ画像が設定されている記事のみ、正しく表示されません。
アイキャッチ画像を設定していない記事では何事もなく表示されているという状態です。

該当のソースコード

          <?php if(have_posts()): ?>
          <?php while(have_posts()):
            the_post();?>
            <a href="<?php the_permalink(); ?>" class="content__card">

              <?php 
              if(has_post_thumbnail()){
                the_post_thumbnail( 'thumbnail', array('class' => 'content__card-img'));
              }else{
              echo '<img src="' . esc_url(get_template_directory_uri()) . '/img/no-image.jpeg" alt="no-image" class="content__card-img">';
              }
              ?>

              <div class="content__card-description">
                <div class="content__card-meta">
                  <div class="content__card-category"><?php $cat = get_the_category(); $cat = $cat[0]; { echo $cat->cat_name; } ?></div>
                  <time class="content__card-time" datetime="<?php the_time('c'); ?>"><?php the_time('Y-m-d'); ?></time>
                </div>
                <h2 class="content__card-h2"><?php the_title(); ?></h2>
                  <p class="content__card-excerpt-p"><?php the_excerpt(); ?></p>
              </div>
            </a>

          <?php endwhile; ?>
          <?php endif; ?> 

試したこと

functions.phpに

add_filter( 'post_thumbnail_html', 'custom_attribute' );
function custom_attribute( $html ){
$html = preg_replace('/(width|height)="\d*"\s/', '', $html);
return $html;
}
でstyle属性のサイズ指定を削除しましたが、効果がありませんでした。

補足情報

必要情報は全てお伝えしたつもりですが、足りない情報があれば都度、お答えさせていただきます。

Comments

[madone99]

試したサイズはthumbnailのみでしょうか？

[nnn_syo_nnn]

the_post_thumbnail()のパラメータはthumbnailしか試していません。
サイズ指定をしてしまった場合、レスポンシブに対応できなくなると思ったので。

[nnn_syo_nnn]

先ほど、the_post_thumbnail( array(300 , 200));と書き換えて試してみたのですが、レスポンシブに対応できず、レイアウト崩れが発生してしましました。
そのため、class指定でレスポンシブに対応させようとしているのですが、うまくできずに困っています。

Answer 1

<?php if(has_post_thumbnail()){ the_post_thumbnail( 'array()', array('class' => 'content__card-img')); }else{ echo '<img src="' . esc_url(get_template_directory_uri()) . '/img/no-image.jpeg" alt="no-image" class="content__card-img">'; } ?>

とように記述することで解決しました。
たくさんの解決方法を提示していただき、とても助かりました。
ありがとうございました。

Answer 2

キーワードではなく、直接配列でサイズ指定したらどうでしょう？

//array内の数値は適当に
the_post_thumbnail([150, 150],[]);

Comments

[nnn_syo_nnn]

ご返答ありがとうございます！
サイズ指定にした場合、レスポンシブの際にレイアウト崩れが発生してしまいます・・・
そのため。SCSSで指定したサイズに対応させたいのですが、その方法が分からず（また他に良い方法があるのかもしれないのですが、ググっても良い方法が見つからなかったので）作業が詰まっています。

[madone99]

'thumbnail'でもwidth,heightは出力された気がするんですけどね。

サイズ指定の次の配列で以下のようなclassを指定するとどうですか？

['class' => "attachment-thumbnail size-thumbnail]

[nnn_syo_nnn]

ご返答ありがとうございます！！
試してみたのですが、やはりサイズがうまく調整されず、レイアウト崩れが発生してしまいます・・・

[madone99]

そうなんですね。
そうしたらオリジナルのクラスにimportant付けるのはダメでしょうか。

.content__card-img {
display: block !important;
height: auto !important;
max-width: 100% !important;
}