当然,现在正好进入 “选并启用主题” 的实操环节。下面分三步带你完成:
| 备选 | 为什么和“前端成长工坊”匹配 | 何时换到它 |
|---|---|---|
| Twenty Twenty-Five ✅(首荐) | 官方维护、内置 70+ Block Pattern;默认配色/字体已通过 WCAG AA,Lighthouse a11y & Performance 都能轻松 ≥ 85。 | 把它当“课堂样板间” —— 后续所有排版/布局示范都能直接基于自带 Pattern 展开。 |
| Astra(超轻量) | 首屏 < 0.5 s,性能分可冲 95+;提供教育博客 Starter Site,可做“极限性能”对比实验。 | 当想让学生体验“同一内容,不同主题速度差异”时再切。 |
| Neve(灵活) | 30+ 现成首页模板;ThemeJSON 结构清晰,适合做主题二次开发教学。 | 未来讲“定制 ThemeJSON”或多主题 AB 测试时备用。 |
若本阶段的目标是 先有可用站点,后续再深度定制,直接 启用 Twenty Twenty-Five 最省心。
| 操作 | 路径 | 关键提示 |
|---|---|---|
| ① 打开主题库 | 站点仪表盘 → Appearance › Themes(WordPress.com) | 如果你还停留在经典 WP-Admin,路径是 Appearance → Theme Showcase。 |
| ② 预览主题 | 在搜索框输入 Twenty Twenty-Five → 点击卡片右上 Preview | 可先检查首页 / 文章 / 分类页在移动端的表现。 |
| ③ 激活 | 预览满意后,点击 Activate(或三点菜单 ⋮ → Activate)(WordPress.com) | 几秒钟后顶部会出现“Theme activated”提示。 |
| ④ 自定义全局样式 | Editor › Styles(或 Open Site Editor 按钮) | 1) 上传刚才的 LOGO;2) 在 Styles › Typography/Colors 调整品牌色、字体;3) 选一个自带 Style Variation 快速统一设计(WordPress.com)。 |
| ⑤ 跑一次 Lighthouse & axe | Chrome DevTools → Lighthouse → 勾选 Performance / Accessibility → Generate Report | 记录分数,留作后续“性能优化实验”对照基线。 |
| Todo | 对应教学 / 项目指标 |
|---|---|
| A. 菜单 & 分类重建:在导航里放 “教学日志 / 作品墙 / 课程资源 / 联系” 四大入口,分类按 HTML / CSS / JS / 课堂反思 归档。 | 信息架构 ≤ 3 层;分类=课程模块,后续方便学生过滤内容。 |
| B. 把首页改成 Pattern 版面:Hero + 最近 6 篇日志 + 3×3 作品网格。 | 后面讲解 Query Loop / Masonry 等区块时能直接演示。 |
| C. 上传 Logo & Favicon(≥ 512 px) | 完成“品牌基线”;学生在 code pen 里能直接调 SVG 颜色。 |
| D. 安装必备插件:Yoast SEO、WP Super Cache、Jetpack Stats。 | 主题 + 环境阶段 Checklist 的最后一环;插件即课堂案例。 |
| E. 导出一次完整备份(工具 › 导出 → Download .zip) | 为“课堂踩坑”留后路;也能让学生体验迁移流程。 |
完成以上,你就正式把 主题 + 环境 阶段的所有量化指标(可访问性≥ 85、性能≥ 80、品牌基线、插件栈)一次性夯实,为接下来的“布局拆解 & 组件教学”提供了统一的起跑线。加油,期待看到你用 Twenty Twenty-Five 拉起的第一个 Pattern 首页!🚀