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

[ ←Вернуться к стандартному виду ]

Печатная версия

Есть несколько способов организовать вывод постов в 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; ?>

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

  1. Перед началом цикла добавляем <?php $col = 1; ?>
  2. Сразу после начала цикла дописываем <?php if ($col == 1) echo "<div class=\"row\">"; ?>
  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">
  4. Перед <?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
Что делает: с помощью кнопки в виз. редакторе или тега <!--columns--> устанавливается разделение на колонки (макс. 5 колонок). Только для WordPress 2.7 и выше.

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


Оставить комментарий »

  1. # Артем (1) 03.02.2012 в 10:50

    Здравствуйте!Спасибо за статью получилось! Но есть еще вопросик… Как сделать если 1-й пост на всю, 2, 3 пополам, 4-й на всю т.д. ???Подскажите пожалуйста!Спасибо!

  2. # Сергей 19.02.2012 в 01:11

    Здравствуйте. Помогите реализовать вот такой вывод http://kso.16mb.com/blog.gif, а то у самого ничего не выходит.
    За ранее благодарен за ответ

  3. # Виталий (2) 16.03.2012 в 17:29

    Соника, а если надо разбиение сделать не на главной, а в архивах категорий? Там немного другой код. Сам не разберусь. Вот код:

    <?php get_header(); ?>
    <div id="container">
    <div id="main">
    <div id="single">
    <?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') ?> &nbsp; &nbsp; <?php edit_post_link('Редактировать запись', ' &nbsp;', ''); ?>
    </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; ?>&amp;h=80&amp;w=80&amp;q=60&amp;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; ?>
    <div class="wp-pagenavi"><?php if(function_exists('wp_pagenavi')) { wp_pagenavi(); } ?></div>
    </div><!--single-->
    <?php endif; ?>
    </div><!--main-->
    <?php get_sidebar(); ?>
    </div><!--container-->
    <?php get_footer(); ?>
    Помогите, пожалуйста.

  4. # Виталий (2) 16.03.2012 в 17:31

    Да, забыл сказать: надо разбить на 3 столбца.

  5. # Alex (2) 18.05.2012 в 03:19

    Hello.
    Ja izveniajus, nasol vashu statju i sdelal vsio po nej, vyshlo vsio super poka neponial cto 2 kolnki otobrazajutsa v liubom punkte, a kak sdelat ctob 2 kolonki bili tolko na glavnoj stranice?
    Alex.

  6. # Alex (2) 18.05.2012 в 03:43

    Zabil dopisat home.php u menia netu, a zamena v index.php meniaet vse stranichki..
    Alex.

  7. # Два бота (1) 17.11.2012 в 01:21

    Как сделать что-бы первый пост был во всю ширину, а остальные делились на 2 колонки ?

  8. # Valentin (1) 03.12.2012 в 15:37

    На TwentyEleven не работает... Можете помочь в настройке под эту тему? Сайт http://www.asia-market.ru.

  9. # Элина 30.01.2013 в 00:05

    Соника,
    Огромное спасибо!!
    Полдня сегодня искала способ как это сделать в категориях, спасибо Вашим советам, все получилось!
    Теперь подскажите пож, где почитать про то, чтобы вместо анонсов картинок выводились миниатюры? :)

  10. # Артем 02.05.2013 в 10:56

    Как сделать, чтобы колонки выводились только на одной определенной странице? Спасибо.

  11. # михаил (3) 04.08.2013 в 23:36

    по поводу комментария #50 использую ту же тему: решил подобный вопросс с помощью стилей, ничего помимо в коде не менял, изменил так:.hentry {
    float:right;
    margin: 0 0 3.4em;
    padding-left:10px;
    width:23%;
    увидеть как получилось можно <ahttp://intmag.kharkov.ua/%D0%B1%D0%BB%D0%BE%D0%B3.html>здесь</a>

  12. # михаил (3) 04.08.2013 в 23:38

    по поводу комментария #50 использую ту же тему: решил подобный вопросс с помощью стилей, ничего помимо в коде не менял, изменил так:
    .hentry {
    float:right;
    margin: 0 0 3.4em;
    padding-left:10px;
    width:23%;
    увидеть как получилось можно <a href="http://intmag.kharkov.ua/%D0%B1%D0%BB%D0%BE%D0%B3.html">здесь</a>

  13. # михаил (3) 04.08.2013 в 23:42

    по поводу комментария #50 использую ту же тему: решил подобный вопросс с помощью стилей, ничего помимо в коде не менял, изменил так:
    .hentry {
    float:right;
    margin: 0 0 3.4em;
    padding-left:10px;
    width:23%;
    увидеть как получилось можно здесь http://intmag.kharkov.ua/блог.html

  14. # Замкадный (3) 20.08.2013 в 14:34

    Чтоб было 4 и более столбцов подбираем ширину вашего шаблона соответственно w/n, где n - ширина шаблона, где будут категории в столбцах, а n-количество столбцов. Прописываем число w/n в качестве ширины в стилях n-количество раз.
    И в примере с тремя колонками данного поста надо подправить код if($col == 3) {$col = 1;} if($col == 2) {$col = 3;}
    на if($col == 4) {$col = 1;} if($col == 2) {$col = 3;} if($col == 3) {$col = 4;}

  15. # Замкадный (3) 20.08.2013 в 14:37

    Как вариант многоколоночного wordpress:
    <?php
    if ($col == n) { echo "</div>"; $col=1; };
    $cos++;
    ?>
    где вместо n ставим свое количество столбцов

  16. # Замкадный (3) 20.08.2013 в 14:38

    Как вариант многоколоночного wordpress:
    <?php
    if ($col == n) { echo "</div>"; $col=1; };
    $col++;
    ?>
    где вместо n ставим свое количество столбцов

  17. # Вова 27.09.2013 в 16:51

    работает но с глюком
     

  18. # Серый (1) 18.12.2013 в 23:33

    Подскажите как вывести записи в категории в 5-6 колонок и более просто в виде названий статей со ссылкой..У меня просто в категории бывает по 50 и более записей, и чтоб вывести просто в колоночки - не могу сделать..

  19. # Paffflik 28.01.2014 в 15:10

    Есть проблемы с применением 1-го способа или я что-то не так делаю.
    Я взял за основу файл page.php создал другой файл page-goods.php, который и модернизировал по первому способу + добавил код в самое начало:
    <?php
    /*
    Template Name: товар
    */
    ?>
    тем самым сделав этот файл шаблоном для wordpress.
    Но когда применяю этот шаблон ничего не меняется и контент остается так же в 1 столбец.
    Стили тоже добавил
    Помогите пожалуйста, действительно очень нужно создать шаблон для нескольких статичных страниц для вывода контента в 2 колонки

  20. # vov1033 (1) 15.10.2014 в 19:04

    отлично все работает.

Подписаться на фид.
RSS комментариев к этой записи. | TrackBack URI

Написать комментарий


Все саттелиты — в топку! Даже не сомневайтесь. Для вопросов о вордпресс не по теме поста есть два русскоязычных форума по wordpress.

[ ←Вернуться к стандартному виду ]

Печатная версия