Посты в несколько колонок
[ ←Вернуться к стандартному виду ]
Есть несколько способов организовать вывод постов в 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
Что делает: с помощью кнопки в виз. редакторе или тега <!--columns-->устанавливается разделение на колонки (макс. 5 колонок). Только для WordPress 2.7 и выше.
Также смотрите подобные плагины тут:
http://wordpress.org/extend/plugins/tags/columns
Здравствуйте!Спасибо за статью получилось! Но есть еще вопросик… Как сделать если 1-й пост на всю, 2, 3 пополам, 4-й на всю т.д. ???Подскажите пожалуйста!Спасибо!
Использую тему Snow Summit. Никак не могу отредактировать под вывод записей в 2 колонки... это какой-то ужас. Цикл находится в файле loops.php, правлю там. Обновляю. Правлю стили. Обновляю.
Захожу на блог и вуаля «таким ты был таким и остался»
фиг знает что делать... кому не лень — подскажите пожалста
Огромное Вам спасибо! Сделал вывод новостей на сайте указанном в адресе, только благодаря Вам... Через стили кстати самый отличный способ !
Уважаемые профессионалы в 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><!-- .entry-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><!-- .entry-content -->
</article><!-- #post-0 -->
<?php endif; ?>
</div><!-- #content -->
</div><!-- #primary -->
<?php get_sidebar (); ?>
<?php get_footer (); ?>
Не могу разобраться, что куда здесь вставить
а как сделать вывод в две колонки краткое содержание постов с фото но с одной категории (только что бы не дублировались) всю голову сломал
Помогите Плиз!
Эта тема актуальна на вордпресс 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; ?>
Заранее благодарю.
Спасибо! И первый и третий способы получились. Вот, только, пришлось немного переделать код для своей темы. :))
sonica? спасибо большое 3 способ самый лучший
Здравствуйте. Воспользовался примером:
<?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. Подскажите, как можно это сделать. Спасибо.Здравствуйте.
Есть ли возможность отображения подобным образом (в сайд баре) в две колонки и архивов? Если Вас не затруднит — приведите пожалуйста примерчик!
Спасибо.
2Митрич
Если посты выстраиваются в «шахматном порядке», значит надо править в css ширину колонок и/или искать конфликты со свойствами других class и ID присутствующими в данном Цикле.
И если у вас посты в несколько колонок — само собой чтобы все красиво выглядело нужно думать о длине текста до <!--more--> или вместо the_content использовать the_excerpt. Можно также обрезать цитату считая кол-во слов, например:
Но это уже не вопрос способов разбиения постов на неск. колонок.