在一個包裝div中包裝多個div的類？

Question

我有一個wordpress循環，在div中輸出我的帖子。那些div有這些類.col1,.col2,.col3。輸出看起來是這樣的：

現在我需要一個單個包裝專區內包裝這些div。

例如所有.col1應的單個包裝的div內包裹.left類，.col2應包裝具有單個分度.middle類和.coll3應用的div類「.right」纏繞。

我不知道我的頁面中有多少個div。

所以最終的輸出應該是這樣的：

我的循環如下所示：

<?php  
     $col = 1; // Let's create first column. 

     if (have_posts()) : ?><?php while (have_posts()) : the_post(); ?> 

     <div <?php post_class('col' . $col); ?> id="post-<?php the_ID(); ?>"> 
      <?php if (1 === $col) {// If column 1 create first row. 
       echo '<div class="row">'; 
      } 
      ?> 
      <?php if (2 === $col) {// If column 2 create second row. 
       echo '<div class="row2">'; 
      } 
      ?> 
      <?php if (3 === $col) {// If column 3 create third row. 
       echo '<div class="row3">'; 
      } 
      ?> 

      <!--Get the Three Columns Content --> 
      <?php get_template_part('template-parts/content', 'three-columns'); ?> 

      <?php /* Close Three Column Layout Div's */ 
      if (1 === $col) { 
       $col = 2; 
       echo '</div>'; 
      } else if (2 === $col) { 
       $col = 3; 
       echo '</div>'; 
      } else if (3 === $col) { 
       $col = 1; 
       echo '</div>'; 
      } 
      endwhile; ?> 



      <?php else : ?> 

     <?php get_template_part('template-parts/content', 'none'); ?> 

      <?php endif;?> 

可以這樣用PHP只做不js？謝謝！！

Answer 1

您需要重新組織您輸出帖子的方式。而不是循環遍歷它們，您需要將其更改爲列式，以便您可以正確創建外部元素<div>。

想象一下，你有10個職位。不需要按順序循環遍歷它們，從1到10，您需要將它們分組爲3個塊（對於三列），然後遍歷每列。

Old: 1, 2, 3, 4, 5, 6, 7, 8, 9, 10 
New: (1, 4, 7, 10) (2, 5, 8) (3, 6, 9) 

這裏是你如何做到這一點，用正確的階級形成的<div>元素沿着一個簡單的例子：

$posts = range(1, 10); // Collect all of your posts into an array, as an example I'm just using numbers. 

$posts_reordered = ['left' => [], 'middle' => [], 'right' => []]; 

foreach(array_chunk($posts, 3) as $chunk) { 
    $posts_reordered['left'][] = $chunk[0];  
    if(isset($chunk[1])) { 
     $posts_reordered['middle'][] = $chunk[1]; 
    } 
    if(isset($chunk[2])) { 
     $posts_reordered['right'][] = $chunk[2]; 
    } 
} 

現在，您的信息會按列而不是按行重組，所以您可以打印您所需的HTML：

$i = 1; 
foreach($posts_reordered as $key => $column_posts) { 
    $outer_div_class = ".$key"; // .left 

    echo "<div class='$outer_div_class'>\n"; 

    foreach($column_posts as $post) { 
     $inner_div_class = ".col$i"; 
     echo "\t<div class='$inner_div_class'>$post</div>\n\n"; 
    } 

    echo "</div>\n"; 
    $i++; 
} 

這will output：

<div class='.left'> 
    <div class='.col1'>1</div> 

    <div class='.col1'>4</div> 

    <div class='.col1'>7</div> 

    <div class='.col1'>10</div> 

</div> 
<div class='.middle'> 
    <div class='.col2'>2</div> 

    <div class='.col2'>5</div> 

    <div class='.col2'>8</div> 

</div> 
<div class='.right'> 
    <div class='.col3'>3</div> 

    <div class='.col3'>6</div> 

    <div class='.col3'>9</div> 

</div> 

Answer 2

首先要注意的是，由於你的文件很多都是php，因此不必爲每一行都打開和關閉php標籤。

只需將<?置於文件頂部即可。當你用echo輸出你的html時，你甚至不需要關閉標籤。然後，您將用{替換:，用}替換。它會讓你的代碼更清潔。

也就是說你應該創建一個局部變量來存儲div，然後在一個單獨的循環中打印內容。

這裏是粗略的想法：

<?php 
    // Set up a local variable. 
    $columns= array(); 

    // Collect the data. 
    while (have_posts) 
    { 
    the_post(); 
    $columns[$col] .= '<div class=col-' . $col . '>' . get_template_part('template-parts/content', 'three-columns') . '</div>'; 
    } 

    // Output the data. 
    foreach($columns as $col => $data) 
    { 
    echo '<div class="column-' . $col . '-wrapper">' . $data . '</div>'; 
    } 

Answer 3

打破你的數據分成3列第一構建列單獨然後按順序呈現。

function buildCols($posts){ 
    for($i = 0; $i < count($posts); $i += 3) { 
     $threeColArray[] = array_slice($posts, $i, 3); 
    } 
    return $threeColArray; 
} 

Answer 4

嘗試這樣的事情，你可以結束列，如果的櫃檯是被3整除開始一個新的列：

<?php    
$post_counter = 1; 
$col_counter = 1; 
if (have_posts()) : ?> 
    <div class="col--<?php echo $col_counter; ?>"> 
     <?php while (have_posts()) : the_post(); ?> 

     <?php if ($post_counter % 3 == 0) : ?> 
     <?php $col_counter++; ?> 
     </div> 
     <div class="col--<?php echo $col_counter; ?>"> 
     <?php endif; ?> 

     <!--Get the Three Columns Content --> 
     <?php get_template_part('template-parts/content', 'three-columns'); ?> 


     <?php $post_counter++; ?> 
     <?php endwhile; ?> 
    </div> 
<?php endif;?>