Sonika’s blog. В основном про WordPress » Посты в несколько колонок

Есть несколько способов организовать вывод постов в 2 и более колонок - т.е. посты, которые выводятся одним циклом (Loop). Все рассмотренные примеры css относятся к Теме default.

Какие файлы редактировать? Во-первых, style.css (в папке Темы). Остальное зависит от Темы, для главной страницы это home.php или index.php в папке Темы, для категории - category.php и так далее.

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

Первый способ

Источник: How to organize posts into two side-by-side columns in WordPress
Демо-блог: посты в 2 колонки и еще пример

Так выглядит стандартный цикл (он же Loop)


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

Теперь модифицируем его:

Перед началом цикла добавляем <?php $col = 1; ?>
Сразу после начала цикла дописываем <?php if ($col == 1) echo "<div class=\"row\">"; ?>
Вместо <div class="post" id="post-<?php the_ID(); ?>"> пишем <div class="post col<?php echo $col;?>" id="post-<?php the_ID(); ?>"> здесь мы добавляем класс col1 или col2 к <div class="post">
Перед <?php endwhile; else: ?> вставляем <?php if ($col == 1) echo "</div>"; (($col==1) ? $col=2 : $col=1); ?>

Получается:


<?php $col = 1; ?>
<?php if (have_posts()) : while (have_posts()) : the_post(); ?>
<?php if ($col == 1) echo "<div class=\"row\">"; ?>
  <div class="post col<?php echo $col;?>" id="post-<?php the_ID(); ?>">
  <h2><a href="<?php the_permalink() ?>" rel="bookmark" title="Постоянная ссылка <?php the_title(); ?>"><?php the_title(); ?></a></h2>
  <small><?php the_time('F j, Y') ?> <!-- by <?php the_author() ?> --></small>
  <div class="entry">
  <?php the_content('Читать дальше  »'); ?>
  </div>
  <p class="postmetadata"><?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 class="center">Не найдено</h2>
   <p class="center">Здесь ничего нет, попробуйте поискать:</p>
   <?php include (TEMPLATEPATH . "/searchform.php"); ?>
<?php endif; ?>

В в style.css своей Темы:

.row { clear: both; }
.col1 { width: 200px; float: left; padding: 0 10px; }
.col2 { width: 200px; float: right;  padding: 0 10px; }

Второй способ

Источник: достопочтенный Ю.Б., топик на форуме mywordpress и Тема hemingway


<?php if (have_posts()) : ?>
<?php $first = true; ?>
<?php while (have_posts()) : the_post(); ?>
  <div class="post <?php if($first == true) echo "first" ?>" id="post-<?php the_ID(); ?>">
  <h2><a href="<?php the_permalink() ?>" rel="bookmark" title="Постоянная ссылка <?php the_title(); ?>"><?php the_title(); ?></a></h2>
  <small><?php the_time('F j, Y') ?> <!-- by <?php the_author() ?> --></small>
  <div class="entry">
  <?php the_content('Читать дальше  »'); ?>
  </div>
  <p class="postmetadata"><?php the_category(', ') ?> | <?php edit_post_link('Редактировать', '', ' | '); ?>
  <?php comments_popup_link('Нет комментариев »', 'Один комментарий »', 'Комментариев: %'); ?></p>
  </div>
<?php $first = !$first; if ($first) echo '<br clear=all>'; ?>
<?php endwhile; else : ?>
   <h2 class="center">Не найдено</h2>
   <p class="center">Здесь ничего нет, попробуйте поискать:</p>
   <?php include (TEMPLATEPATH . "/searchform.php"); ?>
<?php endif; ?>

И в style.css дописываем:


.post { float:left; width:215px; margin:0; }
.first  { margin:0 20px 0 0; }

От первого способа отличается только тем, что получается не 2 дополнительных класса col1 и col2, а один - first, который присваивается нечетным постам (т.е. в первой колонке). И тем, что все посты флоатятся влево, а не влево-вправо, как в первом способе.

Третий способ

На самом деле можно обойтись только редактированием стилей - в том случае, если ширина и высота блока (поста) нам заранее известна. В первых двух способах мы задавали только ширину блока. Итак, пусть ширина блока будет 200 пикселей и высота 180 пикс.:

.post { display: block; float: left; width: 200px; height: 180px;
padding: 5px; margin: 0 15px 15px 0; overflow: hidden; }

Этот способ подходит, если заранее известна высота блока, например, на главную страницу (index.php или home.php) выводится не текст, а только заголовок и превью из поста. Количество получившихся "колонок" зависит от ширины основного контейнера, при использовании Темы default соответственно получится 2 колонки. Для этого способа нужно только чуть отредактировать файл style.css и не нужно копаться в остальных файлах Темы.

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

Источник: WordPress Posts in Different Columns
Организуется так же, как и первый способ с небольшой модификацией кода, вместо

<?php if ($col == 1) echo “</div>”; (($col==1) ? $col=2 : $col=1);  ?>

пишем:

<?php if ($col == 1) echo “</div>”; if($col == 1) {$col = 2;}  else { if($col != 1) { if($col == 3) {$col = 1;} if($col == 2) {$col =  3;} } } ?>

И css:

.row  { clear: both; }
.col1 { width: 130px; float: left; padding: 0 10px; }
.col2 { width: 130px; float: left;  padding: 0 10px; }
.col3 { width: 130px; float: right;  padding: 0 10px; }

UPD 03.04.2008

Бонус: плагин для разбивки одиночного поста на несколько колонок

Источник: WP Post Columns Plugin
Что делает: с помощью условных тегов {columnX} и {/columnX} позволяет разбить пост на несколько колонок - в журнальном стиле. Имеется управление из админки, где можно настроить ширину колонок и растояния между ними.

Источник: Magazine Columns
Что делает: с помощью кнопки в виз. редакторе или тега  устанавливается разделение на колонки (макс. 5 колонок). Только для WordPress 2.7 и выше.

Также смотрите подобные плагины тут:
http://wordpress.org/extend/plugins/tags/columns

Рубрика: wordpress | 02.04.2008 04:50 комментариев 70

# Lecactus (11) 02.04.2008 в 07:32

Про три колонки - то что доктор прописал.

# Lecactus (11) 02.04.2008 в 07:33

chto to s kodirovkoi na servere ?

# sonika (301) 02.04.2008 в 08:27

Это ты в неудачный момент попал - базу меняла, теперь наконец-то все в utf8, правда пришлось пожертвовать кое-где буквами И и Р :)

# graynn (1) 03.04.2008 в 18:05

Мне больше понравился третий способ - легко и элегантно. Я вот только не понял как сделать что бы эти колонки только на главной были, а остальных страницах как обычно?

# sonika (301) 03.04.2008 в 23:22

graynn, во втором абзаце написано какие файлы редактировать и даже нужная ссылка на статью про файлы Темы есть...

# graynn (2) 04.04.2008 в 00:09

sonika, либо я чего-то недопонимаю, либо ты... На сколько хватает поих познаний style.css общий для темы, если я уменьшу ширину поста в стиле, то он автоматом уменьшится и во всех страницах... Че-то я не нашел что бы стиль для первой страницы и последующих отличался... ;((

# sonika (301) 04.04.2008 в 00:40

graynn, а прописать другие классы в index.php или home.php (то есть для главной страницы) вместо div class="post" впадлу что ли ? :)))

# Alex7Kom (2) 04.04.2008 в 12:51

Пожалуйста, не делайте этого (обращаюсь я к тем, кто собрался внедрять эту «фичу»)! Это же чистое издевательство над читателем: чтобы прочесть весь текст, придется при окончании колонки искать глазами продолжение текста, а вдобавок — если текста много — еще и два раза (или больше — смотря сколько колонок) прокручивать страницу вверх-вниз. Веб — это не газета или журнал, и многие приемы «журнальной» верстки тут просто неприменимы.

# sonika (301) 04.04.2008 в 13:41

Alex7Kom, можно же не только для текста, например в первой колонке текст, а во второй - фотографии, почему нет? :)

# Alex7Kom (2) 04.04.2008 в 14:53

Ну, это совсем другое дело. :-) Я хотел обратить внимание на недопустимость именно текстовых колонок. Между прочим, я уверен, что большинству предложенный вами вариант в голову придет в последнюю очередь.

# Sergeshk (5) 27.06.2008 в 22:40

А если пост на главной выводится из произвольных полей, а не с главного как у меня на webtheme.ru, тогда как?

# sonika 28.06.2008 в 10:48

тогда как?

Что как? У вас 2 колонки. Посты не могут выводиться только из произвольных полей, у лупа (Loop) всегда есть начало и конец (см. пример в самом начале).

# Sergeshk (5) 28.06.2008 в 14:34

У меня пост на главную выводится только из произвольных полей, а то что находится в основном поле выводится в одиночный.

# sonika (301) 28.06.2008 в 16:31

Sergeshk, у Loop есть начало и конец, а то, что у Вас вместо the_content выводятся произвольные поля — это сути дела не меняет, схема разбиения постов на главной на 2-3 колонки такая же (см. начиная с «Теперь модифицируем его»).

Суть вашего вопроса в чем конкретно? Что сделали и что не получается?

# Sergeshk (5) 13.07.2008 в 11:58

Sonika, не получилось.
1. У меня нет <div class="post" id="post-">
Вместо нее
2. В стилях подгоняется ширина колонок, а мне надо подогнать высоту.
Если есть возможность помочь, буду очень признателен.

# Sergeshk (5) 13.07.2008 в 12:18

Попробовал третий способ, но никаких изменений

# Sergeshk (5) 13.07.2008 в 13:37

ох и нафлудил....вроде получилось

# macgera (4) 26.08.2008 в 16:12

Автор спасибо! Большущее! но я хочу обратиться к вам за помощью! подскажите что делать!

Вот на главной все работает! Все просто супер(по первому способу!) а на внутренних категориях так тупо ни чего не выводит! Просто не генерируется html!

# sonika 26.08.2008 в 16:42

macgera, ссылка на статью о иерархии шаблонов указана во втором абзаце! http://www.sonika.ru/blog/wordpress/template-hierarchy.htm

# macgera (4) 28.08.2008 в 06:29

Вы не поняли... я это знаю. Я говорю про другое. у меня в шаблоне category-31.php стоит разделение колонок по первому способу. Работает. а в шаблоне category-20.php не работает, хотя отличаются шаблоны только цыетовой гаммой. А на другом сайте тоже незначительно вот к примеру

http://www.uareviews.info/cat/articles/ - тут работает
а тут - http://www.uareviews.info/cat/reviews/ когда ставлю тот же код, вообще не генерируется HTML и в итоге пустая белая страница. Понимаете?

# sonika (301) 28.08.2008 в 19:03

macgera, я вас не понимаю, я вижу у вас по 2 колонки (простая и цветная) везде: на главной и в категориях, причем цветная - это сайдбар.

# macgera (4) 29.08.2008 в 14:29

Понимаете я же тоже фантаст-изобритеталь. Мне хочется что бы выглядело так, и, не зная PHP я делаю... из темы Breaking News я вытащил функцию разбить главные посты на 2 части что первые, скажем 3 поста, были с одним дизайном а вторые с другим.

код такой:


				<?php if( $loop2count

					<div class="head_post" id="post-">

						<a href="" rel="bookmark" title="Permalink: ">

<img class="newpostim" src="/files/ID, "tovpre", true); ?>.png" alt="ID, "tovpre", true); ?>" />

вторая часть

$main AND $loopcount <div class="post col" style="margin-bottom: 10px;" id="post-"> <img class="newpostim" src="/files/ID, "tovpre", true); ?>.png" alt="ID, "tovpre", true); ?>" /><a href="" rel="bookmark" title="Permalink: ">


<div class="ratinggID, "rate", true); ?>">ID, "rate", true); ?>

ну и нижнюю часть мне хотелось бы в две колонки... а оно не работает или работает не корректно. (

# macgera (4) 29.08.2008 в 14:30

Код обрезало ( в коментарии

# Nick (1) 22.09.2008 в 14:31

что-то вывод в три колонки дает внутренюю ошибку сервера ...

# Mike (2) 14.01.2009 в 14:53

А есть ли возможность сделать вывод постов на главной странице как на сайте pisali.ru ?

# sonika (301) 14.01.2009 в 15:06

А о чем эта статья по-вашему? О том, как вывести контент в 2 или 3 колонки.

# Mike (2) 14.01.2009 в 15:33

Это понятно. Но как сделать, чтобы последний пост был вверху?

# fili (1) 26.04.2009 в 06:28

Соника, посоветуй как вывести категории в 2-3-4-5 столбика???

категория 1 категория 5 категория 9
категория 2 категория 6 категория 10
категория 3 категория 7 категория 11
категория 4 категория 8 категория 12

как это реализовать ??

# sonika (301) 27.04.2009 в 19:24

http://rhymedcode.net/1001-wordpression-loops/grouped-by-category/

# BeatPort 07.07.2009 в 12:45

Я что то делаю не так. У меня при выполнении 1 способа посты просто выводяться в 2 колонки. А мне надо, что бы 1 пост самый новый не сжимался а был над ними.
Как это сделать?

# sonika (301) 13.07.2009 в 09:23

Я что то делаю не так.

все так делаете: эта запись про то, как расположить в 2 и более колонок посты, выводимые одним циклом.
Скачайте тему funny monster и возьмите код оттуда (первый пост отдельно от других)

# Макс 05.09.2009 в 14:36

Дорый день. Скажите, а как тогда можно вывести в один ряд все ссылки на категории? К примеру, wp_list_categories(’style=none’) - результата не дает((

# sonika 16.09.2009 в 13:24

Макс, для li нужно задать float:left в style.css в папке Темы.

# Сергей 30.10.2009 в 23:01

Подскажите пожалуйста в чем может быть проблема:
делаю по способу "три", все выстраивается нормально в 2 колонки, НО самый первый - чуть выше.. Вот так примерно:
- _
_ _
_ _

# Андрей (1) 11.11.2009 в 01:08

Можете кто-нибудь подсказать как по последней методике вывести не 3, а 4 колонки? Какой код нужно прописать помимо того что добавить в сss col4

# андрей 19.11.2009 в 15:12

А как организовать вывод новостей в 4 колонки. Уже весь инет обрыл, но ничего так и не нашел. Помогите, готов даже заплатить - пишите на dekan23@gmail.com

# Danila Master [WW] (2) 09.01.2010 в 05:45

В выводе постов в три колонки в коде, который нужно изменить - досадная ошибка, вследствие которой разбиение на три колонки работает не так, как задумывалось

нужно вставить перед if ($col == 1) echo ""; вот такой кусок кода: if ($col == 2) echo "";

# Danila Master [WW] (2) 09.01.2010 в 05:47

в моем комменте div порезало, но думаю и так понятно, по аналогии с исходным кодом

# Pavel 23.01.2010 в 17:59

А как выводить посты в резиновой теме, чтобы ширина нескольких колонок равномерно распределила в основном поле?

# Митрич (1) 06.02.2010 в 18:34

Вариант первый выводит посты в шахматном порядке
Вариант второй не аккуратно работает с аннотациями разной длинны (оставляет огромные пробелы между короткими аннотациями )
И вообще не понял зачем они нужены первые два варианта они по сути равны варианту третьему и не решают его проблем с разной высотой блоков
у меня спокойно работает запись в css (аналог 3-г0 варианта)

.post {
float:left;
width:47%;
margin-top: 0;
margin-right: 0;
margin-bottom: 0;
margin-left: 15px;
}

Но остаются некрасивые промежутки между разными блоками :(
как решить не знаю.....

# sonika (301) 28.06.2010 в 12:37

2Митрич

Если посты выстраиваются в "шахматном порядке", значит надо править в css ширину колонок и/или искать конфликты со свойствами других class и ID присутствующими в данном Цикле.

И если у вас посты в несколько колонок - само собой чтобы все красиво выглядело нужно думать о длине текста до  или вместо the_content использовать the_excerpt. Можно также обрезать цитату считая кол-во слов, например:

add_filter('excerpt_length','new_excerpt_length');
function new_excerpt_length() {
 return 40;
}

Но это уже не вопрос способов разбиения постов на неск. колонок.

# Master 23.07.2010 в 16:08

Здравствуйте.
Есть ли возможность отображения подобным образом (в сайд баре) в две колонки и архивов? Если Вас не затруднит - приведите пожалуйста примерчик!
Спасибо.

# Сергей 30.07.2010 в 09:50

Здравствуйте. Воспользовался примером: <?php if ($col == 1) echo "</div>"; if($col == 1) {$col = 2;} else { if($col != 1) { if($col == 3) {$col = 1;} if($col == 2) {$col = 3;} } } ?>
Все получилось, но необходимо организовать вывод в 4 колонки, или даже в 5. Подскажите, как можно это сделать. Спасибо.

# krivylkin 30.09.2010 в 11:57

sonica? спасибо большое 3 способ самый лучший

# A 24.10.2010 в 16:55

Спасибо! И первый и третий способы получились. Вот, только, пришлось немного переделать код для своей темы. :))

# FaSTeR 15.11.2010 в 17:06

Эта тема актуальна на вордпресс 3,0,1?
Делаю первым способом.
Всю голову сломал но никак не пойму как сделать 3-й пункт
Вместо <div class="post" id="post-<?php the_ID(); ?>">пишем <div class="post col<?php echo $col;?>" id="post-<?php the_ID(); ?>">здесь мы добавляем класс col1 или col2 к <div class="post">
Ну нету у меня ничего похожего даже...
Помогите разобраться пожалуйста, что нужно добавить и вместо чего?. вот код:

<?php if (have_posts()) : ?>
<?php $post = $posts[0]; // Hack. Set $post so that the_date() works. ?>
<?php /* If this is a category archive */ if (is_category()) { ?>
<div class="cat2"><h3>Архив рубрики "<?php single_cat_title(); ?>" </h3></div>
<?php /* If this is a tag archive */ } elseif( is_tag() ) { ?>
<div class="cat2"><h3>Записи с меткой "<?php single_tag_title(); ?>"</h3></div>
<?php /* If this is a daily archive */ } elseif (is_day()) { ?>
<div class="cat2"><h3>Архив за <?php the_time(' j F Y'); ?></h3></div>
<?php /* If this is a monthly archive */ } elseif (is_month()) { ?>
<div class="cat2"><h3>Архив <?php the_time(' F Y'); ?></h3></div>
<?php /* If this is a yearly archive */ } elseif (is_year()) { ?>
<div class="cat2"><h3>Архив <?php the_time('Y'); ?></h3></div>
<?php /* If this is an author archive */ } elseif (is_author()) { ?>
<div class="cat2"><h3>Архив автора <?php the_author_posts_link(); ?></h3></div>
<?php /* If this is a paged archive */ } elseif (isset($_GET['paged']) && !empty($_GET['paged'])) { ?>
<div class="cat2"><h3>Архив блога</h3></div>
<?php } ?>
<?php while (have_posts()) : the_post(); ?>
<br />
<div class="cat">
<h3><a href="<?php the_permalink() ?>" title="<?php the_title(); ?>"><?php the_title() ?></a></h3>
</div>
<div class="widget">
<span class="time">
<?php the_time('jS F Y') ?>     <?php edit_post_link('Редактировать запись', '  ', ''); ?>
</span>
<span class="aut">
Автор: <?php the_author_posts_link(); ?>
</span>
<div style="clear:both;"></div>
<?php $thumb = get_post_meta($post->ID, 'image', $single = true); ?>
<?php
if($thumb !== '') { ?>
<a href="<?php the_permalink() ?>" title="<?php the_title(); ?>"><img src="<?php bloginfo('stylesheet_directory'); ?>/timthumb.php?src=<?php echo $thumb; ?>&h=80&w=80&q=60&zc=1" alt="<?php if($thumb_alt !== '') { echo $thumb_alt; } else { echo the_title(); } ?>" class="img-left" /></a>
<?php }
else { echo ''; } ?>
<?php the_content_limit(600, ""); ?>

<span class="more">
<a href="<?php the_permalink() ?>" title="читать запись полностью <?php the_title_attribute(); ?>">Далее</a>
</span>
<div style="clear:both;"></div>
</div>
<?php endwhile; ?>

Заранее благодарю.

# Nick 06.10.2011 в 17:00

а как сделать вывод в две колонки краткое содержание постов с фото но с одной категории (только что бы не дублировались) всю голову сломал
Помогите Плиз!

# Макс 11.12.2011 в 22:54

Уважаемые профессионалы в wordpress помогите мне сделать две колонки постов вот здесь

<div id="primary">
<div id="content" role="main">

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

<?php twentyeleven_content_nav( 'nav-above' ); ?>

<?php /* Start the Loop */ ?>
<?php while ( have_posts() ) : the_post(); ?>

<?php get_template_part( 'content', get_post_format() ); ?>

<?php endwhile; ?>

<?php twentyeleven_content_nav( 'nav-below' ); ?>

<?php else : ?>

<article id="post-0" class="post no-results not-found">
<header class="entry-header">
<h1 class="entry-title"><?php _e( 'Nothing Found', 'twentyeleven' ); ?></h1>
</header>

<div class="entry-content">
<p><?php _e( 'Apologies, but no results were found for the requested archive. Perhaps searching will help find a related post.', 'twentyeleven' ); ?></p>
<?php get_search_form(); ?>
</div>
</article>

<?php endif; ?>

</div>
</div>

<?php get_sidebar(); ?>
<?php get_footer(); ?>
Не могу разобраться, что куда здесь вставить

# Дмитрий 26.12.2011 в 21:04

Огромное Вам спасибо! Сделал вывод новостей на сайте указанном в адресе, только благодаря Вам... Через стили кстати самый отличный способ !

# Dmitry (1) 16.01.2012 в 12:14

Использую тему Snow Summit. Никак не могу отредактировать под вывод записей в 2 колонки... это какой-то ужас. Цикл находится в файле loops.php, правлю там. Обновляю. Правлю стили. Обновляю.
Захожу на блог и вуаля "таким ты был таким и остался"

фиг знает что делать... кому не лень - подскажите пожалста

Посты в несколько колонок

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

Первый способ

Второй способ

Третий способ

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

Бонус: плагин для разбивки одиночного поста на несколько колонок

Русификации плагинов

Полезное:

Архив:

Счетчики:

О регистаторах доменов:

RSS и все такое: