Вывод статей в две колонки

Wordpress

Вывод статей в две колонки в разделе категории

add_filter('post_class','category_two_column_classes');
function category_two_column_classes( $classes ) {
global $wp_query;
if( is_category() ) :
$classes[] = 'two-column-post';
if( $wp_query->current_post%2 == 0 ) $classes[] = 'two-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_two_column_classes');
function category_two_column_classes( $classes ) {
global $wp_query;
$classes[] = 'two-column-post';
if( $wp_query->current_post%2 == 0 ) $classes[] = 'two-column-post-left';
return $classes;
}

А теперь правим файл стилей style.css – добавляем этот код куда-нить в самый конец документа.

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

ГДЕ … width: 47%; ширина (процентная) самих колонок. Здесь можно экспериментировать.

Безусловный вывод колонками на всех страницах — В ТРИ КОЛОНКИ

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;
}

Что забавно, эта функция легко изменяема. Достаточно поменять оперативное число (оператор) и вывод в несколько колонок будет заказан в функции…
Ну и вот примерные стили CSS

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

– всё как обычно.

вывод категорий в две колонки — способ — 2

В этом случае нужно будет кропотливее поправлять код CSS под вашу тему – тем он и сложен) Но думаю, в принципе, и тут ничего сложного нет… на первый взор))
Для начала, в том файле, который отвечает за вывод нужной вам категории, пропишите вот этот код. Теперь, в определённой (нужной вам, для вывода колонками статей) задана функция вывода …

<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>

И итог: в файл 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:15px 0;
}

на главной, категории, в поиске

if( is_category() || is_home() || is_search() ) :

Articoli correlati