繁体   English   中英

ACF中继器字段行和列

[英]ACF Repeater Field Rows and Columns

因此,我需要使用ACF中的Repeater字段来输出网站的一部分。 我设置它的方式是,每次调用它都会创建一个新的<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; ?>

如果看上面的结果,我需要的是一行2列,然后一行2列,依此类推。 现在再次给我一行,每行有1列。 我尝试在行和列的内部和外部移动脚本启动,但是无法获得正确的顺序。

看起来您可以通过使用基础块网格功能而不是标准网格来实现最终目标。 如果您使用块状网格,则将仅根据列表中的项目数继续逐行重复。 见下文:

<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。 我认为这可能是解决您的难题的一种方法。

暂无
暂无

声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.

 
粤ICP备18138465号  © 2020-2024 STACKOOM.COM