ACF中继器字段行和列 - ACF Repeater Field Rows and Columns

ACF Repeater Field Rows and Columns

本文关键字：字段中继器 ACF | 更新日期: 2023-09-27

所以我需要在ACF中使用中继器字段来输出我的网站的一部分。我设置它的方式是每次调用它都会创建一个新的<div class="row landing-item">。我需要它来创建，每2次，所以html将是正确的布局。

<section class="row landing">
<h2>Featured Sections</h2>
<?php if( have_rows('landing_page_landing_items') ): ?>
    <?php while ( have_rows('landing_page_landing_items') ) : the_row(); ?>
        <div class="row landing-item">
            <div class="small-12 medium-6 columns">
                <img src="<?php the_sub_field('landing_image'); ?>">
                <h3><?php the_sub_field('landing_title'); ?></h3>
                <p><?php the_sub_field('landing_text'); ?></p>
                <a class="button" href="<?php the_sub_field('landing_link'); ?>">Learn More</a>
            </div>
        </div><!-- end landing-item -->
    <?php endwhile; ?>
<?php endif; ?>

如果你看上面的最终结果，我需要的是一行有两列，然后一行有两列，等等。现在它每次都给我一行一列。我尝试在行和列的外部和内部移动脚本初始化，但无法获得正确的顺序。

看起来您可以通过使用基础块网格特性而不是标准网格来实现您的最终目标。如果您使用块网格，您将仅根据列表中的项数继续一行接一行地重复。见下文:

<section class="row landing">
    <h2>Featured Sections</h2>
    <div class="row landing-item">
        <ul class="small-block-grid-1 medium-block-grid-2">
            <?php if( have_rows('landing_page_landing_items') ): ?>
                <?php while ( have_rows('landing_page_landing_items') ) : the_row(); ?>
                        <li>
                            <img src="<?php the_sub_field('landing_image'); ?>">
                            <h3><?php the_sub_field('landing_title'); ?></h3>
                            <p><?php the_sub_field('landing_text'); ?></p>
                            <a class="button" href="<?php the_sub_field('landing_link'); ?>">Learn More</a>
                        </li>
                <?php endwhile; ?>
            <?php endif; ?>
        </ul>
    </div><!-- end all landing items -->
</section>

你可能需要做一些CSS如果你需要做任何特殊的每行编辑。我想这可能是一个解决你困境的办法。