[英]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.