Показать WordPress Loop в 4 колонках
Я создаю шаблон страницы архива из 4 столбцов для пользовательского типа сообщений, который я создал в WordPress, и я не могу отобразить сообщения должным образом. Я отражаю макет Visual Composer, чтобы он соответствовал остальной части моего сайта. Посмотрев на WordPress Loop сообщений в макете сетки Bootstrap 3 Я смог подобраться с помощью следующего кода:
<div class="wpb_row">
<div class="col span_12">
<?php
$args=array(
'post_type' => 'product',
'post_status' => 'publish',
'posts_per_page' => -1,
'caller_get_posts'=> 1
);
$my_query = null;
$my_query = new WP_Query($args);
if( $my_query->have_posts() ) {
echo '';
$i = 0;
while ($my_query->have_posts()) : $my_query->the_post();
if($i % 4 == 0) { ?>
<?php
}
?>
<div class="vc_span3 wpb_column column_container">
<div class="wpb_wrapper">
<a href="<?php the_permalink() ?>"><img src="<?php the_field('catalog_image'); ?>" alt="<?php the_field('product_description'); ?>" /></a>
<div class="wpb_text_column wpb_content_element ">
<div class="wpb_wrapper">
<h3><?php the_title(); ?></h3>
<h3>$<?php the_field('product_price'); ?></h3>
</div>
</div>
</div>
</div>
<?php
if($i % 4 == 0) { ?>
<?php
}
$i++;
endwhile;
}
wp_reset_query();
?>
</div>
</div>
Оба внешних div wpb_row а также col span_12 повторять каждые 4 колонки. В настоящее время он отображает сообщения в 4 столбцах, но они возвращают более 4 сообщений в строке (они перетекают в следующую строку). В идеале макет будет выглядеть так:
<div class="wpb_row">
<div class="col span_12">
<div class="vc_span3 wpb_column column_container">
<!--Post #1 Content-->
</div>
<div class="vc_span3 wpb_column column_container">
<!--Post #2 Content-->
</div>
<div class="vc_span3 wpb_column column_container">
<!--Post #3 Content-->
</div>
<div class="vc_span3 wpb_column column_container">
<!--Post #4 Content-->
</div>
</div>
</div>
<!--Repeat everything in wpd_row on next row starting at Post #5 and so on -->
Может ли кто-нибудь дать совет, как это исправить? Заранее спасибо.
Решение
У вас есть те if($i % 4 == 0) условия, но ничего не выводится внутри них. Вы должны закончить один ряд и начать другой в одном из них:
if($i % 4 == 0) { ?>
</div>
</div>
<div class="wpb_row>
<div class="col span_12>
<?php }
Также убедитесь, что вы принимаете во внимание первые / последние строки.
Другие решения
Я был в состоянии понять это. Любой, кто ищет решение для отображения пользовательского цикла типа поста в 4 строки столбцов при добавлении класса к последнему посту, если здесь возвращается нечетное количество постов, вот что мне помогло:
<div class="wpb_row">
<div class="col span_12">
<?php
$args=array(
'post_type' => 'product',
'post_status' => 'publish',
'posts_per_page' => -1,
'caller_get_posts'=> 1
);
$my_query = null;
$my_query = new WP_Query($args);
if( $my_query->have_posts() ) {
echo '';
$i = 0;
while ($my_query->have_posts()) : $my_query->the_post();
if($i % 4 == 0) { ?>
<?php
}
?>
<div class="vc_span3 wpb_column column_container <?php echo ($my_query->current_post + 1 === $my_query->post_count) && ($my_query->post_count % 2 != 0) ? ' classtoadd' : '' ?>">
<div class="wpb_wrapper">
<a href="<?php the_permalink() ?>"><img src="<?php the_field('catalog_image'); ?>" alt="<?php the_field('product_description'); ?>" /></a>
<div class="wpb_text_column wpb_content_element ">
<div class="wpb_wrapper">
<h3><?php the_title(); ?></h3>
<h3>$<?php the_field('product_price'); ?></h3>
</div>
</div>
</div>
</div>
<?php
if($i++ % 4 == 3) { ?>
</div>
</div>
<div class="wpb_row">
<div class="col span_12">
<?php
}
endwhile;
}
wp_reset_query();
?>
</div>
</div>