带加载更多按钮的Bootstrap两列布局PHP动态实现咨询

看起来你现在的代码有个小问题——两次调用have_rows()会重复遍历所有行，导致左右两列内容完全一样，这肯定不是你想要的效果。先把两列布局的逻辑修正，再一步步实现加载更多功能，我给你拆解成几个步骤：

第一步：修复两列内容分配逻辑 #

我们可以一次遍历所有行，用计数器判断奇偶，把内容分别放到左右两个列的容器里，这样就不会重复渲染了：

<?php
if(have_rows('your_repeater_field')): // 记得替换成你的 repeater 字段名
    $left_col = '';
    $right_col = '';
    $counter = 0;
    while(have_rows('your_repeater_field')): the_row();
        $counter++;
        // 渲染单个 review 的 HTML，替换成你的实际字段
        $review_html = '<div class="reviews mb-4 p-3 border rounded">'; // 加样式让内容更美观
        $review_html .= '<h5 class="mb-2">' . get_sub_field('review_title') . '</h5>';
        $review_html .= '<p class="text-muted">' . get_sub_field('review_content') . '</p>';
        $review_html .= '</div>';

        // 奇数行放左列，偶数行放右列
        if($counter % 2 == 1){
            $left_col .= $review_html;
        } else {
            $right_col .= $review_html;
        }
    endwhile;
?>
<div class="row g-4"> <!-- 加gutter让列之间有间距 -->
    <div class="col-md-12 col-lg-6"><?php echo $left_col; ?></div>
    <div class="col-md-12 col-lg-6"><?php echo $right_col; ?></div>
</div>
<?php endif; ?>

第二步：添加加载更多的基础结构 #

现在要实现分页加载，我们需要：

• 隐藏的页码计数器，记录当前加载到第几页
• 加载更多按钮
• 加载状态和无更多内容的提示容器

在页面底部添加：

<div class="text-center mt-5">
    <input type="hidden" id="current_page" value="1">
    <button id="load_more_btn" class="btn btn-primary">加载更多</button>
    <div id="loading_status" class="d-none text-muted mt-2">加载中...</div>
    <div id="no_more_content" class="d-none text-muted mt-2">没有更多内容了</div>
</div>

第三步：后端编写加载更多的PHP处理逻辑 #

我们可以在当前页面里通过判断AJAX请求来返回新内容，不用单独写接口：

<?php
// 检查是否是AJAX加载更多请求
if(isset($_POST['action']) && $_POST['action'] == 'load_more_reviews' && isset($_POST['page'])){
    $page = intval($_POST['page']);
    $per_page = 4; // 每次加载4条（左右列各2条，保持布局对称）
    $offset = ($page - 1) * $per_page;

    // 获取所有review数据（这里以ACF repeater为例，根据你的数据源调整）
    $all_reviews = get_field('your_repeater_field');
    $total_count = count($all_reviews);
    $target_reviews = array_slice($all_reviews, $offset, $per_page);

    $left_html = '';
    $right_html = '';
    $counter = $offset + 1; // 从当前偏移量开始计数奇偶

    foreach($target_reviews as $review){
        // 复用之前的review渲染逻辑
        $item_html = '<div class="reviews mb-4 p-3 border rounded">';
        $item_html .= '<h5 class="mb-2">' . $review['review_title'] . '</h5>';
        $item_html .= '<p class="text-muted">' . $review['review_content'] . '</p>';
        $item_html .= '</div>';

        if($counter % 2 == 1){
            $left_html .= $item_html;
        } else {
            $right_html .= $item_html;
        }
        $counter++;
    }

    // 返回JSON格式的结果
    echo json_encode([
        'left_content' => $left_html,
        'right_content' => $right_html,
        'has_more' => ($offset + $per_page) < $total_count
    ]);
    die();
}
?>

第四步：前端AJAX实现加载交互 #

用jQuery写AJAX逻辑（如果项目用原生JS，也可以改成fetch API）：

$(document).ready(function(){
    $('#load_more_btn').click(function(){
        const $btn = $(this);
        const currentPage = parseInt($('#current_page').val());
        const nextPage = currentPage + 1;

        // 切换加载状态
        $btn.addClass('disabled');
        $('#loading_status').removeClass('d-none');

        // 发送请求
        $.ajax({
            url: window.location.href,
            type: 'POST',
            data: {
                action: 'load_more_reviews',
                page: nextPage
            },
            dataType: 'json',
            success: function(res){
                // 追加新内容到对应列
                $('.col-lg-6:first').append(res.left_content);
                $('.col-lg-6:last').append(res.right_content);

                // 更新页码
                $('#current_page').val(nextPage);

                // 恢复按钮状态
                $btn.removeClass('disabled');
                $('#loading_status').addClass('d-none');

                // 没有更多内容时隐藏按钮
                if(!res.has_more){
                    $btn.hide();
                    $('#no_more_content').removeClass('d-none');
                }
            },
            error: function(){
                $('#loading_status').addClass('d-none');
                $btn.removeClass('disabled');
                alert('加载失败，请稍后重试');
            }
        });
    });
});

额外优化建议 #

• 给.reviews容器加hover效果，提升交互体验：.reviews:hover { box-shadow: 0 2px 8px rgba(0,0,0,0.1); }
• 如果你的数据源是自定义文章类型，把PHP里的array_slice换成WP_Query分页查询即可
• 可以添加防抖逻辑，防止用户多次点击加载按钮

内容的提问来源于stack exchange，提问作者Tysonius