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

Question

I am developing a page that requires me to display a list of categories for a custom post type in an accordion-style dropdown. The category name will act as the accordion title, and the contents are to be the posts associated with each particular category. The image below summarizes what I would ultimately accomplish.

I've be able to successfully retrieve the category names and assign them to an accordion dropdown, but what is happening is that my code is adding new cells even though the two posts are associated with the similar category name.

Arrrrrg, I feel like i'm so close! Here's a snippet of what my code looks like so far.

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

What I suspect is going on is that I don't have my loop set up properly and is adding a new cell as a result.

I am still fairly new to working with the 'WordPress loop', so any advice would be greatly appreciated!!!

Answer 1

Edited to use echo instead. This should be cleaner and hopefully work (untested)

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