WordPress循环中按周期插入横幅的逻辑实现咨询

我来帮你搞定这个循环插入横幅的问题！你的需求是每12篇文章为一个周期，分别在周期内的第4、8、12篇后插入对应横幅，并且无限重复这个规则——用**模运算（取余操作）**就能完美解决这个周期判断问题。

核心数学逻辑 #

因为你的重复周期是12篇，我们可以通过$counter % 12（计算当前文章序号除以12的余数）来判断位置：

• 横幅1：对应第4、16、28...篇后 → 余数为4时插入（$counter % 12 === 4）
• 横幅2：对应第8、20、32...篇后 → 余数为8时插入（$counter % 12 === 8）
• 横幅3：对应第12、24、36...篇后 → 余数为0时插入（$counter % 12 === 0，因为12的整数倍除以12余数为0）

调整后的完整代码 #

<div class="tile-flex">
    <?php $counter = 0; ?>
    <?php if (have_posts()) { while (have_posts()) { $counter++; the_post(); ?>
        <!-- Tile Grid -->
        <div class="tile-grid">
            <!-- Catalogue Tiles | Wordpress Loop -->
            <div class="tile">
                <?php get_template_part('includes-tile/custom-memorial', 'tile'); ?>
            </div>
        </div>

        <!-- 插入横幅1：第4、16、28...篇后 -->
        <?php if ($counter % 12 === 4) { ?>
            <div class="full-width-experimental-panel">
                <?php get_template_part('includes-page-panel/fullwidth','memorial-panel-one'); ?>
            </div>
        <?php } ?>

        <!-- 插入横幅2：第8、20、32...篇后 -->
        <?php if ($counter % 12 === 8) { ?>
            <div class="full-width-experimental-panel">
                <?php get_template_part('includes-page-panel/fullwidth','memorial-panel-two'); ?>
            </div>
        <?php } ?>

        <!-- 插入横幅3：第12、24、36...篇后 -->
        <?php if ($counter % 12 === 0) { ?>
            <div class="full-width-experimental-panel">
                <?php get_template_part('includes-page-panel/fullwidth','memorial-panel-three'); ?>
            </div>
        <?php } ?>

    <?php }} ?>
</div>

代码说明 #

• 把原来固定判断$counter === 4/8/12的逻辑，替换成了基于模运算的周期判断，这样不管循环加载多少篇文章，都会按照你想要的规则重复插入横幅。
• 模运算%是PHP中计算余数的运算符，非常适合处理这种周期性重复的场景，逻辑简洁且高效。

内容的提问来源于stack exchange，提问作者DanG