wordpressで記事を一覧で表示しているが2個目からの装飾がなくなる

Question

前提・実現したいこと

wordpressで記事をindex.phpに５つ一覧で表示させるコードを書きました。
表示はできたんですが、問題はCSSのほうで、最初の記事は装飾があるんですが、
それ以降の４つの記事は装飾がつきません。
つくようにするにはどうしたらいいでしょうか？

試したことといえば、ソースにあるようにPHPをarticleの中に入れてみましたが、
それでも結果は変わらずでした。

PHPの中にくくってyらないとダメでしょうか？

wordpressはtwentyninteenを使っています。

該当のソースコード

<article>
<h2 class="subtitle">記事一覧</h2>

<div class="box">
	<?php
$wp_query = new WP_Query();
$my_posts = array(
'post_type' => 'post',
'posts_per_page' => 5, // 表示件数の指定
'category_name' => 'kiji1', //表示したいカテゴリー名を入力
);
$wp_query->query( $my_posts );
if( $wp_query->have_posts() ): while( $wp_query->have_posts() ) : $wp_query->the_post();
?>
	<h4><a class="continue" href="<?php the_permalink(); ?>"><?php the_title(); ?></a></h4>

	<div class="post-box">
	<p><?php the_post_thumbnail('thumbnail'); ?></p><?php echo get_the_excerpt(); ?>
	</div>
	</div>
</article>
<?php endwhile; endif; wp_reset_postdata(); ?>
<a href="<?php echo get_category_link('1');?>" class="link-arch">記事一覧 ▼</a> 

article .box {
		border: solid 1px #96cdf6;
	background:#f1f8fe;
	margin-top:20px;
	margin-bottom:20px;
	padding-left:20px;
}

Answer 1

問題はCSSのほう

いいえ、PHPに問題があると思います。
詳しくないのですが、

<article>
<h2 class="subtitle">記事一覧</h2>

<div class="box">

...

if( $wp_query->have_posts() ): while( $wp_query->have_posts() ) : $wp_query->the_post();

...

    </div>
</article>
<?php endwhile; endif; wp_reset_postdata(); ?>
<a href="<?php echo get_category_link('1');?>" class="link-arch">記事一覧 ▼</a> 

とありますので、whileループの数だけ article 要素が閉じられますが、開かれるのは1度だけではないですか？
生成されたHTMLを確かめてみてはどうでしょうか。

Comments

[退会済みユーザー]

遅くなりすみません。調べてみます。ありがとうございます。

Answer 2

以下のようになるようにhtmlを組んでみてください。
boxをループ内に入れる感じです。

<article>
    <div class="box">
        記事
    </div>
    <div class="box">
        記事
    </div>
    <div class="box">
        記事
    </div>
    <div class="box">
        記事
    </div>
    <div class="box">
        記事
    </div>
</article>

Comments

[退会済みユーザー]

遅くなってすいません。入れてみます。

[退会済みユーザー]

うまくいきました。ありがとうございます。