如何在wordpress中集成bootstrap旋轉木馬

我有一個靜態輪播，並且希望將它整合到wordpress中，而不需要任何插件。我的問題是如何將我的圖像文件夾，其中包含所有輪播圖像，動態地添加到WordPress。如何在wordpress中集成bootstrap旋轉木馬

<?php if(is_front_page()){ 
    $i=0; 
    query_posts('showposts=3&post_type=post'); 
?> 
<section id="main-slider" class="no-margin"> 
    <div class="carousel slide" data-ride="carousel"> 
     <ol class="carousel-indicators"> 
      <li data-target="#main-slider" data-slide-to="0" class="active"></li> 
      <li data-target="#main-slider" data-slide-to="1"></li> 
      <li data-target="#main-slider" data-slide-to="2"></li> 
     </ol> 
     <div class="carousel-inner"> 
     <?php if (have_posts()): while(have_posts()): the_post(); $i++; ?> 
      <?php 
       if(has_post_thumbnail()) 
        $url=wp_get_attachment_url(get_post_thumbnail_id()); 
      ?> 
      <?php if($i==1){?> 
      <div class="item active" style="background-image: url(<?php echo $url; ?>)"> 
      <?php }else{?> 
       <div class="item" style="background-image: url(<?php echo $url; ?>)"> 
        <?php }?> 
       <div class="container"> 
        <div class="row slide-margin"> 
         <div class="col-sm-6"> 
          <div class="carousel-content"> 
           <h1 class="animation animated-item-1"><?php the_title(); ?></h1> 
           <h2 class="animation animated-item-2">Fake text</h2> 
           <a class="btn-slide animation animated-item-3" href="<?php the_permalink(); ?>">Read More</a> 
          </div> 
         </div> 

         <div class="col-sm-6 hidden-xs animation animated-item-4"> 
          <div class="slider-img"> 
           <img src="images/slider/img1.png" class="img-responsive"> 
          </div> 
         </div> 

        </div> 
       </div> 
      </div><!--/.item--> 
      <?php endwhile; endif; ?> 
     </div><!--/.carousel-inner--> 
    </div><!--/.carousel--> 
    <a class="prev hidden-xs" href="#main-slider" data-slide="prev"> 
     <i class="fa fa-chevron-left"></i> 
    </a> 
    <a class="next hidden-xs" href="#main-slider" data-slide="next"> 
     <i class="fa fa-chevron-right"></i> 
    </a> 
</section><!--/#main-slider--> 
<?php } ?><?php wp_reset_query(); ?>

如您所知，$url沒有任何價值。如何動態添加/刪除圖像到輪播。

來源

2016-09-26 Steven Lury

有很多的方式來創建動態旋轉木馬，

您可以創建自定義文章類型：https://codex.wordpress.org/Post_Types，上傳特色圖片或交薈萃圖像。
整合類似的選項框架：SMOF（略改裝成選項框架）
您也可以與WordPress後臺創建自定義的設置頁面：https://codex.wordpress.org/Function_Reference/add_options_page

來源

2016-09-26 11:23:31

我更喜歡使用自定義後類型爲了這。因此，您可以將圖像設置爲精選圖像，並且可以輕鬆檢索所有需要的數據。 [生成自定義帖子類型]（https://generatewp.com/post-type/）並使用[get_posts（）]（https://codex.wordpress.org/Template_Tags/get_posts）檢索數據。 –

@AndyTschiersch。他們只是圖像。他們不是職位。我如何添加/移除圖像到/從旋轉木馬。我的主題中有一個圖像文件夾。 –

即使您只是需要圖像，您仍然可以使用自定義帖子類型。這是最簡單的方法，因爲您不必處理不同的目錄。 –

如何在wordpress中集成bootstrap旋轉木馬

回答

相關問題