Главная
Wordpress
Как вывести посты в две колонки на WordPress
  • 04 Апр 2014г
  • 4680
  • 14
  • Рубрика: Wordpress

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

Доброго времени суток!
Сегодня рассмотрим способ, с помощью которого можно вывести посты на главной в две колонки. Данный способ можно применить как к новым, так и к готовым шаблонам, правда придется полностью изменить стили вывода постов. Cуть способа в том, что он изменяет стандартный цикл на свой. То есть, код расположеный ниже можно вставлять в любые файлы темы, нде имеется цикл. Это, например, главная - index.php, страницаа вывода категорий category.php, архивы archive.php.
Структура вывода постов будет логическая, то есть слева последний пост, а справа следующий (предпоследний) и так далее. Выглядеть это будет примерно так:

1 2
3 4
5 6

и так далее..

Осуществить такой вывод нам поможет добавление счётчика для постов и присвоением им класса .one в стилях, таким образом к каждому нечётному посту будет присваиваться этот класс. И с помощью float:left; посты распределятся ровно в блоке контента.
Готовый код будет выглядеть следующим образом:

<?php if (have_posts()) : ?>
 <?php $one = true; ?>
 <?php while (have_posts()) : the_post(); ?>
 
<!-- Начало .postBox -->
 
<article class="postBox <?php if($one == true) echo "one" ?>" id="postBox-<?php the_ID(); ?>">
 
<div class="postThumb"><a href="<?php the_permalink() ?>"><?php the_post_thumbnail(); ?></a></div>
 
<h2 class="visota"><a href="<?php the_permalink() ?>"><?php the_title(); ?></a></h2>
 
<div class="info"><span><?php the_time('M') ?>.<?php the_time('j') ?>.<?php the_time('Y') ?>. / <?php if(function_exists('the_views')) { the_views(); } ?> / <?php comments_popup_link('Нет комментариев', '1 комментарий ', 'Комментариев: %'); ?></span></div>
 
<div class="textPreview">
 
<?php the_excerpt(); ?>
 
</div>
 
</article>
 
<!-- Конец .postBox -->
 
<?php $one = !$one; if ($one) echo '<br clear=all>'; ?>
 
<?php endwhile; endif; ?>

Как писал выше, его нужно вставлять вместо основного цикла, который тоже начинается:

if (have_posts()) :
...

И заканчивается

...
endwhile; endif;

Теперь добавим стили, которые и сформируют конечную структуру. Дополним файл style.css следующим кодом:

.postBox {
 float:left;
 width:300px;
 height:500px;
 margin-bottom:20px;
 }
 
.one {
 margin-right:20px;
 }

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

На этом все. Спасибо за внимание 🙂




Если Вам был полезным мой труд, можете поддержать сайт, обменяться со мной текстовыми ссылками или посмотреть рекламку, что займет 2 минуты :)


Оцените статью
  1. 5
  2. 4
  3. 3
  4. 2
  5. 1
(17 голосов, в среднем: 4.8 из 5)

Опубликовано 14 комментариев

  • linelect
    Комментариев: 1

    А как сделать в две колонки, но в одной записи с одной рубрики, а во второй колонке записи с другой рубрики?

    • Виталий
      Комментариев: 269

      Этот способ не подойдет. Как по мне тогда лучше просто сделать два блока, один прижать влево, второй вправо и потом внутри каждого тем же WP_Query вывести массивы определенных рубрик

  • Юрий
    Комментариев: 3

    День добрый! Хорошая статья! Подскажите в какое место надо вставлять код ?

    • Виталий
      Комментариев: 269

      Здравствуйте Юрий. Код вставляется там где выводится цикл или где Вам нужно. Многие ставят только на главной странице - index.php. Также это может быть, если Вам нужно, файл списка категории - category.php, архивов - archive.php и тд. Вставлять нужно, заменяя основной цикл, который у каждого выглядит по разному, но начинается и заканчивается одинаково -примерно так
      <?php if (have_posts()) : ?><?php while (have_posts()) : the_post(); ?>
      //тут другой код, вывода текста записи миниатюр и тд.
      <?php endwhile; ?>

      Если присмотритесь, он чем то похож и на тот что даю я. Если всеравно будет не понятно, отправьте мне на почту Ваш Файл главной - index.php, я помогу и Вы увидите готовый результат 🙂

  • Дмитрий
    Комментариев: 1

    а как сделать вывод двух блоков комментариев в одном посте?

    • Виталий
      Комментариев: 269

      Это как? 🙂 Не совсем понятно что именно и зачем. Вы хотите вывести комментарии в две колонки? Это как минимум неудобно для посетителей, да и вообще это что-то новенькое. Я такого еще не видел...

  • Татьяна
    Комментариев: 1

    Виталий, спасибо! Пара кликов, и все заработало, записи рубрики стали выводиться в 2 колонки:)Осталось лишь подправить css и будет вообще отлично! И еще, спасибо, что объяснили куда конкретно вставить код (заменить ...) Для меня, как для новичка, это был самый трудный момент.

  • Михаил
    Комментариев: 1

    Короче весь этот способ написан одним человеком , а опубликован на всех сайтах. Вы такие же мастера как и я . А этот способ у меня не работает. Но рабочий способ есть на форумах у реальных вебмастеров.

    • Виталий
      Комментариев: 269

      Здравствуйте, Михаил. Данным способом я пользуюсь всегда и всегда он работает. Если у Вас не получается, то скорее всего Вы допускаете элементарную ошибку и не можете ее заметить, и означает это, что мы не такие мастера как Вы:) Попробую пованговать 🙂 В коде ширина колонки 300 пикселей. Их две + отступ, то есть 300+300+20=620 пикселей. Скорее всего, в Вашей теме основной контент поуже 620 пикселей и поэтому 2 колонки не влазят.

      • Михаил
        Комментариев: 7

        Приветствую! Не знаю в чем дело, как только добавляю этот скрипт вставляю в index.php, страница перестает прогружаться, и ошибок не выдает. В чем может быть причина ?

        • Виталий
          Комментариев: 269

          Нужно отталкиваться от того, что находится в Вашем index.php. Возможно, вставляя новый код, случайно остается часть старого, что приводит к конфликту. Возможно, у вас вся страница написана на РНР, а мой код для страницы на html, потому как заключен в теги. Вариантов может быть много. Нужно смотреть. Можете написать мне на почту или в скайп, скинув ваш файл с вставленным кодом.

Добавить комментарий

Заполните поля ниже. Ваш e-mail не будет опубликован. Обязательные поля помечены *

Уважаемые пользователи! При добавлении комментариев на сайт Вам следует соблюдать правила указанные под формой отправки комментариев.

Соблюдайте добавления комментариев

Это не спам *

Нажмите, чтобы добавить код в комментарий