dq23171
2019-05-27 16:45
浏览 69
已采纳

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

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.

Bootstrap Accordion drop-down for categories mock-up

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.

Bootstrap Accordion drop-down duplicating categories

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

  • 写回答
  • 好问题 提建议
  • 追加酬金
  • 关注问题
  • 收藏
  • 邀请回答

1条回答 默认 最新

  • dongsou0083 2019-05-27 17:15
    已采纳

    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
        ?>
    
    评论
    解决 无用
    打赏 举报

相关推荐 更多相似问题