使用 Elementor 构建文章列表时，如何为每项自动添加序号（数字标签）

在使用 Elementor 构建文章循环（Loop Grid）时，很多用户希望每篇文章左侧显示一个自动生成的数字序号，如 “1、2、3…” 并为前三项添加彩色高亮。这种效果常见于企业新闻、博客文章列表中，可以有效提升条理性和视觉层次感。

本文将介绍三种实现方式，其中重点推荐两种：纯 CSS 实现 和 JavaScript 自动添加序号。

✅ 方法一：纯 CSS 自动编号（推荐）

这是最轻量、最稳定的方法，不需要修改 Elementor 的模板结构，完全用 CSS 实现自动编号。

💡 核心思路：

使用 CSS 的 counter 和 ::before 伪元素，在每个 .elementor-loop-item 前添加编号。

✏️ 示例代码：

/* 初始化计数器 */
.elementor-loop {
  counter-reset: item-counter;
  position: relative;
}

/* 每个项加自动编号 */
.elementor-loop-item::before {
  content: counter(item-counter);
  counter-increment: item-counter;
  display: inline-block;
  width: 24px;
  height: 24px;
  margin-right: 10px;
  line-height: 24px;
  text-align: center;
  color: white;
  font-weight: bold;
  background-color: #aaa;
  border-radius: 4px;
  font-size: 14px;
}

/* 前三项加彩色背景 */
.elementor-loop-item:nth-child(1)::before {
  background-color: #e74c3c; /* 红色 */
}
.elementor-loop-item:nth-child(2)::before {
  background-color: #f39c12; /* 橙色 */
}
.elementor-loop-item:nth-child(3)::before {
  background-color: #3498db; /* 蓝色 */
}

✅ 优点：

• 不侵入模板结构
• 纯前端实现，不影响性能
• 自动适配分页、过滤等变化

✅ 方法二：使用 JavaScript 动态添加序号

适用于需要将编号插入到特定位置（如标题前）或控制更复杂的交互场景。

✏️ 示例代码：

<script>
document.addEventListener("DOMContentLoaded", function () {
  document.querySelectorAll(".elementor-loop-item").forEach((el, index) => {
    const span = document.createElement("span");
    span.className = "auto-number";
    span.textContent = index + 1;
    el.prepend(span);
  });
});
</script>

<style>
.auto-number {
  display: inline-block;
  width: 24px;
  height: 24px;
  line-height: 24px;
  margin-right: 10px;
  text-align: center;
  font-weight: bold;
  color: white;
  border-radius: 4px;
  background-color: #aaa;
}

.elementor-loop-item:nth-child(1) .auto-number {
  background-color: #e74c3c;
}
.elementor-loop-item:nth-child(2) .auto-number {
  background-color: #f39c12;
}
.elementor-loop-item:nth-child(3) .auto-number {
  background-color: #3498db;
}
</style>

✅ 优点：

• 可灵活插入到标题、摘要等任意元素前
• 可实现动画、计数延迟等扩展效果

⚠️ 注意事项：

• 依赖 JS，页面加载前不会生效
• 需确保 .elementor-loop-item 类名存在

☑ 方法三：使用 PHP 短代码生成序号（了解即可）

你也可以尝试通过短代码 + WP_Query 的方式为每项生成序号，但这种方式有一定限制，尤其在 Elementor 的 Loop Grid 中：

示例短代码：

add_shortcode('post_index', function () {
    static $index = 0;
    return ++$index;
});

缺点：

• Elementor 的模板每次渲染都是“单独上下文”，计数会被重置，导致所有项都显示 1；
• 需要依赖全局变量或缓存来维持序号状态，开发难度高；
• Elementor 本身没有提供“当前项索引”变量。

👉 因此，PHP 短代码生成序号在 Elementor 环境下并不稳定，更多用于原生循环开发或插件扩展中。

🧠 总结对比

🚀 结语

如果你正使用 Elementor Pro 构建 Loop Grid 页面，推荐优先使用 CSS 自动编号方式，零代码入侵、效果稳定；若有更复杂的 DOM 操作需求，可结合 JavaScript 动态渲染。至于 PHP 方法，可作为学习和高级插件开发时的备用方案。

希望本文对你实现美观又灵活的文章编号布局有所帮助！