サポート » 使い方全般 » divが3つ並ぶループについて

  • 解決済 tdf765

    (@tdf765)


    投稿記事のアーカイブページにて。

    ①<div class=”left”,”center”,”right”>をそれぞれ出力したら</div><!– /.col3Box –>で閉じる
    ②また新たに<div class=”col3Box”>を出力して①の処理を行う
    これを繰り返す構文が分からずにいます。

    下記のように出力したいです。

    <div class=”col3Box”>
    <div class=”left”>
    <div class=”workBox”>
    ここに本文(the_contentとか)
    </div><!– / .workBox –>
    </div><!– / .left –>

    <div class=”center”>
    <div class=”workBox”>
    ここに本文(the_contentとか)
    </div><!– / .workBox –></div>
    </div><!– / .center –>

    <div class=”right”>
    <div class=”workBox”>
    ここに本文(the_contentとか)
    </div><!– / .workBox –>
    </div><!– / .right –>
    </div><!– / .col3Box –>

    <div class=”col3Box”>
    <div class=”left”>
    <div class=”workBox”>
    ここに本文(the_contentとか)
    </div><!– / .workBox –>
    </div><!– / .left –>

    個別では次の構文で出力できました。
    </div><!– /.col3Box –>で閉じて、新たに<div class=”col3Box”>を出力

    <?php if (have_posts()) : ?>
    <?php $post_count = 1;
    echo '<div class="col3Box">' . "\n";
    ?>
    <?php while (have_posts()) : the_post(); ?>
    <?php if ( $post_count % 3 == 1 && $post_count != 1 ) { echo '</div>' . "\n" . '<div class="col3Box">' . "\n"; }
    ?>
    <?php $post_count++; ?>
    <?php endwhile; ?>
    <?php echo '</div>' . "\n"; ?>
    <?php else : ?>
    <?php endif; ?>

    <div class=”left”,”center”,”right”をそれぞれ出力>

    <?php
    $box_name=array( 'left', 'center' , 'right' );
    $cnt = 0;
    ?>
    
    <?php if (have_posts()) : ?>
    <?php while (have_posts()) : the_post(); ?>
    
    <?php $chk = $cnt % 3; ?>
    <div class="<?php echo $box_name[$chk]; ?>">
    
    ここに本文(the_content)
    
    </div>
    <?php $cnt++; ?>
    <?php endwhile; ?>
    <?php endif; ?>

    これらを繋げて、または別の方法でも構わないので求める形を出力したいです。
    アドバイスをお願いいたします。

4件の返信を表示中 - 1 - 4件目 (全4件中)
  • このままコピペしても動きませんが、こんな感じでどうでしょう。

    if ( have_posts() ) :
      $box_name = array( 'left', 'center' , 'right' );
      $lcr = 0;
      while ( have_posts() ) :
        the_post();
        if ( $lcr == 0) {
          // <div class="col3Box"> を出力
        }
        // <div class="$box_name[ $lcr ]"> を出力
        // <div class="workBox"> を出力
        the_content();
        // </div><!-- / .workBox --> を出力
        // </div><!-- / .$box_name[ $lcr ] --> を出力
        if ( $lcr == 2) {
          // </div><!-- / .col3Box --> を出力
        }
        $lcr = ( $lcr + 1 ) % 3;
      endwhile;
      if ( $lcr > 0) { // まだ col3Box が閉じていない
        // </div><!-- / .col3Box --> を出力
      }
    else :
      // 投稿なし
    endif;

    トピック投稿者 tdf765

    (@tdf765)

    gblsmさん、ご返信ありがとうございます。
    お教えいただいた上記のコードで望んだ形を出力することができました。
    ありがとうございました。とても助かりました。

    一点お聞きしたいことがあります。
    当初下記の構文を作成しました。

    <?php if (have_posts()) : ?>
    <?php $post_count = 1;
    echo '<div class="col3Box">' . "\n";
    ?>
    <?php while (have_posts()) : the_post(); ?>
    <?php if ( $post_count % 3 == 1 && $post_count != 1 ) { echo '</div><!-- /.col3Box -->' . "\n" . '<div class="col3Box">' . "\n"; } ?>
    
    <?php
    $box_name=array('left', 'center', 'right');
    $cnt = 0;
    ?>
    
    <?php while ($chk = $cnt % 3) : ?>
    <div class="<?php echo $box_name[$chk]; ?>">
    <div class="workBox">
    ここに本文(the_content)
    </div><!-- workBox -->
    </div>
    <?php $cnt++; ?>
    <?php endwhile; ?>
    <?php $post_count++; ?>
    <?php endwhile; ?>
    <?php echo '</div><!-- /.col3Box -->' . "\n"; ?>
    <?php else : ?>
    <?php endif; ?>

    これだと下記のように出力されてしまいました。

    <div class=”col3Box”>
    </div><!– /.col3Box –>
    <div class=”col3Box”>
    </div><!– /.col3Box –>

    配列と入れ子の部分が反応しないのは何故なのでしょうか?
    ワードプレスを始めたばかりで、今後の参考のためにお教えいただければ幸いです。
    どうぞよろしくお願いします。

    while ($chk = $cnt % 3) :
    

    この部分について、$cntを0で初期化しているので、どの数値で割っても余りは0になり、whileの中の処理は実行されません。

    $box_name = array( 'left', 'center', 'right' );
    $cnt = 0;
    while ( $chk = ( $cnt + 1 ) % ( count($box_name) + 1 ) ){
    	echo $box_name[$chk-1];
    	$cnt++;
    }
    

    無理矢理やろうとするとこんな感じの処理になるんでしょうか…。

    この書き方は、条件分岐のなかで代入と評価を同時に記述できるのでスマート…なのですが、あまりおすすめしません。
    for文を使うか、この場合はforeachを使うのが適切ではないかと思います(あくまでご掲示のコードに沿ったら、という意味なので、gblsmさんが投稿されたように、そもそも$box_nameをループで出力させる必要はないはずです)。

    トピック投稿者 tdf765

    (@tdf765)

    x743さん、ご返信ありがとうございます。

    この部分について、$cntを0で初期化しているので、どの数値で割っても余りは0になり、whileの中の処理は実行されません。

    なるほど、条件式がfalse判定になっていたんですね・・・
    勉強になりました。

    具体例ありがとうございます。
    様々な方法があるんですね、今後のためにfor文やforeachでも作ってみます!

4件の返信を表示中 - 1 - 4件目 (全4件中)
  • トピック「divが3つ並ぶループについて」には新たに返信することはできません。