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

循环使用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
        ?>
    
    本回答被题主选为最佳回答 , 对您是否有帮助呢?
    评论

报告相同问题?

悬赏问题

  • ¥15 宇视监控服务器无法登录
  • ¥15 PADS Logic 原理图
  • ¥15 PADS Logic 图标
  • ¥15 电脑和power bi环境都是英文如何将日期层次结构转换成英文
  • ¥15 DruidDataSource一直closing
  • ¥20 气象站点数据求取中~
  • ¥15 如何获取APP内弹出的网址链接
  • ¥15 wifi 图标不见了 不知道怎么办 上不了网 变成小地球了
  • ¥50 STM32单片机传感器读取错误
  • ¥50 power BI 从Mysql服务器导入数据,但连接进去后显示表无数据