如何在wordpress中制作Twitter Bootstrap Accordion动态

Question

我正在尝试将博客动态加载到Twitter Bootstrap Accordian中，但我认为有些不对劲。以下是html代码

<div class="panel-group" id="accordion">
            <div class="panel panel-default">
              <div class="panel-heading">
                <h4 class="panel-title">
                  <a data-toggle="collapse" data-parent="#accordion" href="#collapseOne">
                    Article title goes here
                  </a>
                </h4>
              </div>
              <div id="collapseOne" class="panel-collapse collapse in">
                <div class="panel-body">
                  Lorem ipsum dolor sit amet, consectetur adipiscing elit. Phasellus sit amet quam augue. Lorem ipsum dolor sit amet, consectetur adipiscing elit.
                </div>
              </div>
            </div> <!-- .panel -->

            <div class="panel panel-default">
              <div class="panel-heading">
                <h4 class="panel-title">
                  <a class="collapsed" data-toggle="collapse" data-parent="#accordion" href="#collapseTwo">
                    Article title goes here
                  </a>
                </h4>
              </div>
              <div id="collapseTwo" class="panel-collapse collapse">
                <div class="panel-body">
                  Lorem ipsum dolor sit amet, consectetur adipiscing elit. Phasellus sit amet quam augue. Lorem ipsum dolor sit amet, consectetur adipiscing elit.
                </div>
              </div>
            </div> <!-- .panel -->

以下是我用于从博客类别中获取数据的代码。

<div class="panel-group" id="accordion">
                      <?php 
                           $query = new WP_QUERY(array(
                                                 'category_name'=>'blog',
                                                 'posts_per_page'=>4
                                                ));
                           $count=1;
                           $str="";
                          if( $query->have_posts()):while($query->have_posts()):$query->the_post();
                        ?>
                        <?php if($count==1):
                                 $str="One";
                              elseif($count==2):
                                  $str="Two";
                              elseif($count==3):
                                  $str="Three";  
                              elseif($count==4):
                                  $str="Four";
                              endif;  
                        ?>

                      <div class="panel panel-default">
                        <div class="panel-heading">
                          <h4 class="panel-title">
                            <a <?php if($count>=2) echo 'class="collapsed" '; ?> data-toggle="collapse" data-parent="#accordion" href="#collapse<?php echo $str;?>  ">
                              <?php the_title();

                               ?>
                            </a>
                          </h4>
                        </div>
                        <div  id="collapse<?php echo $str;?> " class="panel-collapse collapse <?php if($count==1)echo "in"; ?>">
                          <div class="panel-body">
                            <?php $excerpt = get_the_excerpt();
                                echo string_limit_words($excerpt,25);
                            ?>                          
                          </div>
                        </div>
                      </div> <!-- .panel -->


                    <?php 
                    $count++;                      
                    endwhile;
                    else:
                      echo "No blogs found";
                    endif; 
                    ?>      
      </div> <!-- .panel-group -->