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