企业官网建设流程全解析

用 WordPress 搭网站的流程，装环境和做配置这一关过掉之后，真正让人感觉“开始做站”的，其实是第一次打开页面编辑器去改内容。这是系列教程的第三篇，这篇我把 WordPress 网站页面编辑这件事从头到尾拆开讲：页面和文章到底有什么区别，后台的编辑入口在哪里，区块编辑器怎么用，模板和页面属性如何控制整个页面的骨架，以及保存后访问出现 404 这类问题该怎么查。对于部署在 Ubuntu 上用 MySQL、Nginx 跑 WordPress 的环境，我还会单独讲一下 Nginx 的 rewrite 配置——很多人在这一节被 404 卡住过。内容会按实操顺序来，适合刚装完 WordPress、还没把页面玩熟的新手参考，也适合那些已经被 404 和图片显示问题折磨过的站点维护者。

1. 刚进后台别急着动手：页面与文章的差别，以及编辑区的大致分块

1.1 页面和文章的本质区别

初学者接触 WordPress 后台，第一印象往往都是“文章”。安装完成以后，界面上最显眼的就是“文章”下的“写文章”，于是有人会直接在文章里去写首页内容，结果发现首页根本不是那一篇，就开始怀疑到底是哪一步出了错。其实 WordPress 从最初设计就把内容分成两类：文章（Post）和页面（Page）。

文章适合按时间流展示的信息，比如博客日志、新闻动态，它是一个不断追加的列表；页面则是不带时间属性的固定内容，比如关于我们、联系我们、产品介绍、落地页，它是长期稳定存在的独立内容。判断用文章还是用页面的标准很简单：你想让它出现在时间线的列表里，就用文章；你想让它成为一个独立、持久的入口，就用页面。网站首页、关于页、产品页、落地页，这些首选页面；日常更新、行业资讯、新闻公告，这些走文章。

两种数据类型分开存放，却都能被主题用不同模板渲染。后期你听到的“页面模板”“归档模板”“单文章模板”这些概念，本质上就是同一套内容数据在不同展示场景下的穿着打扮。这个底层认知先建立起来，后面对模板设置才不会一头雾水。

1.2 编辑页面从哪里进：后台入口和整体布局

进入页面编辑区的标准路径不难找：登录后台以后，在左侧菜单找到“页面”，点开会看到“所有页面”列表，这里列出了站点内所有已创建的页面；想新建页面就点“添加新页面”，想改已有的就点对应标题下方的“编辑”链接。“所有页面”列表里值得留意的是“状态”列，已发布、草稿、待审三种状态直接影响你能不能在前台看到它，很多人改了页面发现前台没变化，往往就是页面还躺在一堆草稿里没真正发布。

点进编辑界面以后，默认打开的是区块编辑器。前几年我们用的还是一种经典编辑器，一个大富文本编辑框，插东西靠短代码，排版靠主题模板写死。如今默认的区块编辑器，布局上主要分三个区域：中间最宽的是编辑画布，标题、段落、图片都在这里直接呈现，所见即所得；左侧是块插入器，点加号会弹出来，里面按分类放着各种内容块；右侧是设置栏，有“页面”和“块”两个选项卡，分别控制页面整体属性与当前选中块的细节。把握好这三个区域，页面编辑的大部分操作就都有地可去了。

1.3 工具栏和状态栏的信息识别

编辑页面的工具栏在顶部，从左到右通常有：块导航按钮、撤销/重做、内容结构列表、设置按钮、保存按钮、更多选项。容易被忽略的是左上角的“列表视图”，它会把当前页面里所有区块按层级列出来，鼠标点一下就能定位到对应区块。页面内容一旦超过十几屏，用这个视图定位会比在画布里上下滚动找区块快得多。

右侧栏的“页面”选项卡里藏着几个关键区域：状态区可以设置可见性、发布时间、发布状态；摘要区可以写页面描述，某些主题会把摘要显示在文章列表卡片上；讨论区控制当前页面是否允许评论；页面属性区设置父页面、顺序、模板；特色图片区给页面配一张主图。第一次接触的人建议先把“页面属性”弄明白，这块内容往往决定了页面最终呈现的结构，我在第三部分会展开细讲。

2. 区块编辑器的真正用法：增删改、排序和复用

2.1 区块是页面内容的最小单元

把页面想象成一张桌子，桌上摆着各种元件——文字、图片、按钮、列表，这些在 WordPress 里就叫“区块”。段落是一个区块，标题是一个区块，图片是一个区块，视频、引用、代码块、按钮、分隔线，也都是独立区块。这种设计最大的好处是，你不需要像以前那样靠短代码或者直接改 HTML 来实现内容排版，每一项都是可视化的独立模块，可以随意挪动和调整。

添加区块有三种常见方式。第一种是点击左上角加号，或者在编辑区内容块之间出现的“+”按钮弹出插入器，再分类挑选；第二种是直接在正文输入斜杠“/”，比如输入“/图”就能快速检索图片块，输入“/引”能找到引用块，这是我个人最推荐的入门手法；第三种是先写一段文字，再通过工具栏的转换功能一键把文字变成标题、引用或列表。

实际体验上，斜杠命令的效率明显高于在插入器里一层层翻分类。举个例子，你想插入一个音频文件，点加号要经过“插入工具—媒体—音频”三层，但直接在空白区域输入“/音频”，三秒钟就能呼出对应块。养成斜杠习惯以后，页面编辑速度会比鼠标点选快不少。

2.2 常用块的参数设置：段落、标题与图片

拿最常用的几个块说。段落块的设置面板里，可以调文字大小、粗细、行高、字间距、文字颜色、背景颜色。很多新手喜欢把所有段落都调成大字、花哨颜色，结果整个页面看起来没有任何重点。段落默认样式通常就够了，重点是把页面里的标题层级打清楚。

标题块要特别注意 H2、H3 的层级使用。一个页面只保留一个 H1，通常是页面标题本身；正文内部按 H2、H3、H4 往下排。这种层级不仅影响视觉，也影响页面结构，搜索引擎和读屏软件都会按标题结构理解页面。你可以在官方主题的示例里看到标准用法：大节用 H2，小节用 H3，辅助说明才用 H4。

图片块的设置面板提供尺寸选择、对齐方式、替代文字、链接目标。替代文字（alt 文本）千万别图省事跳过，搜索引擎无法直接“看”图片，要靠替代文字判断内容；读屏用户也靠它理解图片含义。我见过不少站点，图片好看但替代文字全是空白，等于给搜索留了个盲区。

选中不同区块时，设置面板里的控制项并不一样。很多控制其实就在工具栏上直接提供，比如段落块的加粗、斜体、链接、对齐；图片块的裁剪、替换、对齐。工具栏右侧的“更多”（三个竖点）按钮里还有复制区块、转换为组块、编辑成 HTML 等选项。我经常用“复制区块”去快速生成结构相同的模块，再逐个改内容，比从插入器重新搭建省事得多。

2.3 让区块排布更整齐：组块、列块和布局调整

单靠一个接一个的上下区块，能承载简单页面，但要做产品介绍、图文混排这类场景，就需要把区块组合起来。WordPress 内置了两个关键布局块：组块（Group）和列块（Columns）。

组块是一个容器，可以把多个区块拖进同一个组块里，再统一设置背景色、内边距、对齐方式，整块移动时就非常方便；列块则能在同一行里分成多栏，比如“左边一张图、右边一段文字”这种典型介绍布局。添加列块后，每一栏内部仍然可以继续添加任意区块，形成嵌套结构，页面布局的复杂度主要就是靠这种嵌套搭起来的。

操作上有两个细节值得注意。第一，选中外层组块或列块时，右侧栏会有一组间距参数，包括外边距和内边距，用来控制区块跟周围内容之间的距离。第二，页面嵌套层级一多，鼠标直接点选特别容易选错，优先用列表视图去选择外层容器，配合键盘的上下方向键微调区块顺序。区块之间的距离不要靠狂敲回车来撑，那样移动端显示会支离破碎；用组块的内边距控制留白，不同屏幕宽度的适配会统一很多。

2.4 重复使用的区块和区块模板

有一段时间我帮客户批量制作产品页，发现每个页面都要重复插入一组“产品参数+咨询按钮”的组合。如果每次都重新拼，既慢又容易漏。后来我选中整组区块，点工具栏“更多”，选择“创建重复使用区块”，给它起个名字；之后在插入器的同步分类里就能随时调用，拖到任意页面使用。

重复使用区块有两种形态。传统的是同步版本，改一处，所有用到它的页面都会跟着变，适合页脚联系方式、备案说明这类全站统一的内容；另一种是独立可编辑版本，插到页面后可以继续修改，不会影响其他引用位置，适合结构统一但内容可能微调的模块。

区块模板（Patterns）是另一个好东西，可以理解成由多个区块拼好的现成组合，插入后每个部分都能单独修改。很多块主题在后台自带一批区块模板，覆盖常见的企业站首页、关于页、联系页结构。对新站来说，先用区块模板把轮廓搭出来，再替换成自己的文案和图片，是效率最高的起步路径。

3. 页面的骨架由谁来定：页面属性、模板和全站编辑

3.1 页面属性面板的三个核心字段

回到右侧栏的“页面”选项卡，最下方有一块容易被忽略的区域，叫“页面属性”。经典主题和不少页面构建器都会用到其中三个字段：父页面、顺序、模板。

父页面可以把当前页面设定为另一个页面的子页面，结构上形成层级关系，对应到 URL 上通常表现为 /parent/child/，某些主题的导航菜单也会自动展示这种层级；顺序字段控制同一父级下页面的排列次序；模板字段决定当前页面用哪一种页面模板来渲染。这三个字段对不写代码的用户也非常有用，尤其是模板——一些主题会把“全宽页面”“无侧边栏页面”“空白页”这些模板做进后台下拉框里，切换到不同模板，整套布局立刻改变。

我帮人排查页面样式异常时，发现最容易被忽略的就是模板选错了。内容、图片、文字全都没有问题，但页面布局跟预期完全不一样，往上一查，页面属性里挂着某个不适合的模板，一换就好。所以页面编辑不只是编辑内容，还要检查它穿的是哪件“衣服”。

3.2 经典主题与块主题的模板玩法差异

经典主题的页面模板通常由主题作者预先写好 PHP 文件，你在“模板”下拉框里看到的就是这些文件对应的选项；如果主题没提供某类模板，下拉框里可能只有默认模板。想自定义模板，就得改主题文件或自己做子主题，这套玩法对新手来说门槛偏高。

块主题则友好很多。块主题的模板不再是死的 PHP 文件，而是由区块组成的模板块，你可以直接进入“外观 > 编辑器”打开模板编辑，选中一个模板，像编辑普通页面一样增删区块。比如我想做一个营销落地页模板，可以在模板编辑器里新建一个模板，往里面摆头图、正文、CTA 按钮，最后在页面属性里把该页面指向这个模板。整个过程不用写一行代码，理解起来也更直观。

我个人的建议是，新手直接选块主题起步。至少模板控制这一层会少踩很多坑，以后想调整页头页脚也不用发怵。经典主题更适合已经熟悉 PHP 和主题模板层的同学，他们反而会觉得经典主题更可控。

3.3 通过全站编辑器调整页面头尾结构

“全站编辑器”听起来挺宏大，核心其实就是把页头、侧边栏、页脚这类全站通用区域也变成“区块”来处理。入口在“外观 > 编辑器”下，只有使用块主题时才能进入。它能把导航位置、页脚文案、模板组成等结构直接拖拽、改字、调样式，修改结果会应用到所有使用了该模板的页面。

这里必须提醒一句：全站编辑器改的是全局结构，和单页内容是两个层级。你在全站编辑器里调页脚，应当理解成是在调整个站点的公共区块，而不是改当前页面。新手练习时常见的问题是把全站版式当成页面内容来改，保存后全站布局一起变，反而被吓一跳。

稳妥的练习方式是，先在模板编辑器里复制一份模板副本，比如“首页副本”，再在副本上大胆改动；效果满意后，再把正式模板替换过去。就算改坏了，担心里也有极大的容错空间，不用重新折腾站点。

3.4 把首页设置成静态页面

很多人以为首页是“改出来的”，其实 WordPress 默认并没有一个叫“首页”的页面，它输出的是最新文章列表。真要做一个固定落地首页，需要到后台的“设置 > 阅读”里操作：把“首页显示”改成“一个静态页面”，然后在“主页”下拉框里选择某一页面，比如“首页”；如果站点同时还需要博客栏，就把“文章页”指定为另一个页面，原来的文章列表就会挪到那个页面下。完成后，再单独用页面编辑器去改首页内容就行。

要注意的是，更新首页页面本身和更新“阅读设置”是两个动作，两边都必须分别保存。保存不成功最典型的表现就是前台首页一直显示文章列表，或者干脆报 404。等你把静态首页的设置流程走通，再回到页面编辑器里去改内容，就会清楚首页是哪里被驱动出来的。

4. 页面保存后打不开？顺着 404 的排查链路一步步看

4.1 先从固定链接设置入手

页面编辑完，保存成功，前台打开却报 404，这几乎是初学者最容易遇到的大坑之一。问题往往不在页面本身，而是出在 URL 重写机制上。WordPress 默认的“朴素”链接长得像 ?p=123，虽然能打开，但既不美观也不利于推广，几乎所有站长都会去“设置 > 固定链接”里改成“文章名”这类自定义结构。改完之后，服务器如果没有对应的重写规则支持，URL 就无法正确解析到 index.php，前台自然就 404 了。

遇到 404，第一件事是回到“设置 > 固定链接”，随便挑一个带“文章名”的结构重新保存一次。这一步会刷新 WordPress 内部的重写缓存，很多配置层面没有问题的情况靠它就恢复了。保存时留意页面是否有提示需要更新 .htaccess 文件，有就按提示更新，没有就继续往下排查。

我见过不少站点，明明服务器配置全对，但用户改过固定链接之后从没重新保存，WordPress 内部的重写规则还是旧状态，结果页面怎么都打不开。这个简单动作花不了十秒钟，却排掉了至少三分之一的 404 问题。

4.2 用 Nginx 跑 WordPress 时，rewrite 规则别漏掉

如果你是在 Ubuntu 上用 Nginx + MySQL 搭的 WordPress 环境，遇到 404 的概率比 Apache 高得多。原因在于 Nginx 默认不会像 Apache 那样读取 .htaccess，所有重写逻辑都得写在站点配置里。很多一键环境包在部署 WordPress 时只做了基本站点配置，没有把伪静态规则放进去，于是除了首页能访问，其他页面全是 404。

Nginx 站点配置里至少要包含这样一段：

server { listen 80; server_name example.com; root /var/www/html; index index.php index.html; location / { try_files $uri $uri/ /index.php?$args; } location ~ \.php$ { include snippets/fastcgi-php.conf; fastcgi_pass unix:/run/php/php8.1-fpm.sock; } }

最关键的是 location / 块里的这一行：

try_files $uri $uri/ /index.php?$args;

它的逻辑是：请求进来后，先在网站根目录找有没有真实静态文件，有就直接返回；再找有没有对应目录；如果都没有，就把请求交给 /index.php 处理。WordPress 的伪静态就是靠这条规则把 URL 重新送到前端控制器里的。改完配置后，先执行sudo nginx -t测试语法，确认没问题再执行sudo systemctl reload nginx重载配置。

这套排查逻辑同样适用于 Ubuntu + MySQL + Nginx 的典型组合，但要注意几个变数：站点的 root 指向是否准确；php-fpm 的 socket 路径跟服务器实际版本是否一致；以及是否已经 include 了额外的 rewrite 配置文件。你可以在服务器上用curl -I http://你的域名/一个页面路径看返回码，如果所有非首页 URL 全部 404，基本可以锁定是服务器这一层没接上。

4.3 Apache 环境：.htaccess 与 mod_rewrite

如果你用的是 Apache + MySQL 的组合，404 排查要看两个东西：一是 Apache 是否启用了 mod_rewrite 模块，二是 WordPress 根目录下是否存在 .htaccess 文件，且里面写有正确的重写规则，就是下面这段：

<IfModule mod_rewrite.c> RewriteEngine On RewriteBase / RewriteRule ^index\.php$ - [L] RewriteCond %{REQUEST_FILENAME} !-f RewriteCond %{REQUEST_FILENAME} !-d RewriteRule . /index.php [L] </IfModule>

这段规则跟 Nginx 的 try_files 作用等价，都是“真实文件优先，找不到再交给前端控制器”。.htaccess 是隐藏文件，在 FTP 或文件管理器里看不到不等于它不存在，用终端执行ls -la就能确认。如果文件缺失，回到“设置 > 固定链接”再保存一次，通常会自动生成，前提是站点目录具备可写权限。

Apache 下的另一个常见问题是 AllowOverride 被禁止。无论 .htaccess 写得再对，如果虚拟主机配置里 AllowOverride None，Apache 根本不会读取这个文件，页面自然全部 404。这时候要去 Apache 的站点配置或目录配置里把 AllowOverride 改为 All，再重启 Apache。

4.4 排错清单：把 404 一次问完

进服务器配置之前，还有一个容易被漏掉的原因——缓存插件与页面缓存。如果你用了缓存插件把页面静态化，伪静态改动、固定链接改动都会被缓存“顶住”，前台依旧输出旧 404。排错前先把动态和静态缓存都清一遍，再回到页面看结果。

顺手整理一个简单检查顺序，遇到 404 按这个过一遍：

1. 检查页面本身状态是否为已发布，而不是草稿或待审。
2. 检查固定链接结构是否为自定义，并重新保存一次固定链接设置。
3. 去插件管理界面看看有没有安全、缓存、跳转类插件在做强制跳转或拦截。
4. Web 服务层：Apache 看 mod_rewrite 和 .htaccess；Nginx 看 try_files 配置。
5. 重载或重启 Web 服务后再访问，同时用无痕窗口打开，避免本地缓存干扰判断。
6. 如果只有单一 URL 404，重点检查是否手动写过跳转规则、别名冲突或者页面被移到回收站。

按这个清单，九成 404 都能在十分钟内定位。全部做完仍然 404，就先把固定链接退回“朴素”模式，看能否访问；能访问，说明服务器层基本正常，再逐步把问题限定在某个配置改动上。整个过程就像剥洋葱，剥到最后总能找到改变站点行为的那一层。

5. 图片显示异常很常见：媒体库、外部链接与七牛场景排查

5.1 页面里插入图片的几种方式

页面编辑时插入图片，常规操作就两种：一种是把图片上传到媒体库，再从媒体库插入页面；另一种是用“从 URL 插入”的方式，在图片块里填写一个外部图片地址。第一种方案图片随站点走，保留在服务器或对象存储里，相对可靠；第二种方案不占服务器空间，但图片能不能稳定显示，完全取决于填的那个 URL 是否稳定可用。

用媒体库上传时，进“媒体库 > 添加新媒体文件”即可。上传完的图片可以在媒体库里统一管理，插入页面后还能在右侧设置里重新指定尺寸和对齐方式。这里有个新手容易踩的坑：图片宽度超过内容区宽度时，要配合“全宽”或“宽幅”对齐才能铺满看；如果选“原始尺寸”而原图非常大，页面会被撑破，移动端表现更糟。建议上传前先压缩图片，控制单张体积在几百 KB 以内，既能保证页面加载速度，编辑时也更从容。

5.2 七牛图片无法显示的常见原因

不少站长会把图片放在七牛这类对象存储/CDN 上，再以外链 URL 形式插进页面，以此减轻服务器压力。这种“镜像上传”或“手动外链”的用法在 WordPress 里很常见。遇到“wordpress 无法显示七牛的图片”时，问题往往集中在几个点上，而不是 WordPress 本身。

第一个是防盗链。对象存储和 CDN 服务默认往往会开启 Referer 防盗链，只允许特定域名引用图片。你的页面域名如果不在白名单里，浏览器去加载图片时会被对方服务端拒绝，页面里表现为一片裂图。解决方法是去七牛控制台的域名管理或防盗链设置里，把自己的站点域名加入白名单，或者针对特定场景临时关闭防盗链。这个原因在已开启防盗链的站点里占绝大多数，优先检查。

第二个是 HTTPS 与域名绑定。如果页面使用 HTTPS，而图片 URL 仍是 http，浏览器会因为混合内容直接拦截加载；或者图片用了加速域名，但该域名没有在七牛完成绑定、回源配置，或 CNAME 解析没生效，那所有人都会打不开。排查时先在浏览器里单独打开图片 URL，看能不能直接访问；单独能打开，再回到页面上看加载链路的问题。

第三个是权限与缓存。七牛存储空间如果是私有权限，外部无凭证访问自然失败，只有公有权限才能被网页直接引用。还有一种情况是页面能打开图片，但更新了原图后，CDN 节点里还是旧图，这需要用对象存储的缓存刷新工具或手动刷新 URL，让 CDN 节点重新从源站拉取一次。

5.3 长效方案：让站点图片不轻易翻车

我对页面编辑里图片选材的建议是，别把每个图片都折腾成外部裸链接，能走媒体库的尽量走媒体库。如果确实要用七牛这类服务来做图片分发，也建议用官方提供的 WordPress 插件或镜像回源配置，让后台在媒体库里自动同步本地文件和远端对象存储，而不是手动复制粘贴外部 URL。

用插件集成还有一个额外好处：插入图片时你仍然走媒体库流程，但前端输出 URL 会被替换成加速地址，防盗链和混合内容问题可以在插件的统一配置里解决。图片的替代文字和文件名也顺手写清楚，这不只是无障碍要求，也是在给图片做最基础的 SEO。图片显示问题的排查看似琐碎，但基础打好了，页面整体稳定性会明显提升。

6. 发布前的好习惯：修订历史、预览、草稿和页面维护

6.1 修订历史是救回失误的最后一根稻草

区块编辑器默认开启自动保存，每次保存草稿或更新页面都会留下一个修订版本。你可以通过右侧栏“页面”选项卡底部的“活动记录”进入修订历史，也可以打开页面编辑界面后，点工具栏“更多”里的“修订历史”。WordPress 会把每次修订的时间和作者列出来，选中某一版能预览当时内容，再选择恢复该版本，整页内容就会回到那一刻。

多人协作或高强度改动时，这个功能特别有用。老页面改崩了，可以不慌不忙回到昨天下午三点的版本；误删了一整段产品介绍，从修订历史里拉回带有完整内容的版本就行。我恢复修订的次数不算多，但每一次都像是给失误按了撤销键。发布不只是“点一下发布按钮”，懂得在出错时回到某个历史节点，才算真正掌控了页面编辑。

6.2 发布以前，先让页面在草稿和预览里待一会儿

最容易翻车的操作，就是把没看过的页面直接发布出去。页面不像一篇短文，布局、间距、图片在不同设备上表现往往差别很大。WordPress 的预览功能可以直接模拟前台效果，点顶部预览按钮会打开一个带后台工具条的新窗口。发布之前养成习惯：在桌面视图、平板视图、手机视图下分别扫一眼。

如果页面暂时不想公开，又需要发给别人看效果，可以把页面设置为“私密”或“密码保护”，再把预览链接发给对方；确认无误后再把可见性改成公开。被搜索引擎收录后的页面，每次修改虽然也能被重新抓取，但混乱的中间态只会影响访客体验。先草稿后发布，是成本最低也最稳的习惯。

6.3 页面编辑之后的例行检查三件套

页面更新完并发布成功，我还会例行做三件小事：第一，清理同类缓存；第二，从前台访问几个关键页面，确认没有死链和 404；第三，去插件管理后台（很多环境里叫应用中心）看一眼最近有没有插件自动更新引起兼容问题。

很多奇怪现象，比如图片不显示、页面样式错乱、保存后跳转异常，实际上不是主题写错了，而是插件之间互相冲突。日常维护坚持“少而精”的原则，主题和插件只保留真正用得到的，避免装那种一个说能顶十个的“全家桶”插件，把站点状态搞得不可控。页面编辑这一层常态化维护以后，你会发现站点翻车的频率会明显下降。

页面编辑这件事，我个人的体会是把核心精力放在理解区块和模板，而不是追求把每个页面做得特别花哨。页面结构稳定以后，日常更新内容其实就是几分钟的小事；反而前期把模板、固定链接、图片源这些基础问题解决掉，后面能省下一大半排查时间。如果你照这篇把 WordPress 页面编辑的整条链路跑通，下一步可以拿一个真实的小页面开始动手，从首页或关于页试起，把编辑、模板切换、404 排查和图片显示这四关完整走一遍。系列教程的第四篇，我准备讲站点菜单和导航结构的配置，那部分跟页面属性里的父页面、模板选择会直接挂钩，把这篇文章里的页面概念先吃透，衔接起来会更顺。