# 《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 节课，已全部上传哔哩哔哩。 序号中文课时英文原名观看1面向设计师的 WordPress 展示WordPress showcase for designers[观看](https://www.bilibili.com/video/BV1sSQnBcEkk/)2用样式手册指导设计Using the Style Book[4](#eng-style-book) as a design guide[观看](https://www.bilibili.com/video/BV1xSQnBcEMX/)3理解区块主题术语与层级Overview of WordPress block theme[3](#eng-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[5](#eng-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[2](#eng-site-editor) and use it for prototyping？[观看](https://www.bilibili.com/video/BV1kLQnBWEw6/)10创建包容性网站的无障碍指南Web accessibility[6](#eng-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[7](#eng-group-block)[观看](https://www.bilibili.com/video/BV1FEQnBpEfi/)18使用 Row 与 Stack 区块做设计Designing with Row[8](#eng-row-block) and Stack[9](#eng-stack-block) blocks[观看](https://www.bilibili.com/video/BV1cjQnB9ESZ/)19使用 Columns 区块做设计Designing with the Columns block[10](#eng-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[11](#eng-gallery-block)[观看](https://www.bilibili.com/video/BV1cjQnB9EkA/)22使用媒体与文本区块Using the WordPress Media and Text block[12](#eng-media-text-block)[观看](https://www.bilibili.com/video/BV1suQnBbERF/)23深入了解封面区块Uncovering the Cover block[13](#eng-cover-block)[观看](https://www.bilibili.com/video/BV11uQnBtEE3/)24用插件创建轮播滑块Using a plugin to create a carousel slider[14](#eng-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)