2016-09-26 1 views
1

У меня есть статическая карусель и вы хотите интегрировать ее в wordpress без какого-либо плагина. мой вопрос заключается в том, как добавить папку изображений, в которой все изображения карусели внутри, динамически.Как интегрировать бутстрап-карусель в wordpress

<?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 не имеет никакого значения. Как добавить/удалить изображения в карусель динамически.

ответ

1

Есть много способа создания карусели динамической,

  • вы можете создать таможенный пост типа: https://codex.wordpress.org/Post_Types, загружать изображения признаков или после мета-изображение.

  • Интегрировать варианты рамок, как: ОВС (слегка Modded Options Framework)

  • Вы также можете создавать собственные страницы настройки с WordPress Back-конец: https://codex.wordpress.org/Function_Reference/add_options_page

+0

Я предпочитаю использовать пользовательский тип записи для этого. Таким образом, вы можете установить изображение как изображение, и вы можете легко получить все необходимые данные. [Создать пользовательский тип сообщения] (https://generatewp.com/post-type/) и получить данные с помощью [get_posts()] (https://codex.wordpress.org/Template_Tags/get_posts). –

+0

@ AndyTschiersch. это просто образы. они не являются сообщениями. как я могу добавлять/удалять изображения в/из карусели. У меня есть папка с изображениями в моей теме. –

+0

Вы можете использовать для этого специальный тип сообщения, даже если вам просто нужно изображение. Это самый простой способ, потому что вам не нужно обращаться с другим каталогом. –