Вывод постов в 2 колонки wordpress

Опубликовано: 02.04.2021 в категории: Вордпресс

Вывод постов в 2 колонки или более на вашем wordpress сайте, можно легко осуществить без плагина. В этой статье рассмотрим как это реализовать. Сейчас существует много тем, которые уже изначально имеют вывод постов в 2 колонки. Но что делать если тема уже установлена, настроена и вы не хотите ее менять. Или вы хотите сделать вывод постов не в две колонки, а в три или четыре.

Есть несколько решений, одно более простое, универсальное, а второе требует немного больше знаний для редактирования файлов, хотя оно открывает больше возможностей для редактирования стилей вывода постов.

Универсальный способ

Этот вариант вывода постов в две колонки осуществляется с помощью добавления к записи еще одного класса через фильтр. На деле получается очень просто вставить, сохранить и смотреть результат. Откройте файл functions.php и в конце перед знаком ?> вставляем следующий код:

Для раздела «категории»

add_filter('post_class','category_three_column_classes');
function category_three_column_classes( $classes ) {
global $wp_query;
if( is_category() ) :
$classes[] = 'three-column-post';
if( $wp_query->current_post%2 == 0 ) $classes[] = 'column-post-left';
endif;
return $classes;
}

В этой функции используется условие if( is_category() ) : которое говорит, что класс будет добавлен лишь в разделе «категории». Это значит на других страницах (index.php, search.php и т.д.) двухколоночный вывод не сработает. Можно сделать иначе, например, выводить только на главной.

Меняем…

if( is_category() ) :

на…

if( is_home() ) :

Для определенной категории

В скобках необходимо прописать ID категории

if( is_category('2') ) :

Без условия для всех страниц

add_filter('post_class','category_three_column_classes');
function category_three_column_classes( $classes ) {
global $wp_query;
$classes[] = 'three-column-post';
if( $wp_query->current_post%2 == 0 ) $classes[] = 'column-post-left';
return $classes;
}

И последние, добавляем стили в файл style.css

.three-column-post { width: 47%; float: left; margin-left: 4.9%; }
.column-post-left { clear: left; margin-left: 0; }

В три колонки

Функция легко поддается изменениям и чтобы вывести посты в три колонки или скажем в четыре, достаточно изменить число в операторе.

add_filter('post_class','category_three_column_classes');
function category_three_column_classes( $classes ) {
global $wp_query;
if( is_category() ) :
$classes[] = 'three-column-post';
if( $wp_query->current_post%3 == 0 ) $classes[] = 'column-post-left';
endif;
return $classes;
}

Стили

.three-column-post { width: 30%; float: left; margin-left: 4.9%; }
.column-post-left { clear: left; margin-left: 0; }

Способ №2

Если вы немного разбираетесь в в файловой структуре вордпресс, то этот вариант подойдет для вас. В любом файле где желаете вывод постов в 2 колонки замените код вывода поста на…

<div class="cat-colum" <?php post_class() ?> id="post-<?php the_ID(); ?>">
<div class="demopost">
   <div class="img-post">
      <a href="<?php the_permalink() ?>"><?php echo get_the_post_thumbnail( $post->ID, 'thumbnail'); ?></a>
   </div>
   <div class="topcatposti">
      <time class="datecat"><?php the_time( get_option( 'date_format' ) ); ?></time>
   </div>
   <h2><a href="<?php the_permalink() ?>" rel="bookmark"  <?php the_title(); ?>"><?php the_title(); ?></a></h2>
   <?php the_excerpt(); ?>
   <div class="postcatfooter">
      <div class="fright"><a class="readmore" href="<?php the_permalink() ?>"><?php _e( 'Далее' ); ?></a></div>
   </div>
</div>

А в файл style.css пропишите стили:

.demopost {
   background:#fff;
    box-shadow: 0 1px 2px rgba(0, 0, 0, 0.1);
    margin: 0 10px 20px 0;
    padding: 15px;
    width: 250px;
}

.cat-colum{
     background: none;
    display: inline-block;
    vertical-align: top;
}

.img-post img{
    width: 100%;
        height: auto;
    max-width: 100%;
}

.postcatfooter{
margin-top:10px;
height: 35px;
}

.datecat {
 color: #999;
 font-family: verdana;
 font-size: 15px;
}
.topcatposti {
margin:10px 0;
}

При некотором знании CSS вы легко сможете изменить стили под себя.

Ну а если идти совсем простым путем, то можете воспользоваться плагином Shortcodes Ultimate Плагин имеет еще множество функций. С его помощью вы можете с легкостью создавать вкладки, кнопки, блоки, слайдеры и карусели, вставлять адаптивные видео и многое другое.

Или установить плагины которые выводят записи сеткой: Плагин Post Grid для вывода записей вордпресс и еще один не менее интересный Плагин Content Views для вывода записей сеткой

Читайте так-же Выравнивание элементов с помощью display flex css