真到出海做独立站，卡住人的不是专业名，是主题和插件这条边界。WordPress 官方把主题定义为「网站的设计」，主题控制颜色、字体、整个布局。你把这条边界搞清楚了，网站设计是什么专业这个问题基本就有答案了。
对做站的人来说，意义很直接：不用先去读一个网页设计专业才知道站该长什么样，你要知道的是主题管到哪、插件管到哪，以及怎么在本地把第一个主题跑起来。猎者出海做英文独立站，站的外观和功能怎么分，也是从这条边界开始想的。
速览：
- 这是什么：WordPress 官方把主题定义为「网站的设计」，主题控制颜色、字体、整体布局
- 官方怎么说：主题管呈现，插件管行为和功能；主题不应加入站点关键功能
- 怎么做：先装一个主题从用户视角玩一遍，再按 Quick-Start Guide 做出第一个基础主题
- 要什么环境：代码编辑器、Node.js 开发工具、本地 WordPress 环境三件套
- 常见误区：把作品集功能做进主题，用户换主题就丢功能
独立站搭建和运营的完整流程，可以看 独立站搭建和运营。
本文目录
网站设计是什么专业：先分清「院校专业」和「建站分工」两件事
这两个东西经常被混在一起。混在一起，就容易先去补一堆用不上的课，或者反过来，以为会拖几个区块就等于懂设计。
落到独立站：管设计的是主题
WordPress 官方文档把主题定义为「网站的设计」。用户在前端看到的内容，由主题塑造。
这里有个容易绕不过来的点：主题不是一张设计稿，它是一套运行在 WordPress 上的代码。主题把 WordPress 存储的内容取出来，在浏览器里显示。做主题就是决定这些内容长什么样、怎么显示。
主题干的事，就是决定内容怎么显示
你在后台写了一篇文章，标题、正文、配图都存在数据库里。主题要做的是：标题用多大字号、放在哪个位置、正文多宽、图片圆角还是直角、侧边栏有没有。这些决定都在主题里。
所以网站设计在独立站这条线上，不是一个纯画画的事。你得同时懂两样：内容怎么进 WordPress，主题怎么把它拿出来显示。前者是后台的事，后者是主题开发的事。网站网页设计整体怎么做，可以看 网站网页设计怎么做。
官方把边界划在哪：主题管呈现，插件管行为
这条边界，官方写得很清楚：「主题控制内容的呈现，插件控制站点的行为和功能」。
落到实操上：颜色、字体、布局、模板，这些放主题；表单、商店、作品集、会员，这些放插件。
为什么这么分？理由很直接：你创建的任何主题都不应加入站点关键功能，否则用户换主题时就会失去该功能。最佳实践是把站点需要的任何功能放进单独的插件，这样设计变了，功能还在。
这里有个容易被低估的点：有些用户经常换主题。你觉得自己的主题设计得好，用户会一直用，实际情况不是这样。用户换主题，功能就丢，这是实打实的损失。
还有一句话值得记住：好的主题不只是定义一两个布局和几个自定义颜色，最好的主题在好看之外还能提升与网站内容的互动。这句话把设计的标准抬高了一档：不是好看就够了，是用户愿不愿意在你这套设计里多看一页、多点一下。
两种主题类型
WordPress 支持两种主要主题类型：区块主题和经典主题。
区块主题是构建 WordPress 主题的现代方法，完全由区块构成，官方手册主要讲它，因为它是 WordPress 项目的未来。区块主题依赖含区块标记的 HTML 模板，创建者和用户都能在站点编辑器里编辑模板。
经典主题用基于 PHP 的模板系统，今天仍被支持，也仍被广泛使用。但经典主题的创建过程至少需要一些 PHP、HTML、CSS 代码知识。
还有一种叫混合主题的，只是采用了部分现代区块特性的经典主题，是社区广泛认同的叫法，但不是官方主题类型。学的时候别把它当成第三种类型。
零基础怎么练：从装一个主题到跑起第一个区块主题
零基础学网站设计，顺序比努力重要。下面这五步，是从装一个主题到跑起第一个区块主题的顺序，每一步给动作、理由、出问题怎么回查。
-
先装一个主题玩一遍。
实操截图：终端跑 node -v、npm -v 确认版本装对了。 动作：从主题目录装一个主题，在站点编辑器里改模板和全局样式。
理由：做自己的主题前，先从用户视角熟悉主题怎么工作，试着装一个主题玩一玩。这是给新手的建议。
出问题回查：改完看前端实际效果，效果不对就回站点编辑器核对模板与全局样式。
-
备齐三件套。
动作：代码编辑器、Node.js 开发工具、本地 WordPress 环境。代码编辑器没偏好就用 VS Code，跨三平台、开源。本地环境推荐 wp-env，替代可选 WordPress Studio、Local、XAMPP、MAMP、VVV。
理由：这三项是区块开发环境的基本要求。
出问题回查：终端跑 node -v、npm -v 看版本是否装上。
-
装 Node.js。
动作：推荐用 nvm，运行安装脚本，退出重启终端，运行 nvm install --lts，再跑 node -v 和 npm -v 验证。Windows 可直接从 Node.js 官网下载安装包，推荐最新版。
理由：Active LTS 是推荐版本，nvm 装在本地主目录，避免全局权限问题。
出问题回查：报 zsh: command not found: nvm 时按平台建配置文件，macOS 用 touch ~/.zshrc，Ubuntu 或 WSL 用 touch ~/.bashrc 后重复步骤。
-
按 Quick-Start Guide 做出第一个基础主题。
动作：跟着主题入门章节的 Quick-Start Guide 走。
理由：它被定位为给区块主题新手的分步指南。
出问题回查：项目带 .nvmrc 时先 nvm use 对齐版本。
-
补区块开发基础。
动作：按文件结构、block.json、注册、包装器、编辑器中的区块、标记表示、静态或动态渲染、JavaScript 八个概念顺序学。配套看 Learn WordPress 课程。
理由：区块编辑器手册是区块开发的权威资源。
出问题回查：区块报错先查 Block Error: Unexpected or Invalid Content 文档分类。
设计和发布之间还有一段路。设计稿到发布五步可以看 设计稿到发布5步，创意网页设计怎么落地可以看 创意网页设计落地步骤。
数字和限制：环境版本、主题数量、文档时效
下面这些数字是练习前要对的，版本不对，后面报错会多走很多弯路。
| 项目 | 数 | 用在哪 |
|---|---|---|
| WordPress 推荐 PHP | 8.3 或更高 | 本地环境选版本 |
| 数据库 | MySQL 8.4 或 MariaDB 10.11 或更高 | 本地环境选版本 |
| 当前 WordPress 版本 | 7.1.4 | 对齐文档与插件兼容 |
| Node.js 推荐版本 | Active LTS | 装开发工具 |
| 主题目录主题数 | 8,768 个 | 挑练习主题 |
表里的数字对完，再看文档时效。主题入门章节 2014-07-31 首发、2023-12-14 最后更新；区块编辑器手册 2019-05-02 首发、2026-10-14 最后更新。两处更新时间差了快三年，按更新时间判断该看哪份。
WordPress 7.1 让样式和编辑更容易，可跨屏幕尺寸和交互状态响应式自定义区块样式，无需 CSS。这是版本带来的变化，练习时值得知道。
常见误区：作品集做进主题，换主题就丢
误区一：把作品集功能做进主题。官方的例子说得很具体：你做一个主题带作品集功能，用户用你的作品集功能建的作品集，换主题后就丢了。正确做法是把作品集放单独插件。
误区二：主题和插件功能重叠就随便放。主题管呈现、插件管行为，这条边界不是可选项。有些用户经常换主题，功能放错位置，换一次就丢一次。
还有一个容易忽略的地方：主题和插件的功能有重叠，是常有的事。重叠不可怕，怕的是把有行为的部分放进了主题。做法很简单，每加一个功能，先问一句：换主题之后，这个功能还应不应该在。答案是要在，就放插件。
排查顺序分两种。nvm 报错，先建配置文件，再重跑安装脚本，最后 node -v 验证。版本不对，先看项目 .nvmrc，再 nvm install 版本号，然后 nvm use。
排查的时候不要凭感觉。nvm 的问题看终端报错第一行，版本的问题看项目里有没有 .nvmrc，区块的问题看 Block Error: Unexpected or Invalid Content 那一类文档。按报错找，比按记忆猜快。
挑练习主题的时候，也可以先从案例里筛一遍，看别人怎么处理主题和页面的关系。网页设计案例筛选这篇讲了怎么筛。
建站不只设计一个人：六个阶段各配谁
建站这件事拆开看，至少有六段：方向、环境、设计、内容、发布、运营。设计只管其中一段。你把设计学得再好，环境和内容没跟上，站还是上不了线。
设计和环境经常被混着讲。设计决定站长什么样，环境决定你能不能在上线前把代码跑通。本地环境没配好，改一行模板就要传一次服务器，出问题还不好回退。
内容和发布也一样。主题做得再漂亮，栏目没规划、文章没写，站上线也是空的。发布涉及域名、主机、SSL 这些，跟设计不是一套动作。
反过来，如果你现在只会装主题、改几个颜色，也不用急着去补前端。先看六个阶段里哪一段是你现在卡住的，再决定补哪块。想系统看这六个阶段的分工，可以看 网站建设六个阶段各配谁。
所以学设计的时候，心里要有一张建站分段图。你现在练的是设计这一段，练完知道下一段接什么，不会练完设计发现还要从头学环境。
用 AI 帮哪几步、哪几步必须自己动手
AI 在学网站设计这件事上能帮的，主要是整理和对照。下面四步是它能接的：
- 把「主题管呈现、插件管功能」的边界整理成一张对照清单，供你判断作品集项目怎么拆。
- 把三件套（代码编辑器、Node.js 开发工具、本地 WordPress 环境）整理成一份按平台分列的准备清单，标出每步要运行的命令。
- 把区块开发基础八个概念排成一条从浅到深的学习顺序。
- 把练习主题按「用了哪些区块、改了哪些样式、解决了什么问题」写成作品集条目草稿。
必须人做的有三件：在本地 WordPress 后台的站点编辑器里亲手改一遍模板和全局样式，看前端实际效果，决定这个练习主题留不留；在终端里亲手运行 node -v 和 npm -v，确认版本装对了，再决定是否继续下一步；在 WordPress.org 主题目录里亲手装一个主题玩一遍，从用户视角感受主题能做什么，再决定自己第一个主题从哪个方向练。
下面三条提示词可以直接复制。本文给的示例，不是官方模板。
第一条：「根据 WordPress 官方主题手册里『主题控制内容呈现、插件控制站点行为和功能』这条最佳实践，帮我把下面这些功能分成『放主题』和『放插件』两类，并说明理由：作品集展示、联系表单、配色方案、字体设置、在线商店。」
第二条：「我要在 Mac 上按 WordPress 区块开发环境文档准备开发环境，三件套是代码编辑器、Node.js 开发工具、本地 WordPress 环境。请把每一步要运行的命令和要验证的结果列成清单，命令原样保留，不要改写。」
第三条：「我做了第一个 WordPress 区块主题练习，用了标题、段落、图片、分组几个区块，改了全局配色和字体。请按『用了哪些区块、改了哪些样式、解决了什么问题』帮我写成一段作品集说明，不要写我没做过的功能。」
整理清单、排学习顺序这类活，AI 能做一部分。把学到的设计能力落到一个真站上，猎者出海的AI Agent 有一块是从空服务器到上线，十个阶段每段一道关，可以对照着走。
常见问题
网站设计是什么专业，一定要学编程吗？
不用学到能写完整程序的程度，但区块主题要看懂 HTML 模板和 block.json，经典主题至少需要一些 PHP、HTML、CSS 知识。零基础可以先从区块主题入手。
零基础学网站设计，第一步先装主题还是先学代码？
先装主题。做自己的主题前，先从用户视角熟悉主题怎么工作，试着装一个主题玩一玩。玩过之后，再决定往哪个方向学。
区块主题和经典主题学哪个？
先学区块主题。区块主题被定位为构建 WordPress 主题的现代方法，手册主要讲它。经典主题仍被支持，但至少需要一些 PHP、HTML、CSS 知识，可以后面补。
学网站设计要装哪些工具？
代码编辑器、Node.js 开发工具、本地 WordPress 环境，这三样是基本要求。选哪个、替代方案有哪些，正文里列过，这里不重复。
作品集功能该做进主题还是插件？
放插件。把作品集做进主题，用户换主题后就丢了。主题管呈现，插件管功能，这条边界不要破。
表单这类模块在设计里怎么处理？
表单的功能部分放插件，视觉部分放主题。表单在页面上长什么样是主题的事，提交后存到哪、发不发邮件是插件的事。具体可以看 网页设计表单。
设计这一段学完，你手上应该有一个能跑起来的主题、一套配好的本地环境、一份能说清楚哪些放主题哪些放插件的清单。建站后面还有环境、内容、发布、运营，猎者出海的AI Agent 把从空服务器到上线拆成十个阶段，每段一道关，设计只是其中一段。
发表评论