【WordPress】アーカイブページでサムネイル画像を表示する方法【投稿画面でサムネイル未設定の場合にもデフォルト画像を表示】

<!-- サムネイル -->
<div class="post-img-wrapper">

  <?php if (has_post_thumbnail()) : ?>
    <!-- 投稿画面で設定したサムネイル画像 -->
    <?php the_post_thumbnail(); ?>    

  <?php else : ?>
    <!-- 投稿画面でサムネ未設定の場合に表示される画像 -->
    <img src="<?php echo esc_url(get_template_directory_uri() . '/image/default-thumbnail.jpg'); ?>" alt="都会の夜景" class="default-thumbnail">
  <?php endif; ?>

</div>

// サムネイル画像の枠
.post-img-wrapper {
  height: 200px;　//任意の数字に設定
  width: 100%;
  max-width: 340px;　//任意の数字に設定
  max-height: 200px;　//任意の数字に設定
  overflow: hidden;
}

// サムネイル画像
.wp-post-image, //サムネイル画像
.default-thumbnail{　//デフォルト設定のサムネイル画像（投稿画面でサムネ設定しなかった場合に表示）
  object-fit: cover;
  transition: all .6s ease;
  width: 100%;
  height: 100%;
  max-width: 340px;　//任意の数字に設定
  max-height: 200px;　//任意の数字に設定
}

// サムネイルのホバー時拡大アニメーション(オマケ)
@media (hover: hover) {
  .post_wrapper:hover .wp-post-image,
  .post_wrapper:hover .default-thumbnail{
    transform: scale(1.1);
  }
}