複数のdivを1つのラッパーdiv内にクラスでラップしますか？

Question

div内に投稿を出力するワードプレスループがあります。これらの部門のクラスは.col1,.col2,.col3です。出力は次のようになります。

は、今私は単一のラッパーのdiv内のものdivをラップする必要があります。例えば

すべて.col1はdivのクラスの.right 'ででラップする必要があるクラス.middleと.coll3を持つ単一のdivでラップしなければならないクラス.left、.col2を持つ単一のラッパーのdiv内にラップする必要があります。

私のページ内にいくつの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;?> 

これだけjsなしでPHPで行うことができますか？ありがとうございました！！

Answer 1

投稿をどのように出力するか再編成する必要があります。行ごとにループするのではなく、列方向に変更する必要があるため、外側の<div>要素を正しく作成することができます。

あなたに10の記事があるとします。 1から10の順序でループするのではなく、それらを3つのチャンク（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]; 
    } 
} 

$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：

ご希望のHTMLを印刷することができます

<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を出力すると、タグを閉じる必要はありません。 :を{に、endifを}に置き換えてください。コードをもっときれいにするでしょう。

これは、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;?>