WordPress 分类页设计 Skill 创建指南：用「插入HTML」块制作风格一致的分类页

你是一名擅长 WordPress 主题分析的前端工程师。  
请根据我提供的站点信息，提取以下设计 Token，用于后续「自定义HTML块」的内联样式编写。

我的站点：[粘贴首页截图 / 提供站点URL]

请提取：

**1. 色彩**
- 主色（按钮、链接、强调色）：
- 背景色（页面底色）：
- 卡片/容器背景色：
- 正文文字色：
- 次要文字色（描述、时间等）：
- 边框色：

**2. 字体**
- 标题字体族（从页面源码或截图推断）：
- 正文字体族：
- 标题常用字号（桌面端 H2/H3）：
- 正文字号：

**3. 间距与圆角**
- 卡片内边距（padding）：
- 卡片间距（gap）：
- 卡片/按钮圆角（border-radius）：

**4. 阴影**
- 卡片悬浮阴影（box-shadow）：

**5. 整体调性（用3个词描述）**：

输出格式：直接输出一段 CSS Variables 声明，命名如下：
:root {
  --wp-primary: ;
  --wp-bg: ;
  --wp-card-bg: ;
  --wp-text: ;
  --wp-text-muted: ;
  --wp-border: ;
  --wp-font-heading: ;
  --wp-font-body: ;
  --wp-radius: ;
  --wp-shadow: ;
}

请分析我的 WordPress 站点，输出分类页所需的内容结构信息：

站点截图/URL：[填写]

我需要了解：
1. 文章/产品的主要分类有哪些？（一级分类数量和名称）
2. 每个分类下大概有多少条内容？（稀疏 <10条 / 中等 10-50条 / 密集 50条以上）
3. 每条内容卡片需要展示哪些字段？
   - 必须展示：标题、缩略图、分类标签
   - 可选展示：摘要、发布日期、作者、阅读数、标签
4. 用户进入分类页的目的是什么？（浏览发现 / 精准筛选 / 对比选择）
5. 当前分类页（如有）存在的问题是什么？

根据以上信息，推荐最适合的分类页布局方案，并说明理由。

请生成一段可直接粘贴进 WordPress「自定义HTML」块的代码。

## 设计约束（严格遵守，不得使用其他颜色/字体）
[粘贴提示词1输出的 CSS Variables]

## 分类页规格
- 布局：三列网格（桌面），两列（平板 768px以下），一列（手机 480px以下）
- 每张卡片展示：缩略图（16:9）、分类标签、标题、摘要（最多2行）、发布日期
- 卡片交互：hover 时轻微上移 + 阴影加深
- 顶部：分类名称大标题 + 描述文字 + 文章总数
- 底部：「加载更多」按钮（点击后显示隐藏的卡片，纯JS实现，无需翻页）

## WordPress 适配要求
- 所有样式写在 <style> 标签内，class 名称统一加前缀 `.myCat-`
- 图片 src 用占位符 `https://placehold.co/800x450`，并注明替换方法
- 不使用任何外部 JS 库，纯原生 JS
- 避免与 WordPress 默认样式冲突（重置 box-sizing、不使用 * 选择器）

## 示例数据
请生成 6 张卡片的示例内容（标题、摘要、日期自行填写合理示例）。

输出：完整的 HTML 代码块（<style> + <div> 结构 + <script>），可直接复制粘贴。

在提示词3的基础上，增加客户端筛选功能：

## 新增需求
- 顶部增加筛选 Tab：「全部」+「[子分类1]」+「[子分类2]」+「[子分类3]」
- 点击 Tab 后，卡片区域平滑过渡，只显示对应分类的卡片
- 筛选状态通过 URL hash 保留（如 #design），刷新后自动恢复筛选状态
- 支持关键词搜索框（输入时实时过滤卡片标题，不请求服务器）

## 每张卡片需增加 data 属性用于筛选
<div class="myCat-card" data-category="design" data-title="文章标题">

## 动画要求
- Tab 切换时卡片有 fade + slide 入场动画
- 搜索无结果时显示友好提示

## WordPress 约束（同提示词3）

输出完整代码，注释说明每个功能模块的位置，方便后期手动修改数据。

请生成一个通过 WordPress REST API 动态拉取文章的分类页 HTML 块。

## 接口说明
WordPress REST API 获取文章列表：
GET /wp-json/wp/v2/posts?categories=[分类ID]&per_page=12&page=1&_embed

返回字段中：
- title.rendered → 文章标题
- excerpt.rendered → 摘要
- link → 文章链接
- date → 发布时间
- _embedded['wp:featuredmedia'][0].source_url → 缩略图URL
- _embedded['wp:term'][0] → 分类信息

## 需求
- 页面加载时自动请求 API，渲染文章卡片
- 支持「加载更多」翻页（page 参数递增）
- 加载中显示骨架屏动画（纯 CSS）
- API 请求失败时显示错误提示 + 重试按钮
- 分类 ID 通过 HTML 中的 data-category-id 属性配置，方便复用

## 设计约束
[粘贴提示词1的CSS Variables]

## WordPress 适配要求（同前）

请在代码顶部注释说明：如何找到 WordPress 分类 ID，以及如何修改每页数量。

请对比以下两份代码，检查风格一致性：

**现有页面代码（从WordPress查看源码获取）：**
[粘贴现有页面的HTML片段]

**新生成的分类页代码：**
[粘贴提示词3/4/5的输出]

检查维度：
1. 字体族是否一致？
2. 主色/强调色是否匹配？
3. 卡片圆角是否与现有卡片一致？
4. 间距比例感是否协调？
5. 按钮样式是否与现有按钮统一？
6. hover 动画风格是否相近？

输出：
- 一致性评分（0-100）
- 具体差异点列表
- 修正后的完整代码

请检查以下 WordPress 自定义HTML块代码的移动端适配：

[粘贴代码]

检查点：
- 断点是否合理（480/768/1024）？
- 触摸目标（按钮/链接）最小是否达到 44×44px？
- 文字在 375px 宽度下是否可读（正文不小于 14px）？
- 图片是否设置了 max-width:100% 和 height:auto？
- 是否有横向滚动问题？

输出修复后的完整代码，并列出每处修改说明。

---
name: wp-category-page
description: >
  为 WordPress 站点生成可直接粘贴进「自定义HTML块」的分类页代码。
  当用户说「帮我做一个WordPress分类页」「用HTML块做分类展示」
  「保持现有主题风格新建分类页」时触发本 Skill。
  输出包含内联样式和原生JS的完整HTML代码，无需修改主题文件。
---

# WordPress 分类页 HTML 块 Skill

## 执行流程

### Step 1 — 收集站点信息
询问用户：
- 站点截图或URL（用于提取设计Token）
- 分类名称和子分类列表
- 每张卡片需要展示的字段
- 是否需要动态加载（REST API）或纯静态硬编码
- 使用的 WordPress 版本和块编辑器类型（Gutenberg/经典）

### Step 2 — 提取设计Token
运行「WordPress站点风格提取」提示词，获得 CSS Variables。
如果用户提供不了截图，询问主色和字体，其余使用中性默认值。

### Step 3 — 生成代码
根据用户需求选择版本：
- 纯静态版（提示词3）：内容少、不需要动态更新
- 筛选交互版（提示词4）：内容多、需要前端筛选
- REST API版（提示词5）：需要自动同步WordPress文章

### Step 4 — 输出与使用说明
代码输出后，附上操作说明：
1. 在WordPress后台进入目标页面编辑
2. 添加「自定义HTML」块（Gutenberg）或切换到「文本」模式（经典编辑器）
3. 粘贴完整代码
4. 替换占位图片URL和示例文字
5. 预览确认后发布

## WordPress 硬性约束（每次生成必须遵守）
- ✅ 样式写在 <style> 标签内
- ✅ class 名加唯一前缀，防止冲突
- ✅ 不依赖外部CSS/JS（或明确说明依赖项）
- ✅ 图片设置 max-width:100%
- ✅ 触摸目标 ≥ 44px
- ❌ 不使用 PHP
- ❌ 不使用 document.write()
- ❌ 不直接操作 WordPress 全局变量

请为非技术背景的 WordPress 站长，编写一份「粘贴自定义HTML块」的操作说明：

说明需要包含：
1. 如何在 Gutenberg 编辑器中添加「自定义HTML」块（截图说明用文字替代）
2. 如何在经典编辑器中切换到「文本」模式粘贴代码
3. 如何替换代码中的占位图片（统一说明 placehold.co 占位图的替换方法）
4. 如何找到 WordPress 分类的 ID（用于REST API版本）
5. 常见问题：代码粘贴后样式错乱怎么办？

语言：通俗易懂，每步配操作路径（后台菜单→页面→按钮名称）

# 获取所有分类列表（找分类ID用）
GET /wp-json/wp/v2/categories

# 获取指定分类的文章（替换 YOUR_CAT_ID）
GET /wp-json/wp/v2/posts?categories=YOUR_CAT_ID&per_page=12&_embed

# 获取文章总数（看响应头 X-WP-Total）
HEAD /wp-json/wp/v2/posts?categories=YOUR_CAT_ID

# 搜索文章
GET /wp-json/wp/v2/posts?search=关键词&_embed