Вывод постов в несколько колонок

12 сентября 2015 в 9:00 Без категории

Пример 1 – что получим на выходе:

Пример 2 – что получим на выходе:

Как 1 так и 2 способы делается с помощью функции:

[php]
<div class="main">
<?php
$counter = 1; //start counter
$grids = 3; //Grids per row
global $query_string; //Need this to make pagination work
if (have_posts()) : while (have_posts()) : the_post();
if( $counter == $grids ) :
$counter = 0; // Reset counter ?>

<div class="archiveimg">
<a href="<?php the_permalink() ?>" title="<?php the_title(); ?>"><img src="<?php echo first_post_image() ?>" alt="<?php the_title(); ?>" /></a>
<div class="post-title"><h3><a href="<?php the_permalink(); ?>" title="<?php the_title_attribute(); ?>"><?php the_title(); ?></a></h3></div>
</div>

<?php
$counter++;
endwhile;
//Pagination can go here if you want it.

endif;
wp_reset_postdata(); // Reset post_data after each loop
?>

</div>

[/php]

Код ниже добавляем в файл functions.php. Он берет первую картинку с поста и делаем её миниатюрой.

[php]
//Вывод первой картинки с поста
function first_post_image() {
global $post, $posts;
$first_img = ”;
ob_start();
ob_end_clean();
$output = preg_match_all(‘/<img.+src=[\’"]([^\’"]+)[\’"].*>/i’, $post->post_content, $matches);
$first_img = $matches [1] [0];
if(empty($first_img)){
$first_img = "/wp-content/themes/hypershot/images/demo-content.jpg";
// укажите путь к изображению, которое будет выводится по умолчанию.
}
return $first_img;
}

[/php]

В графе – $grids = 3; //Grids per row – указываем нужное число колонок.
В графе – col-3 – указываем класс, с помощью которого мы и делаем колонки. Прописывал так:

[php]

.col-3 {
width: 32.33%;
float: left;
margin-right: 1%;
}
.col-3:last-child {
margin-right:0%;
width: 33.33%;
}

[/php]

В графе – mybock – прописан класс, который отвечает за выравнивание постов по высоте. Дополнительно требуется подключение скриптов (jquery подключайте если не подключен ):

Стандартный код

[php]

<div id="gridcontainer">
<?php
$counter = 1; //start counter

$grids = 2; //Grids per row

global $query_string; //Need this to make pagination work

/*Setting up our custom query (In here we are setting it to show 12 posts per page and eliminate all sticky posts) */
query_posts($query_string . ‘&caller_get_posts=1&posts_per_page=12’);

if(have_posts()) : while(have_posts()) : the_post();
?>
<?php
//Show the left hand side column
if($counter == 1) :
?>
<div class="griditemleft">
<div class="postimage">
<a href="<?php the_permalink(); ?>" title="<?php the_title_attribute(); ?>"><?php the_post_thumbnail(‘category-thumbnail’); ?></a>
</div>
<h2><a href="<?php the_permalink(); ?>" title="<?php the_title_attribute(); ?>"><?php the_title(); ?></a></h2>
</div>
<?php
//Show the right hand side column
elseif($counter == $grids) :
?>
<div class="griditemright">
<div class="postimage">
<a href="<?php the_permalink(); ?>" title="<?php the_title_attribute(); ?>"><?php the_post_thumbnail(‘category-thumbnail’); ?></a>
</div>
<h2><a href="<?php the_permalink(); ?>" title="<?php the_title_attribute(); ?>"><?php the_title(); ?></a></h2>
</div>
<div class="clear"></div>
<?php
$counter = 0;
endif;
?>
<?php
$counter++;
endwhile;
//Pagination can go here if you want it.
endif;
?>
</div>

[/php]

Исходный код будет выглядеть так:

[php]

<div id="gridcontainer">
<div class="griditemleft">
<div class="postimage"> Post Image</div>
<h2>Post Title</h2>
</div>
<div class="griditemright">
<div class="postimage"> Post Image</div>
<h2>Post Title</h2>
</div>
<div class="clear"></div>
</div>

[/php]

Стили к стандартному коду:

[php]

#gridcontainer{margin: 20px 0; width: 100%; }
#gridcontainer h2 a{color: #77787a; font-size: 13px;}
#gridcontainer .griditemleft{float: left; width: 278px; margin: 0 40px 40px 0;}
#gridcontainer .griditemright{float: left; width: 278px;}
#gridcontainer .postimage{margin: 0 0 10px 0;}

[/php]

[php]

<!– jQuery library (served from Google) –>
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.9.0/jquery.min.js"></script>

<!– Скрипт отвечает за выравнивание постов по высоте –>

Equal Height Blocks in Rows

It’s been modified into a function called at page load and then each time the page is resized. One large modification was to remove the set height before each new calculation. */

equalheight = function(container){

var currentTallest = 0,
currentRowStart = 0,
rowDivs = new Array(),
$el,
topPosition = 0;
$(container).each(function() {

$el = $(this);
$($el).height(‘auto’)
topPostion = $el.position().top;

if (currentRowStart != topPostion) {
for (currentDiv = 0 ; currentDiv < rowDivs.length ; currentDiv++) {
rowDivs[currentDiv].height(currentTallest);
}
rowDivs.length = 0; // empty the array
currentRowStart = topPostion;
currentTallest = $el.height();
rowDivs.push($el);
} else {
rowDivs.push($el);
currentTallest = (currentTallest < $el.height()) ? ($el.height()) : (currentTallest);
}
for (currentDiv = 0 ; currentDiv < rowDivs.length ; currentDiv++) {
rowDivs[currentDiv].height(currentTallest);
}
});
}

$(window).load(function() {
equalheight(‘.main .mybock’);
});

$(window).resize(function(){
equalheight(‘.main .mybock’);
});

</script>

[/php]

В графе main – указан стиль, внутри которого будет ровнять блоки по высоте.

Выводим посты из произвольных таксономий

[php]

<?php
$args = array(
‘tax_query’ => array(
array(
‘taxonomy’ => ‘products-category’,
‘field’ => ‘slug’,
‘terms’ => array( ‘katalog’ )
),
),
‘post_type’ => ‘products’
);
?>

[/php]

Где – katalog – название произвольной рубрики в новой таксономии.
А – products-category – название таксономии