WordPress 7.1 后台 List Table 的 HTML 结构重构，可能会造成一些插件的功能无法使用

WordPress 7.1 的发布，我们前面也做了详细的介绍，其中就有针对后台管理界面的更新，为了大幅提升无障碍功能（Accessibility），WordPress 官方彻底重构了后台文章列表表格（Admin Post List Table）的底层 HTML 标记结构，也包括使用标准列表表格组件的页面。

这一变动虽然完美解决了一个长达 11 年的 Core 工单，但也带来了潜在的破坏性变更（Breaking Changes），WPJAM Basic 有些功能就出问题了😅，下面我们详细梳理本次更新的核心变动、受影响的范围，以及如何进行适配。

解决 11 年之久的 Accessibility 工单

在以往的 WordPress 后台列表界面中，表格的第一列（即批量操作的复选框列）一直使用的是 <th scope="row" class="check-column"> 标签。

从语义学和无障碍访问的角度来看，这会导致严重的体验问题：屏幕阅读器（Screen Reader）会将“选择全选/选择该项”误识别为整行的行标题。此外，当文章被锁定且出现锁图标时，由于缺少文字标签，屏幕阅读器往往只能朗读出“Select All”，导致视障用户难以准确识别具体对应哪一篇文章。

核心代码变动对比

从 WordPress 7.1 开始，后台列表表格的底层 HTML 结构发生了颠倒式的替换：

• 复选框列（Check Column）：从原本的 <th scope="row"> 降级为普通的单元格 <td>。
• 文章标题列（Post Title Column）：从原本的普通单元格 <td> 升级为标准的行标题 <th scope="row">，并新增了包含文章标题内容的 aria-label 属性。
• 响应式布局 CSS 调整：针对移动端或窄屏下的折叠表格单元格，官方将其 CSS 样式更新为了 Flex 布局（Flexbox）。

详细结构变更对比示例：

<!-- 更新前的 HTML 结构 -->
<tr>
  <th scope="row" class="check-column">
    <input type="checkbox" name="post[]" value="123">
  </th>
  <td class="title column-title column-primary page-title">
    <a class="row-title" href="...">Hello world!</a>
  </td>
  <td class="author column-author">admin</td>
</tr>

<!-- WordPress 7.1 更新后的 HTML 结构 -->
<tr>
  <td class="check-column">
    <input type="checkbox" name="post[]" value="123">
  </td>
  <th scope="row" class="title column-title column-primary page-title" aria-label="Hello world!">
    <a class="row-title" href="...">Hello world!</a>
  </th>
  <td class="author column-author">admin</td>
</tr>

影响范围与适配及应对

普通用户与前端主题：完全无影响。

本次重构仅发生在后台管理界面，前台展示与主题渲染不受任何干扰。

插件与自定义扩展：可能引发严重的兼容性问题。

如果你的插件或自定义代码在后台使用了 CSS 或 JavaScript 操作列表表格，并且写法强依赖于旧版的 HTML 节点关系（例如直接使用 th.check-column 选择器，或者假设文章标题一定处于 <td> 元素内），这些脚本和样式极有可能会在 7.1 版本中失效或错位。

为了保证插件在 WordPress 7.1 能稳定运行，建议排查并更新相关的 CSS 与 JavaScript 选择器：

重构复选框选择器：

如果代码中需要选取复选框列，请避免强依赖 th 标签，建议更新选择器为 th.check-column, td.check-column 或直接使用 th input[type="checkbox"], td input[type="checkbox"]。

重构标题与行操作选择器：如果代码依赖文章标题或行操作（Row Actions），建议采用更具弹性的类名模式，如 td.title, th.title、*.column-title、*.column-primary 或 *.row-actions。

WPJAM Basic 的所有自定义 List Table 的所有编辑删除等操作都失效了，我很快就会推出新版解决这个问题，如果你比较急的话：

在 wpjam-basic/public/script.js 的大概下面这个位置：

添加下面这段代码：

if($el.hasClass('list-table-action')){
	return;
}

建议所有用户提前搭建测试环境进行检查，确保在无障碍体验升级的同时，功能能够平滑过渡。