Блог

Делимся с Вами своими знаниями и новостями

03.01.2014

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

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

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

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

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

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

1

2

3

4

5

6

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

1

2

3

4

5

6

7

8

9

10

11

12

13

14

15

16

17

18

19

20

21

22

23

24

25

26

27

28

29

30

31

32

33

34

35

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

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

<h2><a href="<?php the_permalink() ?>" rel="bookmark"><?php the_title(); ?></a></h2>

<?php the_excerpt(); ?>

</div>

</div>

<?php if ($i == $per_column) { ?>

</div>

<?php } ?>

</div>

</div>

<?php } ?>

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

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

1

2

3

4

5

6

7

8

9

10

11

12

.column {

float: left;

width: 48%;

}

.column.right {

float: right;

}

.clear {

clear: both;

height: 0;

overflow: hidden;

}

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

Метки: CSS, WordPress

Свяжитесь с нами уже сейчас

+7 (906) 272-38-19
Tel./ WhatsApp/ Viber
info@cruelten.ru
Cruelten
Cruelten

Последнее в блоге

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

Комментарии:

Рубрики

Свяжитесь с нами уже сейчас