PHP

Question

我正在使用 WordPress 中的 Advanced Custom Fields 插件来显示不同员工的行。基本上，用户可以在管理部分输入数据，并创建一个可用于显示数据的数组。

当前，该数组正在存储 5 个值（子数组）：

array (
    0 => 
        array (
            'profile_pic' => 'http://ocdd.vztechsolutions.com/wp-content/uploads/2017/11/jaime.jpg',
            'profile_name' => 'Jaime Daignault',
            'profile_job' => 'Executive Director',
            'profile_email' => 'Jaimie.Daignault@ocdd.org',
        ),
    1 => 
        array (
            'profile_pic' => 'http://ocdd.vztechsolutions.com/wp-content/uploads/2017/11/beth.jpg',
            'profile_name' => 'Beth Kessler',
            'profile_job' => 'Family Engagement Coordinator',
            'profile_email' => 'Beth.Kessler@ocdd.org',
        ),
    2 => 
        array (
            'profile_pic' => 'http://ocdd.vztechsolutions.com/wp-content/uploads/2017/11/carrie.jpg',
            'profile_name' => 'Carrie Salehiamin',
            'profile_job' => 'Operations Manager',
            'profile_email' => 'CarrieS@ocdd.org',
        ),
    3 => 
        array (
            'profile_pic' => 'http://ocdd.vztechsolutions.com/wp-content/uploads/2017/11/leslie.jpg',
            'profile_name' => 'Leslie Sutton',
            'profile_job' => 'Policy Director',
            'profile_email' => 'Leslie.Sutton@ocdd.org',
        ),
    4 => 
        array (
            'profile_pic' => 'http://ocdd.vztechsolutions.com/wp-content/uploads/2017/11/ryley.jpg',
            'profile_name' => 'Ryley Newport',
            'profile_job' => 'Communications Director',
            'profile_email' => 'Ryley.newport@ocdd.org',
        ),
)

我希望能够创建一个 Bootstrap 行，其中包含 3 列，如果它有 3 个子数组。否则，如果有超过 3 个子数组，我想创建 2 行，每行 3 列。到目前为止，这是我创建的：

// Store Name of custom field(array) from Admin Section
<?php $repeater = get_field('staff'); ?>

<?php if(count($repeater) <= 3): ?>
    <?php while(have_rows('staff')) : the_row(); ?>
        <div class="row">
            <div class="col-md-4 col-sm-6 col-xs-12 staffBlock">
                <img src="<?php the_sub_field('profile_pic'); ?>" alt="Profile Pic">
                <h4 class="staffTitle"><?php the_sub_field('profile_name'); ?></h4>
                <p class="staffSubTitle"><?php the_sub_field('profile_job'); ?></p>
                <a class="staffEmail" href="mailto:<?php the_sub_field('profile_email'); ?>"><?php the_sub_field('profile_email'); ?></a>
            </div>
        </div>
    <?php endwhile; ?>

<?php elseif(count($repeater) > 3 && count(repeater) <= 6): ?>
    <?php while(have_rows('staff')) : the_row(); ?>
        // Display first row and 3 columns
        // Display second row and remaining columns
    <?php endwhile; ?>
<?php endif; ?>

如果数组有 3 个子数组，效果很好，但如果它有更多子数组，我似乎无法理解如何创建两个不同的行。

Answer 1

你只需要分配在循环的每个实例中增加的变量并重置或检查它们看到这个我在代码中写了一些注释来帮助你理解。

顺便说一句，它不限于 6 个项目，它可以用于无限个项目。每 3 个项目用 row

包裹

<?php
$x = 1;
$z = 1;
// Total items in the repeater field
$total_items = count($repeater);
?>
<?php
foreach($repeater as $item):
    // Check if $x is bigger than 3 then we set it back to 1
    $x = ($x > 3) ? 1 : $x;
    // if $x = 1 then we start a new row
    echo ($x == 1) ? '<div class="row">' : '';
        ?>
        <div class="col-md-4 col-sm-6 col-xs-12 staffBlock">
            <img src="<?php echo $item['profile_pic']; ?>" alt="Profile Pic">
            <h4 class="staffTitle"><?php echo $item['profile_name']; ?></h4>
            <p class="staffSubTitle"><?php echo $item['profile_job']; ?></p>
            <a class="staffEmail" href="mailto:<?php echo $item['profile_email']; ?>"><?php echo $item['profile_email']; ?></a>
        </div>
    <?php
    // Check if $x is equal to 3 or if $z equal to the total of the items in the repeater
    // then its true we close the row
    echo ($x == 3) || ($z == $total_items) ? '</div>' : '';
    $x++;
    $z++;
endforeach;
?>

Answer 2

A <div class="row"> 创建一个新行，而 <div class="col-md-4 col-sm-6 col-xs-12"> 为每个断点创建一个具有指定宽度的列。在您的示例中，在中型及以上尺寸的屏幕上每行只能获得三列。

我不熟悉 ACF，但我的基本概念代码是在每 3 列之后插入一个新行，大致如下：

<?php $i=0; ?>
<div class="row">
    <?php while(have_rows('staff')) : the_row();
if (($i > 0) && ($i % 3 === 0)) { ?>
</div>
<div class="row">
    <?php }
$i++; ?>
    <div class="col-md-4 col-sm-6 col-xs-12 staffBlock">
        <img src="<?php the_sub_field('profile_pic'); ?>" alt="Profile Pic">
        <h4 class="staffTitle">
            <?php the_sub_field('profile_name'); ?></h4>
        <p class="staffSubTitle">
            <?php the_sub_field('profile_job'); ?></p>
        <a class="staffEmail" href="mailto:<?php the_sub_field('profile_email'); ?>"><?php the_sub_field('profile_email'); ?></a>
    </div>
    <?php endwhile; ?>
</div>

PHP - 如何根据一个数组有多少个子数组在 WordPress 中创建动态 Bootstrap 行和列？

PHP - How can I Create Dynamic Bootstrap Rows & Columns in WordPress based on how many sub arrays an array has?

wordpress

dynamic

twitter-bootstrap

advanced-custom-fields