php - WordPressのブログ投稿をループする

Question

WordPressサイトのブログ投稿を思い通りにループさせるのに苦労しています。

投稿をこのように見せたい

しかし、私がループしている必要がある方法のために、彼らはそのように出てきます

これは私が使用しているコードです-私は空白のテーマから始めて、そこから構築していきました

  <section class="blog-posts col-2-3 grid-pad">

    <?php while (have_posts()) : the_post(); ?>

      <article class="module">

      <li class="postWrapper" id="post-<?php the_ID(); ?>">

        <h2 class="postTitle"><a href="<?php the_permalink() ?>" rel="bookmark"><?php the_title(); ?></a></h2>
        <small><?php the_date(); ?> by <?php the_author(); ?></small>

        <div class="post"><?php the_content(__('(more...)')); ?></div>
      </li>



      <?php endwhile; ?>

    </article>

  </section>

<?php else: ?>

 <p><?php _e('Sorry, no posts matched your criteria.'); ?></p>

<?php

endif;
?>

<?php if (will_paginate()): ?>

<ul id="pagination">
  <li class="previous"><?php posts_nav_link('','','&laquo; Previous Entries') ?></li>
  <li class="future"><?php posts_nav_link('','Next Entries &raquo;','') ?></li>
</ul>

<?php endif; ?>
</div> <!--END div.grid -->
</div> <!--END div.page-wrap -->
<?php
get_footer();
?>

私はWPをかなり知っているので、ループがどのように機能するかを理解するのに苦労しています。理論的には、各ブログ投稿moduleは新しいモジュールである必要があります。私の場合、起こっているのは、各ブログ投稿が最後に作成した長いモジュールの下部に追加されていることです。

Answer 1

完全なHTML/CSSを知らなくても、これで問題が解決するかどうかを判断するのは難しいですが</article>、<?php endwhile; ?>