Bootstrapのループについて

Question

PHPの経験が浅いため、質問しようと思いました。
ご助力いただければ嬉しいです。何卒よろしくお願いいたします。

	<?php
		$i++;
		if ( $i % 3 == 0 ) {
    	echo '</div>';
		} elseif ( $i = $i * 3 + 1 ) {
    	echo '</div>';
		} else {
    	echo "</div>";
		}
		?>

3カラムで閉じます。

<div class="row">
 <div class="col-md-4">
  <p>hoge</p>
 </div>
</div>

3n+1で

</div><div class="row">
 <div class="col-md-4">
  <p>hoge</p>
 </div>
</div>

コードの全体です。３カラムでループします。Bootstrapはv4.0.0-beta.2です。

<div class="row">
		<?php $i = 1;
		$args = array( 'post_type' => circle );
		$myposts = get_posts( $args );
		foreach ( $myposts as $post ) : setup_postdata( $post ); ?>

			<div class="col-md-4">
				<h3 class="circlename-item"><?php echo post_custom( 'circlename' ); ?></h3>
				<div class="circle-wrapper">
					<?php the_post_thumbnail( 'circle-thumb', array( 'class' => 'img-fluid	circle-thumb' ) ); ?>
					<p class="genre-item"><?php echo post_custom( 'genre' ); ?></p>
					<p class="penname-item">PN&nbsp;<?php echo post_custom( 'penname' ); ?></p>
					<p class="spacenumber-item">スペースNo&nbsp;<?php echo post_custom( 'spacenumber' ); ?></p>
				</div>
			</div>

		<?php
		$i++;
		if ( $i % 3 == 0 ) {
    	echo '</div>';
		} elseif ($i = $i*=3 +1 ) {
    	echo '</div><div class="row">;
		} else {
    	echo "</div>";
		}
		?>

	<?php endforeach;
	wp_reset_postdata();?>

Comments

[退会済みユーザー]

全体で幾つのカラムがあってどういうHTMLを出力したいのかを記述してください。
あと、Bootstrap のバージョンを明記してください。Bootstrapは特にバージョンによって記述方法が全く異なります。

[退会済みユーザー]

3カラムで区切りたいのはわかっています。全部で幾つのものを3つずつ区切りたいのかを質問しています。

[退会済みユーザー]

投稿する度に記載されるので、それを３つづつですね。

Answer 1

そもそも、col-md-4 が3つ以上(col- の数12以上)になると
次の段になるので、
div.row を3個ごとに閉じる必要はないです。

<div class="row">
 <div class="col-md-4">
  <p>hoge</p>
 </div>
 <div class="col-md-4">
  <p>foo</p>
 </div>
 <div class="col-md-4">
  <p>bar</p>
 </div>
 <!--12を超えるのでここから自動で次の段になる-->
 <div class="col-md-4">
  <p>baz</p>
 </div>
</div>

Answer 2

剰余を計算することで、3の倍数を判定できます。

if ($i % 3 == 0) {
}

Comments

[退会済みユーザー]

３の倍数の時に<div class="row">が余計に付与されてしまうので困っています。

Answer 3

<!-- カテゴリー一覧 -->

<div class="container">
<div class="category">
   <ul class="post-categories">
        <?php wp_list_categories('title_li=&depth=2'); ?>
    </ul>
</div>

</section> </div>

Answer 4

これで問題ありませんでした。

<div class="row">
		<?php $i = 0;
		$args = array( 'post_type' => circle );
		$myposts = get_posts( $args );
		foreach ( $myposts as $post ) : setup_postdata( $post ); ?>

			<div class="col-md-4">
				<h3 class="circlename-item"><?php echo post_custom( 'circlename' ); ?></h3>
				<div class="circle-wrapper">
					<?php the_post_thumbnail( 'circle-thumb', array( 'class' => 'img-fluid	circle-thumb' ) ); ?>
					<p class="genre-item"><?php echo post_custom( 'genre' ); ?></p>
					<p class="penname-item">PN&nbsp;<?php echo post_custom( 'penname' ); ?></p>
					<p class="spacenumber-item">スペースNo&nbsp;<?php echo post_custom( 'spacenumber' ); ?></p>
				</div>
			</div>

		<?php
		$i++;
		if ( $i % 3 == 0 ) {
    	echo '</div>';
		}
		?>

	<?php endforeach;
	wp_reset_postdata();?>