【WordPress】特定の回数サブループを回し、そのブロックをラッパーで囲む方法

【WordPress】特定の回数サブループを回し、そのブロックをラッパーで囲む方法

こんにちは、ゆうや(@yuyaphotograph)です!

この記事では、

  • WordPressサブループで特定の回数ループを回して、そのブロックをなんらかのラッパー(div)で囲む方法が知りたい

という方のお悩みを解決します!

このTips、ぼくは実際のWeb制作案件で2回ほどお世話になりました。

通常ループを回すときには、display:flexを指定した親要素(div)の中で展開するだけですが、特定の回数でループを回し終えたところでdivを閉じ、また新たな親要素(div)の開始タグを設置、その中にループ要素を展開、そしてまた閉じる、といった仕様にしたい場合には少し工夫が必要となります。

以下で紹介するコードを真似れば簡単に実装することができますので試してみてください。

WordPressにおけるWeb制作の作業で躓いている方のお役に立てれば幸いです。

特定の回数でループを回し終えたところでdivを閉じ、また新たな親要素の開始タグを設置

任意のテンプレートファイルの該当箇所で以下のコードを貼り付けましょう。

このコードでは、4回ループを回し終えたところで親要素のdivを閉じ、新しい親要素の開始タグを設置する仕様となっております。

投稿タイプはよしなに設定してください。

page-news.php
<?php
$args = array(
  'post_type' => "投稿タイプスラッグ",
);
?>

<?php
  $my_query = new WP_Query($args);
  if ($my_query->have_posts()):
?>
<?php $post_count = 1; // カウンター初期化
echo '<div>' . "\n"; // 最初の開始タグを出力
?>
<?php while ( $my_query->have_posts() ) : $my_query->the_post(); ?>
<?php if ( $post_count % 4 == 1 && $post_count != 1 ) { echo '</div>' . "\n" . '<div>' . "\n"; } // 4で割った余りが1及び最初のdivでなければ閉じdivと次の開始divタグを出力
?>

ループさせたい要素

<?php $post_count++; // カウンターを+1 ?>
<?php endwhile; ?>
<?php echo '</div>' . "\n"; // 最後に閉じる ?>
<?php else : ?>
<?php endif; ?>
<?php wp_reset_postdata(); ?>

ループを抜ける回数を変更したい場合は、

コード
$post_count % 4

の部分の数字をいじってあげればOK。

2回でループを抜けたいならば、2にするといった感じで。

まとめ

以上、WordPressで特定の回数サブループを回し、そのブロックをラッパーで囲む方法をお送りしました。

実際の案件で頻繁に使用することは恐らくないですが、知っていて損はないTipsです。

WordPressのループ処理の応用を知りたい全ての人に届けい!

WordPressでよく使う関数スニペットまとめWordPressでよく使う関数スニペットまとめ Contact Form 7を使うときに役立つ記事まとめ WordPressのパスワード保護ページで記事の途中までパスワードなしでも読めるようにするカスタマイズ方法【WordPress】パスワード保護ページで記事の途中までパスワードなしでも読めるようにカスタマイズする方法

コメントを残す

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です