【问题标题】:Wrap every x amount of items inside a div - Php while loop将每 x 数量的项目包装在一个 div 中 - Php while 循环
【发布时间】:2022-01-23 13:34:33
【问题描述】:

我有一些代码可以将每 2 个帖子包装在一个 div 中。我现在想每 6 或 8 个将帖子包装在一个 div 中。

代码在这里:

<?php 

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

                <?php $i = 0; ?>
                
            <?php while ( $loop->have_posts() ) : $loop->the_post(); ?>

                <?php if ( $i % 2 ==  0) : ?>
                    <div class="flex-content-container">
                <?php endif; ?>

                <div class="latest-posts">

                        <h3><a href="<?php the_permalink(); ?>"><?php the_title(); ?></a></h3>
                
                </div>

                <!-- changed == 0 to != 0  -->
                <?php if ( $i % 2 != 0 ) : ?>
                    </div>
                <?php endif; ?>

            <?php $i++; endwhile; 
            ?>

            <?php wp_reset_query(); ?>

             <!-- added closing </div> for odd number of posts -->
        <?php if ( $i % 2 != 0 ) : ?>
        </div>
            </div>
        <?php endif; ?>

我以为我可以将 2 更改为我想要的任何数字,但这似乎不起作用。

有什么帮助吗?

【问题讨论】:

  • 将 "( $i % 2 == 0)" 内的两个更改为 6.. 或任何你想要的(假设这当前有效 - 尚未测试)。然而......这可能是错误的方式?你只是想让它们占据屏幕的 50% 吗?
  • 这似乎不起作用。我正在尝试将每 6 个(可能是 8 个)帖子包装在 flex-content-container div 中,将“($i % 2 == 0)”更改为 6,在 div 内有两个帖子,然后在外面有 4 个帖子
  • 好的.. 让我用一些演示数据检查实际循环

标签: php wordpress loops while-loop


【解决方案1】:

给你,我整理了一下 - 希望它符合你的喜好(每个编码器等)
您可以在顶部设置“分隔符”。

<?php
$result     = '';
$posts      = array();
$divider    = 6;

// The Query
$args = array(
    'post_type'     => 'latest_posts', 
    'posts_per_page'=> 100, 
    'post_status'   => 'publish'
);
$query = new WP_Query( $args );

// The Loop
if ( $query->have_posts() ) {
    while ( $query->have_posts() ) {
    $query->the_post();
    
        $posts[] = '
        <div class="post">
            <div class="p-3">
                <a href="'.get_the_permalink().'">'.get_the_title().'</a>
            </div>
        </div>
        ';

    }
}
wp_reset_postdata();


$postsGrouped = array_chunk($posts, $divider);

foreach($postsGrouped as $group){
    $result .= '<div class="flex-container">'.implode('', $group).'</div>';
}
?>

<div class="latest-posts"><?php echo $result; ?></div>

说明:
我们正在浏览帖子,将它们收集到一个数组中,最后我们使用“array_chunk”函数对它们进行分组。然后重建回显并完成。

在此处控制每个块/包装的项目数:

$divider    = 6;

请注意:
在这一行中,我们用最终的 div 包装

echo '<div class="latest-posts">'.$result.'</div>';

你可以控制 div 有什么类。

【讨论】:

  • 谢谢。输出的 html 是一些帖子在一个 flex-container div 中,然后是 5 个等等......`
  • 哎呀...忘记检查它是否是最后一个帖子。你现在可以试试吗?
  • 结果是一个 'latest posts' div,其中包含一个 'flex-container' div(其中包含 5 个 'posts' div)和 6 个 'post' div。然后是一个 'flex-container' div,其中包含四个 'post' div,然后是一个单独的 'post' div。
  • 编辑了我的答案...如果这个答案很好,不要忘记将其标记为正确,这样它就会被存档而不是等待处理。很高兴为您提供帮助;)
  • 我不是说加载更多按钮,我只是说变量中有更多的 html、js 和 php (为了显示一个更简单的示例,我将其全部删除) )
猜你喜欢
  • 2012-10-27
  • 1970-01-01
  • 2010-12-20
  • 1970-01-01
  • 1970-01-01
  • 2021-02-21
  • 1970-01-01
  • 1970-01-01
  • 1970-01-01
相关资源
最近更新 更多