简体   繁体   English

使用 div 将每 4 个帖子包装在自定义 wordpress 循环中

[英]Wrap every 4 posts in a custom wordpress loop with a div

    <?php
      $args = array(
      'post_type' => 'college',
      'posts_per_page' => -1,
      'order' => 'DESC',
      'orderby' => 'menu_order'
      );

      $the_query = new WP_Query( $args );
      if ( $the_query->have_posts() ) :
      while ( $the_query->have_posts() ) : $the_query->the_post(); ?>

      <div class="col-3">
        <?php the_title(); ?>
      </div>

   <?php
   endwhile;
   endif;
   wp_reset_postdata();
   ?>

Hi, I've never done this before.嗨,我以前从来没有这样做过。 I'm trying to wrap every 4 posts in the loop above inside a <div class="row"></div>我试图将上面循环中的每 4 个帖子包装在<div class="row"></div>

This should sort you out 这应该把你整理出来

$args = array(
    'post_type' => 'college',
    'posts_per_page' => -1,
    'order' => 'DESC',
    'orderby' => 'menu_order'
);

$the_query = new WP_Query($args);
if ($the_query->have_posts()) :
    $counter = 0;
    while ($the_query->have_posts()) : $the_query->the_post();
        if ($counter % 4 == 0) :
            echo $counter > 0 ? "</div>" : ""; // close div if it's not the first
            echo "<div class='row'>";
        endif;
        ?>
        <div class="col-3">
            <?php the_title(); ?>
        </div>
        <?php
        $counter++;

    endwhile;
endif;
wp_reset_postdata();
?>

Adapted from Wrapping a div around every third item in a foreach loop PHP 改编自foreach循环PHP中的每个第三项周围的div包装

You can follow my code, post of @chapskev is good but missing a closing div after end if您可以按照我的代码进行操作,@chapskev 的帖子很好,但是在结束后缺少一个关闭的 div

<?php $counter = 0; // 4  per list ?>
<?php foreach ($arr as $key => $value) {
  if ($counter % 4 == 0) :
    echo $counter > 0 ? "</div>" : ""; // close div if it's not the first
    echo "<div class='group'>";
  endif;
  echo 
  <<<TEXT
  <span>content</span>
  TEXT;
  $counter++;
  }
  echo "</div>";
?> 

声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.

 
粤ICP备18138465号  © 2020-2024 STACKOOM.COM