Wordpress - CPT - 在循环中计数项目以显示不同的布局

Question

我创建了自定义文章类型，并且似乎无法让我的if语句正常显示不同的布局，具体取决于我的while循环中的项目数量。我想要实现的是检查设置了多少个CPT，并根据帖子数量显示不同的布局。

例如： 如果设置了一个CPT，则显示100％宽度，如果两个CPT显示50％宽度，则每列等，等等。

我已经预定义了一些CSS布局类，我在我的HTML容器中使用。

我的问题是，我不明白为什么我的if语句不显示我的列布局。我的第一个if语句是检查单个帖子何时设置且数量等于1的原因，并显示我想要的布局设计。

我不明白的是，当我在其他if语句中检查等于2的帖子数量时，我的第一篇和第二篇文章分别获取了布局类，这导致它们堆叠在彼此之上，而不是并排显示。我真的需要这个逻辑的一些帮助，以便更好地理解在wordpress中循环内容。

谢谢！

$puff_arg = array(
     'post_type' => 'Puff', 
     'posts_per_page' => 10, 
    ); 

    $puff = new WP_Query ($puff_arg); 

    if ($puff->have_posts()) { 

     while ($puff->have_posts()) { 
      $puff->the_post(); 

      $heading = get_post_meta($post->ID, 'heading'); 
      $text = get_post_meta($post->ID, 'text'); 

      // counts posts in loop and increment by 1 
      $count_posts = $puff->current_post + 1; 

      // Check amount of post to 1 
      if ($count_posts === 1) { 

       <!-- Display layout with 1 Image --> 
       <div class="col-12"> 
        <div class=""> 
         <h3><?php echo $heading[0] ? $heading[0]: ''; ?></h3> 
         <p><?php echo $text[0] ? $text[0]: ''; ?></p>      
        </div> 
       </div>    

      // Check amount of post to 2 
      } else if ($count_posts === 2) { 

       <!-- Display layout with 2 Images --> 
       <div class="col-6"> 
        <div class=""> 
         <h3><?php echo $heading[0] ? $heading[0]: ''; ?></h3> 
         <p><?php echo $text[0] ? $text[0]: ''; ?></p>      
        </div> 
       </div> 

      // Check amount of post to 3    
      } else if ($count_posts === 3) { 

       <!-- Display layout with 3 Images --> 
       <div class="col-4"> 
        <div class=""> 
         <h3><?php echo $heading[0] ? $heading[0]: ''; ?></h3> 
         <p><?php echo $text[0] ? $text[0]: ''; ?></p>      
        </div> 
       </div> 

      }           
     } 

     wp_reset_postdata(); 

    } 

Answer 1

当你怀疑这是你的循环的逻辑存在问题。 当在循环中访问Puff帖子类型的第一篇文章时，$ puff-> current_post的值将等于0（数组中的第一项）。这意味着if ($count_posts === 1) {条件将为true，并且第一篇文章的HTML将具有col-12类。 循环中的下一篇文章是第二篇文章，所以$puff->current_post将等于1.因此，第二条语句} else if ($count_posts === 2) {将为true，第二篇文章将有col-6类。 这就是为什么你的帖子不对齐的原因 - 第一个有col-12类（占100％的屏幕），而第二个有col-6类（屏幕的一半）。

解决您的问题很简单。使用WP_Query的found_posts方法确定在循环播放它们之前检索到的帖子的数量。这样你就不必检查每个职位的编号。另外，因为它似乎布局之间的唯一区别是col类，我相信你可以进一步简化你的代码。下面是它的外观：

$puff_arg = array(
     'post_type' => 'Puff', 
     'posts_per_page' => 10, 
    ); 

$puff = new WP_Query ($puff_arg); 
if ($puff->have_posts()) 
{ 
    switch ($puff->found_posts) 
    { 
     case '2': 
      $colClass = 'col-6'; 
      break; 

     case '3': 
      $colClass = 'col-4'; 
      break; 

     default: 
      $colClass = 'col-12'; 
    } 

    while ($puff->have_posts()) { 
      $puff->the_post(); 
      $heading = get_post_meta($post->ID, 'heading'); 
      $text = get_post_meta($post->ID, 'text'); 
      ?> 
      <div class="<?php echo $colClass; ?>"> 
       <div> 
        <h3><?php echo $heading[0] ? $heading[0]: ''; ?></h3> 
        <p><?php echo $text[0] ? $text[0]: ''; ?></p>      
       </div> 
      </div> 
      <?php  
    } 
} 
wp_reset_postdata(); 

Answer 2

您可以通过$wp_query->post_count或$wp_query->found_posts得到WP_Query计数。 使用post_count您可以在每个页面上获得帖子数量（例如，如果在查询中将其设置为posts_per_page，则可以使用found_posts获取数据库中存在的帖子总数。

所以在您的示例可以移动这样的：

$count = $puff->post_count; 
if ($count == 1) {echo '<div class="col-12">';} 
if ($count == 2) {echo '<div class="col-6">';} 
if ($count == 3) {echo '<div class="col-4">';} 
//main loop actions 
echo '</div>'; 

Answer 3

如果控制查询CPT的，以适应在一个12柱网（这是1，2，3，4，6或12）的数目，你可以简化这种条件方法为：

<div class="col-<?= 12/$puff->post_count ?>"> 
    <!-- Your post title and details here --> 
</div>