Question

我正在使用Bootstrap构建我的Wordpress主题，并在导航栏正下方的首页上使用旋转木马。我发现了一种在这里循环显示图像的好方法[1]：http://www.lanexa.net/2012/04/how-to-make-bootstrap-carousel-display-wordpress-dynamic-content/

我想在其中一个滑块区域上运行测试，所以我输入了第一个循环的代码，它显示了标题和摘录，但我的图像根本没有显示。我该如何解决这个问题，以及循环播放器中其余图像的好方法。我添加了第二个循环和我在链接中找到的代码，它搞砸了我的页面，所以我把它拿出来了。到目前为止，我还有一些我想要循环的静态内容。我将在旋转木马上有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 -->

Answer 1

在您的代码项部分中编写

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

但我发现在那个教程链接中他们使用了

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

你能检查吗？这是你错误的原因吗？

Answer 2

这是工作代码!!!

首先通过while循环获取数组中的所有帖子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>

把这个javascript代码放在footer.php，因为它的bootstrap carousel所以需要一些javascript来设置选项

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

Wordpress Bootstrap carosel图像不显示

2 个答案: