Question

一点背景......我在WordPress中创建了一个自定义帖子类型，其中包括特色图像以及高级自定义字段字段中的图像库。我正在根据以下代码处理Bootstrap缩略图滑块：http://codepen.io/RetinaInc/pen/rxksh/

一切都适用于上半部分。我能够轻松地将特色图片称为第一个项目，其中包含＆＃34;活动＆＃34; class applied，然后在没有活动类的项目的画廊图像的foreach循环中运行。完善。真棒。

我遇到的问题是滑块缩略图。我在第一个＆＃34;活跃＆＃34;中得到了第一个项目。排好了 - 再次，特色图片。但我需要添加一个没有＆＃34;活动＆＃34;的新行。每4件课后上课。但在这种情况下，这意味着我只能拥有画廊的前3个项目，因为第一个项目是特色图像。然后在那些前3个图库项目之后我需要迭代每4个项目，添加一个没有＆＃34;活动＆＃34;类。看到我的困境？我确定所有人都不会陷入两难境地。我的数学技能有点糟糕，模数仍然让我感到害怕，因为我不太了解它。

这里是我现在拥有的代码（昨晚我放弃了模数的事情，所以滑块区域现在几乎只是简单的html）：

<?php
<!-- Begin Carousel-->
<div class="container-fluid">
    <div class="row">

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

                <?php
                    $thumbnail_id   = get_post_thumbnail_id();
                    $thumbnail_url  = wp_get_attachment_image_src( $attachment_id, $size='speight-plan' );
                    $thumbnail_meta = get_post_meta( $thumbnail_id, '_wp_attatchment_image_alt', true );
            ?>

                <div class="item active">
                    <img src="<?php echo wp_get_attachment_image_src(get_post_thumbnail_id($post->ID), 'speight-plan')[0]; ?>">
                </div>

                <?php
                    $images = get_field('site_photos');
                    $size = 'speight-plan';

                        if( $images ):
                            foreach( $images as $image ):
                            $thumb = $image['sizes'][ $size ];
                ?>

                <div class="item">
                    <img src="<?php echo $thumb; ?>">
                </div>

                            <?php endforeach; 
                        endif;
                ?>

            </div>
        </div>

        <!-- Indicators -->

        <div class="clearfix">

        <div id="thumbcarousel" class="plan-carousel slide" data-interval="false">
            <div class="carousel-inner">

                <div class="item active">
                    <div data-target="#carousel" data-slide-to="0" class="thumb"><img src="<?php echo wp_get_attachment_image_src(get_post_thumbnail_id($post->ID), 'speight-plan')[0]; ?>"></div>

                    <div data-target="#carousel" data-slide-to="1" class="thumb"><img src="image.jpg" style="border-right-color: white; border-right-width: 1px; border-right-style: solid;"></div>
                    <div data-target="#carousel" data-slide-to="2" class="thumb"><img src="image.jpg" style="border-right-color: white; border-right-width: 1px; border-right-style: solid;"></div>
                    <div data-target="#carousel" data-slide-to="3" class="thumb"><img src="image.jpg"></div>
                </div>

                <div class="item">
                    <div data-target="#carousel" data-slide-to="4" class="thumb"><img src="image.jpg" style="border-right-color: white; border-right-width: 1px; border-right-style: solid;"></div>
                    <div data-target="#carousel" data-slide-to="5" class="thumb"><img src="image.jpg" style="border-right-color: white; border-right-width: 1px; border-right-style: solid;"></div>
                    <div data-target="#carousel" data-slide-to="6" class="thumb"><img src="image.jpg" style="border-right-color: white; border-right-width: 1px; border-right-style: solid;"></div>
                    <div data-target="#carousel" data-slide-to="7" class="thumb"><img src="image.jpg"></div>
                </div><!-- /item -->

            </div><!-- /carousel-inner -->

            <a class="left carousel-control" href="#thumbcarousel" role="button" data-slide="prev">
                <span class="glyphicon glyphicon-chevron-left"></span>
            </a>

            <a class="right carousel-control" href="#thumbcarousel" role="button" data-slide="next">
                <span class="glyphicon glyphicon-chevron-right"></span>
            </a>
        </div><!-- /thumbcarousel -->

    </div>
</div>

<?php     
    wp_reset_postdata();
    wp_reset_query();
?>

我可能还会补充说，我遇到的另一个问题是如何获得＆＃34;数据滑动到＆＃34;的项目编号值。在缩略图滑块中。

当然，如果我可以完全消除特色图像并且只有画廊字段，那么这将更加容易。但这就是客户想要它的方式。

Answer 1

为什么不做这样的事情，添加一个计数器并检查每个第四项：

if( $images ):
  $i = 0;
  foreach( $images as $image ):
    $thumb = $image['sizes'][ $size ];
    ?>

    <div class="item">
       <img src="<?php echo $thumb; ?>">
    </div>

  <?php 
     $i++;
     if ($i%4 == 0): ?>
        <div class = "item">

        </div>
     <?php endif;
    endforeach; 
endif; ?>

从第3个项目开始，每4个项目添加一个div？

1 个答案: