用 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 默认的“朴素”链接长得像 ?p123虽然能打开但既不美观也不利于推广几乎所有站长都会去“设置 固定链接”里改成“文章名”这类自定义结构。改完之后服务器如果没有对应的重写规则支持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 NoneApache 根本不会读取这个文件页面自然全部 404。这时候要去 Apache 的站点配置或目录配置里把 AllowOverride 改为 All再重启 Apache。4.4 排错清单把 404 一次问完进服务器配置之前还有一个容易被漏掉的原因——缓存插件与页面缓存。如果你用了缓存插件把页面静态化伪静态改动、固定链接改动都会被缓存“顶住”前台依旧输出旧 404。排错前先把动态和静态缓存都清一遍再回到页面看结果。顺手整理一个简单检查顺序遇到 404 按这个过一遍检查页面本身状态是否为已发布而不是草稿或待审。检查固定链接结构是否为自定义并重新保存一次固定链接设置。去插件管理界面看看有没有安全、缓存、跳转类插件在做强制跳转或拦截。Web 服务层Apache 看 mod_rewrite 和 .htaccessNginx 看 try_files 配置。重载或重启 Web 服务后再访问同时用无痕窗口打开避免本地缓存干扰判断。如果只有单一 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 排查和图片显示这四关完整走一遍。系列教程的第四篇我准备讲站点菜单和导航结构的配置那部分跟页面属性里的父页面、模板选择会直接挂钩把这篇文章里的页面概念先吃透衔接起来会更顺。