Вывод записей в 2 столбца в WordPress

05.07.2017 | Автор: Maxim Glovatsky Оставить комментарий »

Код ниже позволяет список записей/постов/новостей в WordPress разбить на 2 столбца. К примеру, если на странице выводится 9 записей, то первые 5 будут находится в первом столбце, а оставшиеся 4 — во втором.

Суть кода, добавленного к стандартному коду поста, заключается в том, чтобы в определенных местах вставить html-теги, с помощью которых через CSS оформить посты в столбцы.

<?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;
}

Добавить комментарий