本文详解如何在 WordPress 中为 ACF（Advanced Custom Fields）重复字段（Repeater）实现分页，并将 paginate_links() 正确渲染在 HTML 表格下方、水平居中位置，避免默认出现在表格内部或顶部的布局错误。
本文详解如何在 wordpress 中为 acf（advanced custom fields）重复字段（repeater）实现分页，并将 `paginate_links()` 正确渲染在 html 表格下方、水平居中位置，避免默认出现在表格内部或顶部的布局错误。
在使用 ACF Repeater 字段展示列表数据（如职位列表）时，常需分页以提升性能与用户体验。但初学者易将 paginate_links() 直接嵌入 while (have_rows()) 循环内部或 <table> 标签内，导致分页控件错位（如显示在表格左上角），破坏语义结构与 UI 一致性。<p><strong>核心原则是：分页逻辑属于「视图控制层」，不应混入数据循环或表格结构内部。</strong> 正确做法是——先完成表格内容渲染，再在 <code><table> 外部、独立区块中输出分页链接。<h3>✅ 推荐方案：分页脱离表格，独立居中渲染</h3>
<p>将分页代码完全移出 <code><table> 标签，并配合 CSS 实现居中对齐：<pre class="brush:php;toolbar:false;"><?php // 获取当前页码（兼容主循环与自定义查询）
$page = get_query_var('page') ?: 1;
// 分页配置
$jobs_per_page = 12;
$jobs = get_field('job_list');
$total = is_array($jobs) ? count($jobs) : 0;
$pages = $total ? ceil($total / $jobs_per_page) : 0;
$min = ($page * $jobs_per_page) - $jobs_per_page + 1;
$max = $min + $jobs_per_page - 1;
// 仅当存在重复字段数据时渲染表格
if (have_rows('job_list')) :
?></pre>
<table id="mytable" class="table table-bordered table-striped"><tbody>
<?php $row = 0;
while (have_rows('job_list')) :
the_row();
$row++;
// 跳过当前页范围外的条目
if ($row < $min) continue;
if ($row > $max) break;
// 获取子字段值
$image = get_sub_field('image');
$job_title = get_sub_field('job_title');
$company_name = get_sub_field('company_name');
$location = get_sub_field('location');
$job_time = get_sub_field('job_time');
$job_date = get_sub_field('job_date');
$cta_link_text = get_sub_field('cta_link_text');
$cta_link = get_sub_field('cta_link');
?>
<tr>
<td style="padding-top:20px; padding-bottom:20px;">
<?php if ($image) : ?>@@##@@" alt="<?php echo esc_attr($job_title); ?>" /><?php endif; ?>
</td>
<td style="padding-top:16px;">
<strong><?php echo esc_html($job_title); ?></strong><br><span style="font-size:11px;"><?php echo esc_html($company_name); ?></span>
</td>
<td style="padding-top:16px;">
<strong><?php echo esc_html($location); ?></strong><br><span style="font-size:11px;"><?php echo esc_html($job_time); ?></span>
</td>
<td style="padding-top:24px;"><strong><?php echo esc_html($job_date); ?></strong></td>
<td style="padding-top:20px;" align="center">
<button onclick="location.href='<?php echo esc_url($cta_link); ?>'" style="background-color:#ea9732; border-color:#ea9732;" class="btn btn-primary btn-md" data-title="Edit" data-toggle="modal" data-target="#edit">
<strong><?php echo esc_html($cta_link_text); ?></strong>
</button>
</td>
</tr>
<?php endwhile; ?>
</tbody></table>
<!-- ✅ 分页置于表格外部，独立居中 --><div class="pagination-wrapper" style="text-align: center; margin: 24px 0;">
<?php echo paginate_links([
'base' => add_query_arg('page', '%#%'),
'format' => '?page=%#%',
'current' => $page,
'total' => $pages,
'prev_text' => '«',
'next_text' => '»',
'type' => 'list',
'mid_size' => 2,
]);
?>
</div>
<?php else : ?><p>No jobs found.</p>
<?php endif; ?><blockquote>
<p>✅ <strong>关键改进说明：</strong> </p>
<ul><li>分页代码 (<code>paginate_links()) 完全脱离 <table>，避免 DOM 结构污染； <li>使用 <code><div class="pagination-wrapper"> 包裹并设置 <code>text-align: center，确保视觉居中；
add_query_arg('page', '%#%') 替代硬编码 get_permalink()，更健壮地支持自定义页面/伪静态； esc_html() / esc_url() 安全转义，防范 XSS； prev_text/next_text 和 mid_size 提升可用性。⚠️ 备选方案（不推荐）：表格内单行居中（仅限必须嵌入时）
若因主题限制无法修改 HTML 结构，可将分页放入 <tr><td colspan="5">...</td></tr>（注意 colspan 值需匹配实际列数，本例为 5 列）：
<tr>
<td colspan="5" style="text-align:center; padding:20px 0;">
<?php echo paginate_links([...]); ?>
</td>
</tr>
⚠️ 缺点：语义不合理（分页非数据行）、响应式下易错位、不利于无障碍访问（screen reader 可能误读为数据行）。
? 注意事项总结
-
永远校验
$jobs类型：get_field('job_list')在无数据时返回false，需is_array()判断后再count()； -
避免重复调用
have_rows()：它会重置内部指针，影响后续循环； -
分页 URL 基础（
base）必须匹配当前页面路由规则，否则点击后跳转错误； - 若启用 WordPress 固定链接（Permalink），建议使用
add_query_arg()动态生成 base，而非拼接字符串； - 对于 AJAX 分页，需额外绑定 JS 事件并替换表格内容，本文未覆盖该进阶场景。
遵循以上结构，即可实现专业、健壮、符合 Web 标准的 ACF Repeater 分页体验。
