2016-03-02 3 views
0

Я строю свою тему Wordpress с Bootstrap и использую карусель на своей первой странице прямо под навигационной панелью. Я нашел отличный способ прокрутки изображений здесь [1]: http://www.lanexa.net/2012/04/how-to-make-bootstrap-carousel-display-wordpress-dynamic-content/Wordpress Bootstrap carosel изображение не отображается

Я хотел запустить тест на одной из областей слайдера, поэтому я ввел код для первого цикла и отобразил заголовок и выдержку но мой образ вообще не появляется. Как я могу исправить эту проблему и что является хорошим способом прокрутки остальной части изображений в карусели. Я добавил второй цикл с кодом, который я нашел в ссылке, и это испортило мою страницу, поэтому я взял ее. Вот что я до сих пор оставил с каким-то статическим контентом, который тоже хочу прокрутить. У меня будет 3 изображения, идущие в карусели. Это мой первый реальный проект с Wordpress, поскольку я пытаюсь создать свою тему для портфолио, поэтому любая помощь приветствуется!

<!-- Carousel 
================================================== --> 

<div id="myCarousel" class="carousel slide" data-ride="carousel"> 

    <?php 
    $the_query = new WP_Query(array(
     'category_name' => 'Home Carousel', 
     'posts_per_page' => 1 
    )); 
    while ($the_query->have_posts()) : 
     $the_query->the_post(); 
     $attachment_ids[] = get_the_ID(); 
    endwhile; 
    wp_reset_postdata(); 
    ?> 
    <!-- Indicators --> 
    <ol class="carousel-indicators"> 
    <?php foreach($attachment_ids as $attachment_id_k=>$attachment_id_v){ 
     if($attachment_id_k == 0){$class_active = 'class="active"';} 
     else{$class_active = 'class=""';} 
     ?> 
     <li data-target="#myCarousel" <?php echo $class_active;?> data-slide-to="<?php echo $attachment_id_k;?>"></li> 
    <?php } ?> 
    </ol> 

    <div class="carousel-inner" role="listbox"> 

     <div class="carousel-inner"> 
     <?php foreach($attachment_ids as $attachment_id_k=>$attachment_id_v){ 
     if($attachment_id_k == 0){$class_active = 'class="item active"';} 
     else{$class_active = 'class="item"';} 
     ?> 
    <div <?php echo $class_active;?>> 
     <div class="display_table"> 
      <div class="display_table_cell"> 
      <?php 
      $default_attr = array(
       'class' => "gallery_images", 
       'alt' => 'Gallery Images', 
      ); 
      echo wp_get_attachment_image($attachment_id_v, 'full', 1, $default_attr); 
      $image_data = get_post($attachment_id_v); 
      if($image_data->post_excerpt != ''){ 
      ?> 
      <div class="carousel-caption my_caption"> 
       <p><?php echo $image_data->post_excerpt;?></p> 
      </div> 
      <?php }?> 
      </div> 
     </div> 
    </div> 
    <?php } ?> 
    </div> 

    <!-- Controls --> 
    <a class="left carousel-control" href="#myCarousel" 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="#myCarousel" role="button" data-slide="next"> 
    <span class="glyphicon glyphicon-chevron-right" aria-hidden="true"></span> 
    <span class="sr-only">Next</span> 
    </a> 
</div><!-- /.carousel --> 
+0

В режиме 'noConflict'? WordPress и jQuery редко уходят с места в карьер. – Joshua

+0

Хорошо, я посмотрю на это. Это может быть частью проблемы. Я ценю помощь! – CL01

+0

Могу ли я добавить что-то подобное в файл js? 'code' $ = jQuery.noConflict (true); 'code' – CL01

ответ

0

Вот рабочий код !!!

Сначала через время цикла получить все почтовые IDS в массиве

<?php 
$the_query = new WP_Query(array(
    'category_name' => 'Home Carousel', 
    'posts_per_page' => 1 
)); 
while ($the_query->have_posts()) : 
    $the_query->the_post(); 
    $attachment_ids[] = get_the_ID(); 
endwhile; 
wp_reset_postdata(); 
?> 

Теперь через массив $attachment_ids получить рабочую карусель

<div id="myCarousel" class="carousel slide"> 
    <!-- Indicators --> 
    <ol class="carousel-indicators"> 
     <?php foreach($attachment_ids as $attachment_id_k=>$attachment_id_v){ 
      if($attachment_id_k == 0){$class_active = 'class="active"';} 
      else{$class_active = 'class=""';} 
      ?> 
      <li data-target="#myCarousel" <?php echo $class_active;?> data-slide-to="<?php echo $attachment_id_k;?>"></li> 
     <?php } ?> 
    </ol> 
    <!-- Wrapper for slides --> 
    <div class="carousel-inner"> 
     <?php foreach($attachment_ids as $attachment_id_k=>$attachment_id_v){ 
      if($attachment_id_k == 0){$class_active = 'class="item active"';} 
      else{$class_active = 'class="item"';} 
      ?> 
     <div <?php echo $class_active;?>> 
      <div class="display_table"> 
       <div class="display_table_cell"> 
       <?php 
       $default_attr = array(
        'class' => "gallery_images", 
        'alt' => 'Gallery Images', 
       ); 
       echo wp_get_attachment_image($attachment_id_v, 'full', 1, $default_attr); 
       $image_data = get_post($attachment_id_v); 
       if($image_data->post_excerpt != ''){ 
       ?> 
       <div class="carousel-caption my_caption"> 
        <p><?php echo $image_data->post_excerpt;?></p> 
       </div> 
       <?php }?> 
       </div> 
      </div> 
     </div> 
     <?php } ?> 
    </div> 

    <!-- Controls --> 
    <a class="left carousel-control" href="#myCarousel" data-slide="prev"> 
     <span class="icon-prev"></span> 
    </a> 
    <a class="right carousel-control" href="#myCarousel" data-slide="next"> 
     <span class="icon-next"></span> 
    </a> 
</div> 

поместить этот код в яваскрипте footer.php, так как для его бутстрап-карусели нужен некоторый javascript для установки опций

<script type="text/javascript"> 
$('.carousel').carousel({ 
    interval: 3000 
}) 
</script> 
+0

Ничего себе это здорово, но я до сих пор не могу заставить карусель работать. Я отредактировал мой код выше, чтобы отразить новые изменения. Является ли мой новый WP_Query не в том месте? – CL01

+0

Мне нужно добавить поддержку темы для карусели? – CL01

+0

см. Отредактированный ответ последнего блока –

0

В вашем разделе Код товара вы пишете

<?php the_post_thumbnail('full');?> 

, но я обнаружил, что в этой связи они использовали учебник

<?php the_post_thumbnail('large');?>. 

Вы можете проверить это. Это причина вашей ошибки?

+0

Я попытался подключить некоторые другие значения, и они тоже не работали. Я думаю, что параметр должен быть установлен в соответствии с используемым размером изображения, но я не уверен, так как я все еще новичок в Wordpress. – CL01

Смежные вопросы