Loop 循环网格：自定义文章/产品列表（完整图文步骤）

一、Loop 是什么：一次设计，批量套用

Elementor 自带的 Archive Posts 部件给你几种预设卡片样式，改改颜色字号还行，想动结构（比如图片放左边、加个自定义字段）就无能为力了。

Loop Grid 的思路完全不同：卡片长什么样，你自己用 Elementor 设计一次，然后列表里每一条都自动套用这张卡片、自动填入各自的数据 🎯。

比如你在 Loop Item 模板里设计一张卡片：特色图（动态）+ 标题（动态）+ 摘要（动态）+ 按钮（动态链接）。保存后，文章 1 自动填入自己的图/标题/摘要/链接，文章 2 也一样，后面的文章全部照此办理——改卡片一处，整个列表跟着变。

一张卡片列表涉及三个要素：动态标签负责填数据，容器负责卡片结构，查询负责决定显示哪些条目。

---

二、创建 Loop Item 模板

🏗️ 2.1 从 Loop Grid 部件开始

1. 用 Elementor 打开要放列表的页面（首页、归档模板都可以）。
2. 左侧小部件搜索 Loop Grid，拖入画布。
3. 拖入后它和普通部件不一样：会提示你先创建一个模板——点「Create Template」。

4. 画布切换进入 Loop Item 编辑状态（注意：你现在编辑的是「一张卡片」，不是整个列表）。

💡 另一种入口：后台 模板 → Loop Item → Add New，先建好模板再在 Loop Grid 里选用。两种等价。
🔍 编辑 Loop Item 时想回到列表设置：用导航器（Navigator）选中 Loop Grid 节点，是切换回列表层面最稳的方式。

🧩 2.2 设计卡片

进入卡片编辑后，拖部件并用动态标签绑数据：

1. 卡片本体是一个容器：
2. 样式：白底、圆角 8px、轻微阴影
3. 高级 → Padding：0（图片要顶满卡片）
4. 拖入 图像部件 → 图片字段点动态标签 → Featured Image。
5. 拖入 标题部件 → 动态标签 → Post Title；HTML 标签选 H3；样式调字号 18px。
6. 拖入 文本部件 → 动态标签 → Post Excerpt（摘要）。
7. 拖入 按钮部件 → 文字 Read More → 链接动态标签 → Post URL。

✨ 进阶技巧：把卡片容器的 HTML 标签改为 a，链接动态标签选 Post URL——整张卡片可点击，比只给按钮加链接体验好。

🏷️ 2.3 加入自定义字段（可选）

如果你用 ACF 配了自定义字段，卡片里同样能调用：

• 拖入文本部件 → 动态标签 → ACF Field → 选 model（型号）。
• 产品卡片就能显示「型号：XXX」这类自定义数据。

💾 2.4 保存模板

编辑完点「更新」。Loop Grid 会立即用真实数据渲染出整个列表——每条都是你的卡片样式、各自的内容。

---

三、配置查询：显示什么内容

选中 Loop Grid 本体（用导航器），左侧「Layout/Query」设置 🔍。

🎛️ 3.1 布局设置

• Columns：每行几列，可按设备调（常用：桌面 3、平板 2、手机 1）
• Gap：卡片间距（常用 24px）
• Posts Per Page：单页条数（常用 6–12）

🔎 3.2 Query（查询）设置

Query 决定列表里出现哪些条目：

• Source（数据源）：Posts / Products / 自定义文章类型 / Current Query（归档模板里用，自动跟随当前分类）
• Include / Exclude：按分类、标签、作者、具体条目包含或排除
• Order By：排序——日期、标题、随机等
• Offset：跳过前 N 条（做「最新 1 条大图 + 列表从第 2 条开始」时有用）

三个典型场景：

• 首页「最新文章」区：Source = Posts，Order By 日期倒序，Posts Per Page = 3。
• 归档页：Source = Current Query——自动显示当前分类/标签下的条目（Loop Grid 放 Archive 模板里时必选这个）。
• 产品列表：Source = Products 或你的 ACF 产品类型，按分类过滤。

📄 3.3 分页（Pagination）

条目多于单页数量时开分页：

• Numbers / Previous-Next：标准数字分页。
• Load More 按钮：点击追加加载（注意：官方更新日志曾修复多 Posts 部件并存时 Load More 重复加载的问题，保持插件为最新版）。
• Infinite Scroll：滚动到底自动加载。

💡 SEO 小提醒：归档页优先用数字分页（搜索引擎好爬）；Load More 和无限滚动适合首页区块。

---

四、实战：首页「最新案例」区

🎯 目标：首页放 3 张案例卡片，点击进入详情页。

🏗️ 4.1 搭区块

1. 首页加一个容器，Padding 上下 80px。
2. 拖入标题：「最新案例」，居中。
3. 标题下方拖入 Loop Grid，点 Create Template。

🎨 4.2 设计案例卡片

1. 图像 → Featured Image，比例 4:3，圆角顶部。
2. 内容容器（Padding 20px）：
3. 标题 → Post Title，H3
4. 文本 → Post Excerpt，限 2 行
5. 文本小字 → 动态标签 Post Date（日期）
6. 卡片容器 HTML 标签改 a，链接 Post URL。
7. 悬停效果：卡片容器 → 样式 → 悬停态阴影加深 + Transform 轻微上移。

⚙️ 4.3 配查询和布局

• Columns：桌面 3，手机 1。
• Query：Source = Posts（或案例类型），Per Page = 3，日期倒序。
• 分页：关闭（只显示最新 3 条）。

✅ 4.4 验证

• 前台看：3 张卡片样式一致、内容各自正确、整卡可点。
• 手机视图：单列堆叠，图片不变形。
• 新发一篇文章：列表自动更新——这就是 Loop 的价值。

---

五、Loop Grid vs Posts vs Archive Posts

三个都能做列表，选型对照 📋：

• 卡片样式：Posts / Archive Posts 用预设皮肤；Loop Grid 完全自定义
• 自定义字段：Posts / Archive Posts ❌ 不支持；Loop Grid ✅ ACF 等随便调
• 使用场景：Posts 用于普通页面区块；Archive Posts 用于归档模板；Loop Grid 任何地方都能用
• 上手难度：Posts / Archive Posts 低；Loop Grid 中
• 数据源：Posts 手动查询；Archive Posts 自动跟随归档；Loop Grid 手动或 Current Query

经验法则：预设皮肤够用就用 Posts/Archive Posts（快）；要品牌化卡片或自定义字段，上 Loop Grid。

🆕 版本动向：Elementor Pro 4.2.0 已为 Atomic 编辑器引入新的 Loop 能力（构建动态内容布局）。Atomic Loop 是同一思路在新架构上的延续，本课的概念（模板 + 查询 + 分页）完全通用。

---

六、常见问题排查

⛔ 6.1 Loop Grid 显示空白

• 查询条件太严格：分类/标签过滤后没有匹配条目——放宽条件或补内容。
• 归档模板里 Source 没选 Current Query：手动查询和归档上下文对不上。
• 条目没有特色图：图像动态标签读不到就空，给条目补特色图，或在卡片里给图片设备用占位。

⛔ 6.2 卡片样式改了但不生效

• 你改的是 Loop Grid 本体而不是 Loop Item 模板——进模板编辑状态改卡片。
• 改了模板但前台没变：清缓存（模板也是缓存对象）。

⛔ 6.3 分页点击后跳回顶部或重复加载

• 页面上有多个列表部件且都开了 Load More：是已知问题的旧版本症状，把 Elementor 和 Pro 更新到最新。
• 数字分页跳转异常：检查固定链接设置，重新保存一次。

⛔ 6.4 摘要长度不受控

• Excerpt 长度在 Loop Item 模板的文本部件设置里调（Excerpt Length）。
• 文章没写摘要时 WordPress 自动截取正文——重要条目手动填写摘要框，质量更可控。

⛔ 6.5 想做「一行横滑」而不是网格

Loop Grid 是网格不是轮播。横向滑动列表用 Loop Carousel 部件（同族，轮播形态），模板和查询的玩法完全一致。