Здравствуйте. Я хочу немного переделать сайт. Сайт выполнен в виде блога, работает на WordPress. Вот шаблон генерирования главной страницы (index.php):

<?php get_header(); ?>

<div id="main">

<div id="content">

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

<h2><div class="post-title"><a href="<?php the_permalink(); ?>" title="<?php the_title_attribute(); ?>"><?php the_title(); ?></a></div></h2>

<?php if ( has_post_thumbnail()) : ?>
   <a href="<?php the_permalink(); ?>" title="<?php the_title_attribute(); ?>" >
   <?php the_post_thumbnail('my-thumb', array('class' => 'alignnone')); ?>
   </a>
 <?php endif; ?>

<div id="post-<?php the_ID(); ?>" <?php post_class(); ?>>

<?php the_excerpt(''); ?>

<div class="comm-link"><?php comments_popup_link( 'No comments yet', '1 comment', '% comments', 'comments-link', ''); ?></div>

<div class="more-link"><a href="<?php the_permalink(); ?>" title="<?php the_title_attribute(); ?>">
<?php _e('Перейти»', 'newgamer'); ?></a></div>

</div>

<div class="delimiter"></div>
<div class="linebreaker"></div>

<?php endwhile; else: ?>

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

<?php wp_link_pages(array('next_or_number'=>'next', 'previouspagelink' => '←', 'nextpagelink'=>'→')); ?>

<?php comments_template(); ?>

<h4 class="pagi">
<?php posts_nav_link(' &#183 ', '«Назад', 'Вперёд»'); ?>
</h4>

</div>

<?php get_sidebar(); ?>

</div>

<div class="delimiter"></div>

<?php get_footer(); ?>

Результатом работы кода является обычная главная страница, с записями, как в обыкновенном блоге. Я хочу понять как данный код генерирует записи на странице и переписать его так, чтобы записи шли не сверху вниз, а примерно вот так:

На сколько я понимаю записи на страницу добавляются с помощью следующего корда index.php:

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

И сразу же под этой строкой идет генерация заголовка поста:

<h2><div class="post-title"><a href="<?php the_permalink(); ?>" title="<?php the_title_attribute(); ?>"><?php the_title(); ?></a></div></h2>

Миниатюры:

<?php if ( has_post_thumbnail()) : ?>
   <a href="<?php the_permalink(); ?>" title="<?php the_title_attribute(); ?>" >
   <?php the_post_thumbnail('my-thumb', array('class' => 'alignnone')); ?>
   </a>
 <?php endif; ?>

Ну и самого поста:

div id="post-<?php the_ID(); ?>" <?php post_class(); ?>>

<?php the_excerpt(''); ?>

<div class="comm-link"><?php comments_popup_link( 'No comments yet', '1 comment', '% comments', 'comments-link', ''); ?></div>

<div class="more-link"><a href="<?php the_permalink(); ?>" title="<?php the_title_attribute(); ?>">
<?php _e('Перейти»', 'newgamer'); ?></a></div>

Чего я понять не могу. То есть, если все записи добавляются с помощью цикла:

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

с помощью функции the_post(), то для чего, тогда прописывать под этой строкой еще заголовок записи, её миниатюру и саму запись, если все это уже было добавлено с помощью функции the_post() в цикле?

Буду крайне признателен тому, кто подскажет мне, как на самом деле работает данный код и как мне переписать его, чтобы посты располагались, как на рисунке выше.