Вывод в два столбика постов в WordPress

Вывод в два столбика постов в WordPress довольно частое визуальное новшество на различных сайтах. В этой статье мы рассмотрим способ как это можно сделать.

Смотрится это дело тоже очень даже ничего и в некоторых своих проектах я тоже прибегаю к этому способу. Но так как мой сайт посвящен, в основном новичкам, поэтому я расскажу, кто еще не знает, как сделать так, чтобы все записи блока велись не одной сплошной лентой, а выводились в два столбика.

Итак, чтобы нам сделать такой вывод информации необходимо открыть файл, в котором происходит вывод блога, например, index.php или category.php и заменить Ваше содержимое, которое начинается с вот этой строки:

<?php if (have_posts()) { ?>

И заканчивается вот этим:

 <div class="navigation">  
              <div class="alignleft"><?php previous_posts_link('Следующие записи') ?></div>  
              <div class="alignright"><?php next_posts_link('Предыдущие записи') ?></div>  
          </div>  

    <?php } ?>

Все это нужно заменить вот на этот код:

<?php if (have_posts()) { ?>  
  <?php $i = 0; ?>  
  <?php $per_column = ceil($posts_per_page / 2); ?>  
  <?php if ($wp_query->post_count <= $posts_per_page) $per_column = ceil($wp_query->post_count / 2); ?>  

          <div class="column">  

  <?php while (have_posts()) { the_post(); $i++; ?>  

              <div class="post">  
                  <h2><a href="<?php the_permalink() ?>" rel="bookmark"><?php the_title(); ?></a></h2>  
                  <div class="date"><?php the_time('d.m.Y') ?></div>  
                  <div class="entry">  
                      <?php the_excerpt(); ?>  
                  </div>  
                </div><!-- .post -->  

      <?php if ($i == $per_column) { ?>  
          </div><!-- .column -->  

          <div class="column right">  
      <?php } ?>  

  <?php } ?>  

          </div><!-- .column -->  

          <div class="clear"></div>  

          <div class="navigation">  
              <div class="alignleft"><?php previous_posts_link('Следующие записи') ?></div>  
              <div class="alignright"><?php next_posts_link('Предыдущие записи') ?></div>  
          </div>  

    <?php } ?>

Но это еще не все. Для правильного отображения наших столбиков надо в наш CSS файл добавить следующую информацию.

.column {  
  float: left;  
  width: 48%;  
}  
.column.right {  
  float: right;  
}  
.clear {  
  clear: both;  
  height: 0;  
  overflow: hidden;  
}

А вот теперь все! Можно наслаждаться нашим новым отображением постов в два столбика.