ワードプレス開発 アイキャッチ画像について

Question

前提・実現したいこと

single.php(投稿ページ)で使用したアイキャッチ画像を、index.php(ホーム)の各記事に反映させたい。

発生している問題・エラーメッセージ

最新の投稿で使用したアイキャッチ画像が、ホームの記事一覧全てに反映されてします。

該当のソースコード

    <div class="new-posts">
      <?php if (have_posts()): ?>
      <div class="new-post">
      <?php 
          if (has_post_thumbnail()):
            $id = get_post_thumbnail_id();
            $img = wp_get_attachment_image_src($id, 'full');
          else:
            $img = array(get_template_directory_uri() . '/img/main.jpg');
          endif;
          ?>
        <ul>
          <?php while (have_posts()): the_post(); ?>
            <li>
              <a href="<?php the_permalink(); ?>">
              <img src="<?php echo $img[0]; ?>" alt="">
              <h3>
                <?php the_title(); ?>
              </h3>
              <?php the_excerpt(); ?>
              <div class="author">
              Posted by<?php the_author(); ?> on
              <?php the_time(get_option('date_format')); ?>
              </div>
            </a>
          </li>
          <?php endwhile; ?>
        </ul>
      </div>
      <?php else: ?>
        <p>記事が見つかりませんでした。</p>
        <? endif; ?>

試したこと

single.phpに記述した、アイキャッチ画像の設定と同じコードをindex.phpにも記述してみましたが、思うようにいきませんでした,,,,
※「該当のソースコード」で記載したものが、index.phpに記述したものになります。

拙い質問で恐れ入りますが、教えていただけると幸いです。
よろしくお願いします。

Answer 1

質問のコードでは、画像パス $img を WordPress ループの外で定義していますので、常に最初の画像が使われます。

画像パスの取得を WordPress ループの中で行えば、投稿毎の画像が取得できないでしょうか。

Comments

[glutamine]

ループ内に記述したら、各投稿ごとに画像が表示されるようになりました。
ありがとうございました！

Answer 2

<div class="new-posts"> <?php if (have_posts()): ?> <div class="new-post"> <ul> <?php while (have_posts()): the_post(); ?> <?php if (has_post_thumbnail()): $id = get_post_thumbnail_id(); $img = wp_get_attachment_image_src($id, 'full'); else: $img = array(get_template_directory_uri() . '/img/main.jpg'); endif; ?> <li> <a href="<?php the_permalink(); ?>"> <img src="<?php echo $img[0]; ?>" alt=""> <h3> <?php the_title(); ?> </h3> <?php the_excerpt(); ?> <div class="author"> Posted by<?php the_author(); ?> on <?php the_time(get_option('date_format')); ?> </div> </a> </li> <?php endwhile; ?> </ul> </div> <?php else: ?> <p>記事が見つかりませんでした。</p> <? endif; ?> </div>