循环使用PHP和WordPress按类别组织和显示自定义帖子

我正在开发一个页面，要求我在一个手风琴风格的下拉列表中显示自定义文章类型的类别列表。类别名称将作为手风琴标题，内容将是与每个特定类别相关的帖子。下图总结了我最终将要完成的任务

我已经能够成功地检索类别名称并将它们分配给一个手风琴下拉列表，但现在发生的是，我的代码正在添加新的单元格，即使这两篇文章与相似的类别名称相关联

啊，我觉得我离得太近了！下面是我的代码到目前为止的一个片段

<div id="accordion" class="col-8" role="tablist" aria-multiselectable="true">
              <?php 
                    $args = array(
                        'post_type' => 'our_work',
                        'posts_per_page' => -1,
                        'orderby' => 'category',
                        'hide_empty' => 0,
                    );  
                    $loop = new WP_Query( $args );
                    while ( $loop->have_posts() ) : $loop->the_post();
                ?>
        <div class="card box-shadow">

            <div class="card-header" role="tab" id="<?php the_ID(); ?>">
                <h5 class="mb-0">
                    <a data-toggle="collapse" data-parent="#accordion" href="#collapse<?php the_ID(); ?>"
                        aria-expanded="false" aria-controls="collapseOne">
                        <?php
                          foreach((get_the_category()) as $category) { 
                              echo $category->cat_name . ' '; 
                          }
                        ?>
                    </a>
                </h5>
            </div>

            <div id="collapse<?php the_ID(); ?>" style="transition: all 0.5s ease 0s;" class="collapse nomnom"
                role="tabpanel" aria-labelledby="heading<?php the_ID(); ?>">
                <div class="card-block">
                    <h1><?php the_title(); ?></h1>
                    <p><?php the_Content(); ?></p>
                </div>
            </div>

        </div>
        <?php endwhile; wp_reset_query(); ?>
    </div>

编辑为使用echo。这应该是干净的，希望可以工作（未经测试）


我接受了上面的代码并对其进行了测试，但遗憾的是，它工作不正常。循环似乎在第一篇文章中挂起，然后中断。用编辑过的版本替换旧代码后，循环无法正常运行。似乎所有类别和自定义帖子都已分配给第一个手风琴项目，然后打开并显示所有内容。我真的很感谢你花时间和耐心帮助我处理这个问题@abihuniak嗯。我猜$post_cat值没有设置，我修改了代码。请检查这是否有帮助。如果没有，你能和我分享一下吗？这里有一张检查员告诉我的图片。你发现了什么。在评估检查器时，在呈现页面时，似乎没有附加ID。这是可以完成的。最好的方法是使用javascript。像这样的事情应该会给你指明正确的方向
  <?php 
   $args = array(
      'post_type' => 'our_work',
      'posts_per_page' => -1,
      'orderby' => 'category',
      'hide_empty' => 0,
   );  
  $loop = new WP_Query( $args );
  $cat = '';//set a variable to catch category
  $first = 0;
  echo '<div id="accordion" class="col-8" role="tablist" aria-multiselectable="true">';
  while ( $loop->have_posts() ) : $loop->the_post();
    $post_cat = '';
    foreach(( get_the_category() ) as $category) { 
      $post_cat = $category->cat_name . ' '; 
    }
    if($first == 0){
      $first = 1;
      $cat = $post_cat;
      echo '<div class="card box-shadow">';
      echo'<div class="card-header" role="tab" id="'.get_the_id().'">';
      echo'<h5 class="mb-0">';
      echo'<a data-toggle="collapse" data-parent="#accordion" href="#collapse'.get_the_id().'"aria-expanded="false" aria-controls="collapseOne">'.$post_cat.'</a>';
      echo'</h5>';
      echo'</div>';
      //start collapse pannel
      echo'<div id="collapse'.get_the_id().'" style="transition: all 0.5s ease 0s;" class="collapse nomnom" role="tabpanel" aria-labelledby="heading'.get_the_id().'">';
    }
    if($cat != $post_cat){
      $cat = $post_cat;
      echo'</div>';//close collapse
      echo'</div>';//close box shadow
      echo '<div class="card box-shadow">';
      echo'<div class="card-header" role="tab" id="'.get_the_id().'">';
      echo'<h5 class="mb-0">';
      echo'<a data-toggle="collapse" data-parent="#accordion" href="#collapse'.get_the_id().'"aria-expanded="false" aria-controls="collapseOne">'.$post_cat.'</a>';
      echo'</h5>';
      echo'</div>';
      //start collapse pannel
      echo'<div id="collapse'.get_the_id().'" style="transition: all 0.5s ease 0s;" class="collapse nomnom" role="tabpanel" aria-labelledby="heading'.get_the_id().'">';
    }
    echo'<div class="card-block">';
    echo'<h1>'.get_the_title().'</h1>';
    echo'<p>'.get_the_content().'</p>';
    echo'</div>';  
    if (($loop->current_post +1) == ($loop->post_count)) { 
      echo '</div>';//close collapse 
      echo '</div>';//box shadow close
    } 
  endwhile; 
  wp_reset_query();
  echo '</div>';//close accordian close
    ?>