在WordPress中使用高级自定义字段动态添加内容到Bootstrap模态

Question

我试图通过与高级自定义字段创建的自定义字段循环，并在模态窗口中显示图像库(使用重复器字段)。WordPress安装利用Bootstrap，我试图根据帖子的顺序改变模态窗口的ID。第一篇文章应该显示#myModal-1，第二篇文章应该输出#myModal-2等。这应该在模态窗口代码中相应地复制。

由于某种原因，计数器不工作，我不知道为什么。

相关代码见下面的Pastebin

http://pastebin.com/nYwnMBEJ

Answer 1

你的$i++;应该在最后。

的例子:

<div class="sidebar">
  <p><strong>Role:</strong>
    <?php the_field( 'prole') ?>
  </p>
  <!-- Project Role -->
  <p><strong>Project Type:</strong>
    <?php the_field( 'ptype') ?>
  </p>
  <!-- Project Type -->
  <?php if(get_field( 'repeater')): ; ?>
  <?php $i=0; while(has_sub_field( 'repeater')):; ?>
  <a href="#" data-toggle="modal" data-target="#myModal-<?php echo $i; ?>">toggle goes here</a>
  <?php $i++; endwhile; ?>
  <?php endif; ?>
  <?php if(get_field( 'repeater')):  ; ?>
  <?php $i=0; while(has_sub_field( 'repeater')): ; ?>
  <!-- Modal -->
  <div class="modal fade col-md-4" id="myModal-<?php echo $i; ?>" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
    <div class="modal-dialog modal-lg">
      <div class="modal-content">
        <div class="modal-header">
          <button type="button" class="close" data-dismiss="modal" aria-label="Close">
            <span aria-hidden="true">&times;</span>
          </button>
        </div>
        <!-- /modal-header -->
        <div class="row">
          <div class="col-xs-11">
            <img src="<?php the_sub_field('gallery'); ?>" />
          </div>
          <!-- /col -->
        </div>
        <!-- /row -->
      </div>
      <!-- /modal-content -->
    </div>
    <!-- /modal-dialog -->
  </div>
  <!-- /modal -->
  <?php $i++; endwhile; ?>
  <?php endif; ?>
</div <!-- /sidebar -->
</div>
<!-- /col -->

Answer 2

今天才发现这个，我知道它晚了，但我想我应该分享我的代码。

https://gist.github.com/anonymous/b72d29ca7217b1fb7036