设计师学 WordPress,这套教程就是你的最佳起点。
专为视觉创作者打造的 WordPress 设计入门教程。无需编写代码,也不用接触 PHP1,借助 WordPress 现代化的 Site Editor2 和 block theme3,就能做出专业级的网站设计。
设计师为什么要学 WordPress?
传统设计工具产出的是”静态图”,而 WordPress 做出的是”可用的网站”。客户需要的,恰恰是后者。
站点编辑器让设计师真正实现”所见即所得”的网站设计,调整布局、更换字体、设置颜色、定制页眉页脚,全部在可视化界面中完成。掌握这套工具,你能承接更多建站项目,报价也能更上一层楼。
这套教程能学到什么?
站点编辑器全攻略:从界面认识到高阶操作,彻底掌握 WordPress 最核心的设计工具。
区块主题设计:理解全局样式、模板部件、区块模式的设计逻辑,学会自由定制任意主题。
视觉设计实战:涵盖页面布局、排版设计、响应式适配、动效控制,设计师关心的核心技能一网打尽。
插件辅助设计:轮播滑块、动态效果、表单美化等能力也覆盖在课程里。
课时列表
全套 24 节课,已全部上传哔哩哔哩。
| 序号 | 中文课时 | 英文原名 | 观看 |
|---|---|---|---|
| 1 | 面向设计师的 WordPress 展示 | WordPress showcase for designers | 观看 |
| 2 | 用样式手册指导设计 | Using the Style Book4 as a design guide | 观看 |
| 3 | 理解区块主题术语与层级 | Overview of WordPress block theme3 terms and hierarchy | 观看 |
| 4 | 用区块优先思维做设计 | Designing with a block first mindset | 观看 |
| 5 | 找到适合设计需求的区块主题 | Finding a block theme for your design needs | 观看 |
| 6 | 选择与安装插件 | Choosing and installing a plugin | 观看 |
| 7 | 认识 WordPress 仪表盘 | Getting started with the WordPress Dashboard5 | 观看 |
| 8 | 搞懂文章与页面的区别 | Understanding the difference between WordPress posts and pages | 观看 |
| 9 | 为什么用站点编辑器做设计原型 | Why design in the Site Editor2 and use it for prototyping? | 观看 |
| 10 | 创建包容性网站的无障碍指南 | Web accessibility6 guidelines to create inclusive websites | 观看 |
| 11 | 测试内容的无障碍性 | Testing your content for accessibility | 观看 |
| 12 | 初识站点编辑器 | Intro to the Site Editor | 观看 |
| 13 | 区分首页显示设置与不同模板 | Differentiating between homepage display settings and various templates | 观看 |
| 14 | 使用页面模板 | Using page templates | 观看 |
| 15 | 使用模板部件 | Using template parts | 观看 |
| 16 | 自定义颜色、字体、排版与布局 | Customizing theme settings: Colors, fonts, typography and layout | 观看 |
| 17 | 使用 Group 区块做设计 | Designing with the Group block7 | 观看 |
| 18 | 使用 Row 与 Stack 区块做设计 | Designing with Row8 and Stack9 blocks | 观看 |
| 19 | 使用 Columns 区块做设计 | Designing with the Columns block10 | 观看 |
| 20 | 尺寸设置:内边距、外边距与区块间距 | Dimensions: Padding, margin and block spacing | 观看 |
| 21 | 使用图库区块 | Utilize the Gallery block11 | 观看 |
| 22 | 使用媒体与文本区块 | Using the WordPress Media and Text block12 | 观看 |
| 23 | 深入了解封面区块 | Uncovering the Cover block13 | 观看 |
| 24 | 用插件创建轮播滑块 | Using a plugin to create a carousel slider14 | 观看 |
本教程由文派开源团队制作发布,遵循知识共享协议。在 B 站关注「文派开源」获取更多 WordPress 学习资源。
名词解释
- PHP:WordPress 主要使用的服务器端脚本语言。 ↩︎
- Site Editor:WordPress 的全站可视化编辑工具,可编辑模板、样式与站点结构。 ↩︎
- block theme:基于区块系统构建的主题,可直接在编辑器中定制模板和样式。 ↩︎
- Style Book:集中预览主题区块样式的设计参考界面。 ↩︎
- WordPress Dashboard:WordPress 后台管理主界面,用于管理内容、外观、插件和设置。 ↩︎
- accessibility:让更多用户,包括残障用户,也能顺畅使用网站的设计与开发实践。 ↩︎
- Group block:用于组织多个区块并统一设置布局、间距和样式的容器区块。 ↩︎
- Row:让多个区块按水平方向排列的布局方式。 ↩︎
- Stack:让多个区块按垂直方向堆叠排列的布局方式。 ↩︎
- Columns block:用于创建多列版式布局的区块。 ↩︎
- Gallery block:用于批量展示多张图片并管理网格排版的区块。 ↩︎
- Media and Text block:把媒体内容与文字说明组合展示的区块。 ↩︎
- Cover block:可在图片或视频上叠加文字与内容的视觉区块。 ↩︎
- carousel slider:以轮播方式切换多张图片或内容卡片的界面组件。 ↩︎



发表回复