X
Заказать услугу

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

Плагины и Шаблоны для Wordpress
  • 2018-12-11
  • 10560 просмотр

    19 комментарий

  • Дизайн и разработка сайта

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

1 2
3 4
5 6

и так далее..

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

no image
<?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 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
Проголосовало: 21, в среднем: 4.8 из 5
Читайте также
Опубликовано 19 комментариев

Добавить комментарий для Виталий Отменить ответ

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

Нажмите, чтобы добавить код в комментарий. Далее добавьте свой код внутрь тегов <code> тут код </code>
Я ознакомлен(а) с политикой конфиденциальности и даю согласие на обработку персональных данных*

Этот сайт использует Akismet для борьбы со спамом. Узнайте как обрабатываются ваши данные комментариев.