WordPress的Bootstrap旋轉木馬指標不騎自行車

Question

我想爲Bootstrap做一個最近的帖子傳送帶。該PHP似乎是輸出正確的HTML，但由於某種原因，傳送帶不會循環。

<div class="col-sm-6 col-md-9"> 
    <div class="section-title"> 
     <h1>Most Recent Post</h1> 
    </div> 
    <?php 
     // Get posts (tweak args as needed) 
     $i=0; 
     $incNum = 0; 
     $args = array(
         'post_type'  => 'post', 
         'posts_per_page' => 4, 
         'orderby' => "date", 
         'order' => "desc" 
        ); 
     $posts = get_posts($args); 
    ?> 
    <div id="recent-post-carousel" class="carousel slide" data-ride="carousel"> 
     <ol class="carousel-indicators"> 
      <?php foreach (array_chunk($posts, 4, true) as $posts) : ?> 
      <?php echo('<li data-target="#recent-post-carousel" data-slide-to="'.$incNum.'"'.($incNum == 0 ? 'class="active"':'class').'></li>'); 
      $incNum++; 
      ?> 
      <?php endforeach; ?> 
     </ol> 
     <div class="carousel-inner"> 
      <?php 
       // Get posts (tweak args as needed) 
       $i=0; 
       $incNum = 0; 
       $args = array(
           'post_type'  => 'post', 
           'posts_per_page' => -1, 
           'orderby' => "date", 
           'order' => "desc" 
          ); 
       $posts = get_posts($args); 
      ?> 
      <?php foreach (array_chunk($posts, 4, true) as $posts) : ?> 
      <div class="item <?php if ($i==0){echo 'active';}?>"> 
       <div class="row"> 
        <?php foreach($posts as $post) : setup_postdata($post); ?> 
        <div class="col-sm-6 post-fix"> 
         <div class="single-post "> 
          <div class="pull-left post-image"> 
           <a href="#"> 
            <?php the_post_thumbnail('full'); ?> 
            <i class="fa fa-angle-right"></i> 
           </a> 
          </div> 
          <div class="pull-right post-details"> 
           <p class="post-date">03 Dec 2014</p> 
           <p><?php echo $i?></p> 
           <a href="#"><h5><a href="<?php the_permalink() ?>" rel="bookmark" title="<?php the_title(); ?>"><?php the_title(); ?></a> 
          </h5></a> 
          <span>John doe</span> 
          <p><?php echo substr(get_the_excerpt(), 0,99).' [...]'; ?></p> 
         </div> 
        </div> 
       </div> 
       <?php $i++ ?> 
       <?php endforeach; ?> 
      </div> 
     </div> 
     <?php endforeach; ?> 

編輯：我現在更新它它的工作原理，但有重複的帖子得到兩次更有效的方法？

Answer 1

不需要循環兩次，請嘗試以下方法。

方法使用

wp_get_recent_posts

wp_get_attachment_url

get_post_thumbnail_id

注：額外的細節，如摘錄和日期不會添加到滑塊，將其添加爲每您的確切要求。使用WP Query而不是query_posts進行未來開發。

<div class="container"> 
    <div id="recent-post-carousel" class="carousel slide" data-ride="carousel"> 
     <?php 
     $args = array(
      'numberposts' => 10, 
      'offset' => 0, 
      'category' => 0, 
      'orderby' => 'post_date', 
      'order' => 'DESC', 
      'post_type' => 'post', 
      'suppress_filters' => true 
     ); 
     $recent_posts = wp_get_recent_posts($args, ARRAY_A); 
     // Uncomment the following lines to check output 
     // echo "<pre>"; 
     // print_r($recent_posts); 
     $postCount = count($recent_posts); 
     foreach ($recent_posts as $recent): 
      // Change to get_the_post_thumbnail if you need to get image in certain size 
      $imageUri = wp_get_attachment_url(get_post_thumbnail_id($recent['ID'])); 
      // Check if first iteration 
      if ($recent === reset($recent_posts)): ?> 
       <!-- Indicators --> 
       <ol class="carousel-indicators"> 
        <?php for ($i = 0; $i <= $postCount - 1; $i++): ?> 
         <li data-target="#recent-post-carousel" 
          data-slide-to="<?php echo $i; ?>" <?php if ($i === 0) echo 'class = "active" '; ?>> 
         </li> 
        <?php endfor; ?> 
       </ol> 
       <!-- Wrapper for slides --> 
       <div class="carousel-inner" role="listbox"> 
       <?php 
      endif; ?> 
      <div class="item <?php if ($recent === reset($recent_posts)) echo 'active'; ?>"> 
       <img src="<?php echo $imageUri; ?>" alt="Chania" width="460" height="345"> 
      </div> 
      <?php 
      // Check if last iteration 
      if ($recent === end($recent_posts)): 
       ?> 
       </div> 
       <?php 
      endif; 
     endforeach; ?> 
     <!-- Left and right controls --> 
     <a class="left carousel-control" href="#recent-post-carousel" role="button" data-slide="prev"> 
      <span class="glyphicon glyphicon-chevron-left" aria-hidden="true"></span> 
      <span class="sr-only">Previous</span> 
     </a> 
     <a class="right carousel-control" href="#recent-post-carousel" role="button" data-slide="next"> 
      <span class="glyphicon glyphicon-chevron-right" aria-hidden="true"></span> 
      <span class="sr-only">Next</span> 
     </a> 
    </div> 
</div> 

我希望這會有所幫助。