test

第一步：准备工作——创建文章分类

在开始搭建前，先创建好文章分类：

1. 在 WordPress 后台，点击 “文章” → “分类”。
2. 添加以下分类（用于筛选）：
   • 新闻动态
   • 维保技术
   • 行业资讯
   • 采购招标
3. 点击 “添加新分类” 保存。

✅ 如果已经有文章了，记得给每篇文章分配对应的分类。

第二步：创建页面

1. 在后台点击 “页面” → “新建页面”。
2. 标题输入：新闻动态 或 行业资讯。
3. 在右侧“页面属性”中，选择模板为 “全宽”。
4. 点击 “发布”（保存为草稿也可以）。

第三步：添加外层容器

1. 在页面编辑器中，添加一个 “容器”区块，设为 “全宽”。
2. 设置 内边距：上下 60px–80px，左右 20px–40px。
3. 背景颜色：白色 #FFFFFF。

第四步：添加标题区

在容器内依次添加以下区块（全部居中）：

1. 小标题：“段落”区块，输入 LATEST NEWS
   • 字号 14px，颜色 #6B7280，大写，字间距 2px，居中
2. 主标题：“标题”区块（H2），输入 新闻动态
   • 字号 36px-40px，颜色 #1F2937，加粗，居中
3. 描述：“段落”区块，输入 汇集舞台设备维保技术文章、行业最新动态和实用技术资料，帮助您更好地了解和维护舞台设备。
   • 字号 16px-18px，颜色 #4B5563，居中，行高 1.6

第五步：添加分类筛选栏

1. 在标题区下方，添加一个 “行”区块。
2. 在行内添加 “按钮组”区块，依次添加分类标签：
   • 全部
   • 新闻动态
   • 维保技术
   • 行业资讯
   • 采购招标
3. 设置“按钮组”的 水平对齐 为 居中。
4. 每个按钮的样式：
   • 默认：透明背景，灰色文字 #6B7280，边框 1px solid #E5E7EB，圆角 20px，内边距 6px 16px
   • 激活状态：品牌蓝背景 #0052D9，白色文字，边框品牌蓝
   • 按钮之间间距 8px–12px

⚠️ 注意：这里的“分类筛选”如果要做成动态筛选（点击标签自动过滤文章），需要额外安装插件（如 “Post Grid & Filter”）。如果只是展示分类标签，纯静态即可。

第六步：添加文章网格（核心步骤）

在分类栏下方，添加 “文章循环（Query Loop）” 区块：

1. 插入区块：点击 +，搜索“文章循环”或“Query Loop”，点击添加。
2. 设置文章来源：
   • 在右侧设置面板中，将 “文章类型” 设为 文章（Posts）。
   • “分类”：选择你要显示的分类（如果显示全部，可以不选）。
   • “排序”：按 发布日期 → 从新到旧（最新文章排最前）。
   • “每页数量”：设为 6 或 9 篇文章。
3. 设计卡片模板：在“文章循环”区块内部，设计单个文章的显示样式：
   • 特色图：添加“特色图”区块，宽度 100%，高度 180px-200px，对象适配 cover，圆角 8px
   • 分类标签：添加“文章分类”区块，字号 12px，颜色 #6B7280（显示分类名称）
   • 标题：添加“文章标题”区块，字号 18px–20px，颜色 #1F2937，加粗，链接到文章详情
   • 摘要：添加“文章摘要”区块，字数限制 60-80字，字号 15px，颜色 #4B5563，行高 1.6
   • 日期：添加“文章日期”区块，字号 13px，颜色 #9CA3AF
   • “阅读更多”链接：添加“阅读更多”区块，文字设为 阅读全文 →，品牌蓝 #0052D9
4. 设置网格布局：
   • 选中“文章循环”区块，在“样式”面板中设置 “列数” 为 3。
   • 设置 “列间距” 为 24px–30px。