PHP/WordPress中按N个项目分组并包裹内容的教程

<?php 
$loop = new WP_Query( array( 
    'post_type'      => 'latest_posts', 
    'posts_per_page' => 100, 
    'post_status'    => 'publish' 
) ); 

$i = 0; // 初始化计数器

while ( $loop->have_posts() ) : $loop->the_post(); 
    if ( $i % 2 == 0 ) : // 每2个项目开始一个新容器
        echo '<div class="flex-content-container">';
    endif; 
?>
    <div class="latest-posts">
        <h3><a href="<?php the_permalink(); ?>"><?php the_title(); ?></a></h3>
    </div>
<?php 
    if ( $i % 2 != 0 ) : // 每2个项目结束一个容器
        echo '</div>';
    endif; 
    $i++; 
endwhile; 

wp_reset_query(); 

// 处理文章总数为奇数时，最后一个容器未闭合的情况
if ( $i % 2 != 0 ) : 
    echo '</div>'; // 确保最后一个未闭合的容器被关闭
endif; 
?>

<?php
$result  = ''; // 用于存储最终生成的HTML字符串
$posts   = array(); // 用于存储每个文章的HTML片段
$divider = 6; // 定义每组的项目数量，可根据需要调整

// WordPress 查询参数
$args = array(
    'post_type'      => 'latest_posts', 
    'posts_per_page' => 100, // 获取最多100篇文章
    'post_status'    => 'publish'
);
$query = new WP_Query( $args );

// 遍历文章，收集HTML片段
if ( $query->have_posts() ) {
    while ( $query->have_posts() ) {
        $query->the_post();

        // 为每篇文章生成一个独立的HTML片段并添加到数组
        $posts[] = '
        <div class="post-item">
            <div class="p-3">
                <a href="'.get_the_permalink().'">'.get_the_title().'</a>
            </div>
        </div>
        ';
    }
}
wp_reset_postdata(); // 重置文章数据，避免影响后续查询

// 使用 array_chunk 将文章HTML片段分组
// 例如，如果 $divider = 6，那么 $postsGrouped 将是一个二维数组，
// 每个子数组包含最多6个文章的HTML片段。
$postsGrouped = array_chunk($posts, $divider);

// 遍历分组后的数组，为每个分组生成一个包裹容器
foreach($postsGrouped as $group){
    // 将当前分组内的所有HTML片段连接起来，并用一个 .flex-container 包裹
    $result .= '<div class="flex-container">'.implode('', $group).'</div>';
}
?>

<!-- 在HTML中输出最终结果 -->
<div class="latest-posts-wrapper">
    <?php echo $result; ?>
</div>