PHP - Wie kann ich dynamische Bootstrap-Zeilen und -Spalten in WordPress erstellen, basierend darauf, wie viele Sub-Arrays ein Array hat?

Question

Ich verwende das Advanced Custom Fields Plugin in WordPress, um Zeilen von verschiedenen Mitarbeitern anzuzeigen. Grundsätzlich kann ein Benutzer Daten in den Admin-Bereich eingeben, und es erstellt ein Array, mit dem die Daten angezeigt werden können.

Derzeit Das Array speichert 5 Werte (Subarrays):

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', 
     ), 
) 

Ich mag eine Bootstrap Reihe erstellen können, mit 3 Spalten, wenn es 3 Subarrays aufweist. Ansonsten möchte ich 2 Zeilen mit jeweils 3 Spalten erstellen, wenn es mehr als 3 Unterfelder gibt. Bisher ist es das, was ich geschaffen:

// 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; ?> 

Es funktioniert großartig, wenn das Array 3 Sub-Arrays hat, aber ich kann meinen Kopf nicht scheinen zu umwickeln, wie zu schaffen zwei verschiedene Reihen, wenn es mehr Subarrays hat.

Answer 1

Sie müssen nur Variablen zuweisen, die in jeder Instanz der Schleife erhöhen und zurücksetzen oder überprüfen sie sehen, dass ich schrieb einige Kommentare in den Code, damit Sie verstehen.

BTW es ist nicht auf 6 Artikel beschränkt es könnte für unbegrenzte Artikel sein. alle 3 Produkte ihre Verpackung mit Zeilen

<?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"> schafft eine neue Zeile, während ein <div class="col-md-4 col-sm-6 col-xs-12"> für jeden Haltepunkt eine Spalte mit den angegebenen Breiten erzeugt. In Ihrem Beispiel erhalten Sie auf mittelgroßen Bildschirmen und darüber nur drei Spalten pro Zeile.

Ich bin mit ACF nicht vertraut, aber mein Grundkonzept Code, um eine neue Zeile nach jeweils 3 Spalten etwas entlang der Linien von wäre einzufügen:

<?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>