Вывод постов в две колонки в WordPress

Категория: HTML-верстка, Wordpress, Мой опыт

31 Август, 2010

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

Изначально в каждом блоге выводятся посты в таком порядке:

Мы реализуем следующую последовательность вывода постов:

Итак, для начала немного истории. Стандартный вывод постов задается с помощью цикла Loop, который имеет следующий код:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17

<?php if (have_posts()) : while (have_posts()) : the_post(); ?>
<div id="post-<?php the_ID(); ?>">
<h2><a href="<?php the_permalink() ?>" title="<?php the_title(); ?>"><?php the_title(); ?></a></h2>
<?php the_time('F j, Y') ?> 
<div>
<?php the_content('Далее »'); ?>
</div>
<p><?php the_category(', ') ?> | <?php edit_post_link('Редактировать', '', ' | '); ?>
<?php comments_popup_link('Нет комментариев »', 'Один комментарий »', 'Комментариев: %'); ?></p>
</div>
<?php endwhile; else : ?>
<h2>Не найдено</h2>
<p>Здесь ничего нет, попробуйте поискать:</p>
<?php include (TEMPLATEPATH . "/searchform.php"); ?>
<?php endif; ?>

Мы будем модифицировать этот цикл под наши нужды. Что мы будем делать?

Перед комментариями <!–Начало цикла Loop –> ставим следующий код:
1
<?php $col = 1; ?>
После начала цикла, на следующей строке вставляем
1
<?php if ($col == 1) echo "<div class=\"row\">"; ?>
Вместо
1
<div id="post-<?php the_ID(); ?>">

пишем следующее

1
<div class="post col<?php echo $col;?>" id="post-<?php the_ID(); ?>">

. Для чего меняем строку? Все просто. Мы добавляем возможные классы для будущих колонок. В нашем случае это col1 и col2, которые будут формироваться с помощью кода col<?php echo $col;?>.
Перед окончанием цикла, а это строка
1
<?php endwhile; else: ?>

мы дописываем php код, который будет

1
<?php if ($col == 1) echo "</div>"; (($col==1) ? $col=2 : $col=1); ?>
Ну и конечно незабываем прописать в нашем файле стилей следующие правила для наших двух колонок:
1
2
3
.row { clear: both; }
.col1 { width: 250px; float: left; }
.col2 { width: 250px; float: right; }

Вот в принципе и все. Вам осталось только разобраться и прикрутить все это к Вашему дизайну. Теперь наш цикл Loop будет выглядеть так(у каждого по своему, зависит от общего дизайна):

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18

<?php $col = 1; ?>
<?php if (have_posts()) : while (have_posts()) : the_post(); ?>
<?php if ($col == 1) echo "<div class=\"row\">"; ?>
<div id="post-<?php the_ID(); ?>">
<h2><a href="<?php the_permalink() ?>" rel="bookmark" title="<?php the_title(); ?>"><?php the_title(); ?></a></h2>
<?php the_time('F j, Y') ?> 
<div>
<?php the_content('Далее »'); ?>
</div>
<p><?php the_category(', ') ?> | <?php edit_post_link('Редактировать', '', ' | '); ?>
<?php comments_popup_link('Нет комментариев »', 'Один комментарий »', 'Комментариев: %'); ?></p>
</div>
<?php if ($col == 1) echo "</div>"; (($col==1) ? $col=2 : $col=1); ?>
<?php endwhile; else : ?>
<h2>Не найдено</h2>
<p>Здесь ничего нет, попробуйте поискать:</p>
<?php include (TEMPLATEPATH . "/searchform.php"); ?>
<?php endif; ?>

У кого возникли какие-либо вопросы не стесняйтесь спрашивайте. Я пока еще не очень силен в WordPress и программировании на php, но мне будет очень интересно пообсуждать с Вами данную тему и находить новые решения. Удачи!

Если Вам понравилась статья и Вы хотите следить за обновлениями в блоге, то подписывайтесь через RSS, становитесь моим фолоувером в TWITTER. Возможно Вы желаете получать обновления себе на мыло? Подписуйтесь на RSS2E-mail. Так же, возможно, Вы хотите разместить постовые или любые другие виды рекламы. В таком случае пишите мне на ICQ:451240340