我希望 WP While Loop 中的每四个元素都包装在一个 Div 容器 (Index.php) Wordpress 中
I want every four elements in WP While Loop wrapped in a Div Container (Index.php) Wordpress
我希望每四个 Cfcolumns 都包含在一个 Div 容器中,其中包含一个 Class
这是我在索引页中的 While 循环:
<div id="left-area" style="padding-top: 58px;">
<!-- #custom-area -->
<?php while ( have_posts() ) : the_post(); ?>
<div class="cfcolumn">
<a href="<?php echo get_field('upload_pdf_book'); ?>"> <img src="<?php echo get_field('cover_picture'); ?>" alt="<?php
the_title(); ?>" >
</a>
</div>
<?php endwhile; // end of the loop. ?>
<!-- #custom-area -->
</div> <!-- #left-area -->
我想如果你不想学习模数 - 你可以重置你的计数器。
<div id="left-area" style="padding-top: 58px;">
<!-- #custom-area -->
<?php
//Initiate the counter
$counter = 0; ?>
<?php while ( have_posts() ) : the_post(); ?>
<?php
//add 1 to the counter
$counter++;
//If the counter = 4, then spit out the HMTL
if($counter == 4): ?>
<div class="whateverClassWrapper">
<?php endif; ?>
<div class="cfcolumn">
<a href="<?php echo get_field('upload_pdf_book'); ?>">
<img src="<?php echo get_field('cover_picture'); ?>" alt="<?php
the_title(); ?>" >
</a>
</div>
<?php
//close the HTML tag initiated by your counter
if($counter == 4): ?>
</div>
<?php
//Reset the counter
$counter = 0;
endif; ?>
<?php endwhile; // end of the loop. ?>
<!-- #custom-area -->
</div> <!-- #left-area -->
这应该可行 - 但尚未测试。
您可以设置一个计数器来计算当前循环,然后检查它是否可以被 4 整除以在您的内容之前和之后插入和关闭容器。
<div id="left-area" style="padding-top: 58px;">
<?php $i = 1; ?>
<?php while ( have_posts() ) : the_post(); ?>
<?php if( $i % 4 == 0 ): ?>
<div class="container">
<?php endif; ?>
<div class="cfcolumn">
<a href="<?php echo get_field('upload_pdf_book'); ?>"> <img src="<?php echo get_field('cover_picture'); ?>" alt="<?php
the_title(); ?>" >
</a>
</div>
<?php if( $i % 4 == 0 ): ?>
</div> <!-- close the container -->
<?php endif; ?>
<?php $i++; ?>
<?php endwhile; ?>
</div>
您也可以使用 $WP_Query 的 current_post 属性,像这样:
<?php
$args = array(
'post_type' => 'page',
'posts_per_page' => 5
);
$loop = new WP_Query($args);
while ($loop->have_posts()) :
$loop->the_post();
if ($loop->current_post % 4 == 0) {
echo '<div class="container">';
echo '<div class="cfcolumn">';
//more code here
echo '</div>';
echo '</div>';
}
else {
echo '<div class="cfcolumn">';
//more code here
echo '</div>';
}
echo '</div>';
endwhile; wp_reset_postdata();
?>`
我希望每四个 Cfcolumns 都包含在一个 Div 容器中,其中包含一个 Class
这是我在索引页中的 While 循环:
<div id="left-area" style="padding-top: 58px;">
<!-- #custom-area -->
<?php while ( have_posts() ) : the_post(); ?>
<div class="cfcolumn">
<a href="<?php echo get_field('upload_pdf_book'); ?>"> <img src="<?php echo get_field('cover_picture'); ?>" alt="<?php
the_title(); ?>" >
</a>
</div>
<?php endwhile; // end of the loop. ?>
<!-- #custom-area -->
</div> <!-- #left-area -->
我想如果你不想学习模数 - 你可以重置你的计数器。
<div id="left-area" style="padding-top: 58px;">
<!-- #custom-area -->
<?php
//Initiate the counter
$counter = 0; ?>
<?php while ( have_posts() ) : the_post(); ?>
<?php
//add 1 to the counter
$counter++;
//If the counter = 4, then spit out the HMTL
if($counter == 4): ?>
<div class="whateverClassWrapper">
<?php endif; ?>
<div class="cfcolumn">
<a href="<?php echo get_field('upload_pdf_book'); ?>">
<img src="<?php echo get_field('cover_picture'); ?>" alt="<?php
the_title(); ?>" >
</a>
</div>
<?php
//close the HTML tag initiated by your counter
if($counter == 4): ?>
</div>
<?php
//Reset the counter
$counter = 0;
endif; ?>
<?php endwhile; // end of the loop. ?>
<!-- #custom-area -->
</div> <!-- #left-area -->
这应该可行 - 但尚未测试。
您可以设置一个计数器来计算当前循环,然后检查它是否可以被 4 整除以在您的内容之前和之后插入和关闭容器。
<div id="left-area" style="padding-top: 58px;">
<?php $i = 1; ?>
<?php while ( have_posts() ) : the_post(); ?>
<?php if( $i % 4 == 0 ): ?>
<div class="container">
<?php endif; ?>
<div class="cfcolumn">
<a href="<?php echo get_field('upload_pdf_book'); ?>"> <img src="<?php echo get_field('cover_picture'); ?>" alt="<?php
the_title(); ?>" >
</a>
</div>
<?php if( $i % 4 == 0 ): ?>
</div> <!-- close the container -->
<?php endif; ?>
<?php $i++; ?>
<?php endwhile; ?>
</div>
您也可以使用 $WP_Query 的 current_post 属性,像这样:
<?php
$args = array(
'post_type' => 'page',
'posts_per_page' => 5
);
$loop = new WP_Query($args);
while ($loop->have_posts()) :
$loop->the_post();
if ($loop->current_post % 4 == 0) {
echo '<div class="container">';
echo '<div class="cfcolumn">';
//more code here
echo '</div>';
echo '</div>';
}
else {
echo '<div class="cfcolumn">';
//more code here
echo '</div>';
}
echo '</div>';
endwhile; wp_reset_postdata();
?>`