X
  • Дизайн та розробка сайту
  • Дизайн і створення сайтів. Розробка тем для WordPress. Створення Landing Page.
  • office@gnatkovsky.com.ua
  • @vgnat
  • Написати мені
Замовити послугу

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

Приклад
  • 2024-10-30
  • 19531 переглядів

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

Доброго времени суток!

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

no image

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

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 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
Проголосовало: 27, в среднем: 4.6 из 5
Читайте також

Deprecated: Функція WP_Query викликана з аргументом, який вважається застарілим з версії 3.1.0! Вираз caller_get_posts застарілий. Використовуйте ignore_sticky_posts. in /var/www/vhosts/gnatkovsky.com.ua/gnatkovsky.com.ua/public/wp-includes/functions.php on line 6078