Wordpress 루프를 4 열 레이아웃으로 표시합니다.

Question

Wordpress에서 만든 맞춤 게시물 유형에 대한 4 열 아카이브 페이지 템플릿을 만들고 게시물을 제대로 표시하지 못하는 것 같습니다. 내 사이트의 나머지 부분과 일치하도록 Visual Composer의 레이아웃을 미러링합니다. Wordpress Loop posts in Bootstrap 3 grid layout보고 후 다음 코드와 가까이 할 수있었습니다 : 모두 외부 div의 wpb_row

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

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

누구든지이 문제를 해결하는 방법에 대한 조언을 제공 할 수 있습니까? 미리 감사드립니다.

Answer 1

당신은 그 조건이 if($i % 4 == 0)이지만 그 안에 아무 것도 출력되지 않습니다. 한 행을 끝내고 그 중 하나에서 다른 행을 시작해야합니다.

if($i % 4 == 0) { ?> 
     </div> 
    </div> 
    <div class="wpb_row> 
     <div class="col span_12>    
<?php } 

또한 첫 번째 행과 마지막 행을 고려해야합니다.

Answer 2

나는 그것을 알아낼 수 있었다. 지난 게시물에 홀수 개의 게시물이있는 경우 마지막 게시물에 클래스를 추가하는 동안 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>