企业官网建设流程全解析

做WordPress站点，页面编辑这个环节几乎是每天都要碰的东西。不管是企业官网、个人博客还是电商站，首页、关于页、联系页、落地页全都离不开页面编辑器。网上讲WordPress的教程不少，但大多要么只教你点按钮，要么直接扔给你一段代码，真正把这个过程讲清楚、讲透的并不多。这篇系列第三篇，我打算把整个页面编辑链路从头到尾拆一遍：页面和文章到底啥区别、块编辑器怎么用顺手、首页和导航怎么配、常见的上传限制和图片显示问题怎么解，全部用我实际踩过的坑说话。不管是刚搭好站的新手，还是想优化现有页面的老手，这一篇都能给你省不少时间。

1. 页面与文章的区别：先搞清楚你在编辑什么

很多新手第一次打开WordPress后台就懵了：左侧菜单里明明有“文章”和“页面”两个长得几乎一模一样的入口，到底该往哪个里面写？我见过不止一个朋友把“关于我们”写成了一篇文章，结果网站底部导航里死活找不到那个页面。所以编辑页面前，第一件事就是把这两个内容类型的定位搞清楚。

1.1 页面和文章：WordPress 两种内容类型的定位差异

简单说，文章（Post）是“有时效性的内容”，比如博客日志、新闻、行业动态，它们天然带有发布时间、作者、分类和标签属性，适合按时间倒序展示，也适合做归档和RSS订阅。页面（Page）则是“常驻的结构性内容”，比如首页、关于、产品介绍、联系我们，它不依赖时间轴，通常也不进分类系统，是用来承载网站主体信息和转化路径的。

这个差异在实际操作中会带来几个直接结果：

• 页面的URL结构更干净。默认情况下文章链接会带日期或分类前缀（比如/2024/06/post-name/），而页面直接是/about/、/contact/这样的固定链接，对品牌官网来说更专业。
• 页面支持层级关系。文章只能平铺用分类归档，页面却可以做成父子结构，比如“产品中心”下面挂“产品A”“产品B”，菜单里自动形成下拉，这是文章做不到的。
• 页面可以选择独立模板。WordPress主题通常会为页面准备若干模板，比如带侧边栏的、全宽的、空白的、着陆页专用的；文章一般只能走统一的文章模板。

所以判断标准就一句话：内容是跟着时间走的，就放文章；内容是固定存在的门面，就做页面。博客的文章列表页其实也是“页面”，只不过它由后台的阅读设置自动生成，后面我会单独讲。

1.2 模板、层级与父子页面：让页面结构更清晰

模板（Template）是页面编辑里特别容易忽略又特别好用的功能。通俗地讲，主题是网站的整体皮肤，而模板则规定了“某个页面怎么摆”。比如你用的是Flavor、Astra、GeneratePress这类常用主题，新建页面时右侧栏或区块设置里会有一个“模板”选项，可选范围取决于主题本身。

我建议你至少把三个模板用明白：

1. 默认模板：常规宽度的内容页，适合“关于我们”“服务条款”这类文字为主的页面。
2. 全宽模板：没有侧边栏、内容区撑满整行，适合落地页和产品展示页。
3. 空白/画布模板：完全不带页眉页脚（少数主题提供），适合搭配页面构建器做定制设计。

父子页面（Parent Page）则是在页面编辑界面的“页面属性”面板里设置的。把“产品中心”设为父级，再给各个产品页指定它为上级，WordPress会在后台列表里自动缩进显示层级，前端菜单如果用的是层级菜单，也会自动生成下拉。这个操作不用写一行代码，但能让站点的信息架构瞬间清晰起来。

1.3 后台创建页面的完整操作路径

直接说步骤，新手照做就行：

1. 登录后台，左侧菜单点“页面 → 新建页面”。
2. 输入页面标题，比如“关于我们”。注意标题默认会成为H1和菜单项，起名时尽量语义明确。
3. 在正文区写内容，或者从右上角“+ / 添加区块”开始搭建结构（后面详细讲）。
4. 右侧“页面属性”里，如果要做子页面，就选好父级页面和模板。
5. 设置特色图片（如果主题的页面模板会显示它）。
6. 点“发布”或“保存草稿”。发布后到前台访问固定链接确认效果。

注意：页面不像文章那样会自动出现在首页列表里，它需要你主动放进菜单或设置成首页。这也是很多新手“建了页面却找不到”的根因，先记下这个结论，第四节会展开讲。

2. 块编辑器实战：现代 WordPress 页面编辑的主流方式

从WordPress 5.0开始，默认编辑器换成了古腾堡（Gutenberg）块编辑器。当年很多人骂，但现在它已经进化得相当能打了，尤其适合做页面。核心思路就一句话：页面不再是一张纸，而是一堆积木。

2.1 块编辑器布局：从“写文章”到“搭积木”

打开编辑器你会看到一个白色画布，上方是工具栏，右侧是设置面板，中间就是内容区。在内容区里，你每添加一个“区块”（Block），它就是一个独立的内容单元：一段文字、一张图、一个按钮、一段视频、一个表格……每个区块右上角都有“移动”手柄，点一下就可以上下拖动调换顺序；点击区块后，左侧工具栏和右侧面板会显示该区块专属的样式设置。

这套逻辑对做页面特别友好。以前经典编辑器里你只能从头到尾线性地写字、插图片，排版受限于主题模板；现在你可以先用“段落”区块写介绍，再用“图片”区块配图，然后用“按钮”区块放一个转化链接，最后用“分隔线”或“间隔”区块控制留白，整个页面的视觉节奏完全由你掌控。

我刚开始用的时候也犯过傻：傻乎乎地在段落区块里手动敲很多空行来“调整间距”，结果前台显示完全不听话。后来才明白，间距应该用“间隔”区块或者区块设置里的“外边距/内边距”来控制，而不是靠空行。这是块编辑器最容易被新手误用的一点。

2.2 高频区块的配置要点

这里我只挑做页面时用得最多的几个区块，讲一些文档里不太会写的经验。

标题区块：一个页面里H1一般只有一个，通常就是页面标题；下面各小节的标题用H2，再下面用H3。别图省事全用H2、H3乱套，这既影响可读性也伤SEO。选中标题区块后，右侧面板里可以直接切换级别，非常好使。

段落区块：支持富文本，选中文字后会出现行内格式工具，可以加粗、加斜体、插入链接、变成列表。段落区块里的“对齐方式”我个人建议正文内容尽量别用“居中”，长文本居中是排版灾难。

图片区块：上传图片后，右侧可以设置尺寸、对齐、圆角、给图片加链接。这里有个我踩过的小坑：如果想让图片只展示不跳转，链接类型一定要选“无”；如果选了“媒体文件”，点图片就会打开原图新页面。另外图片裁剪建议尽量在外部处理成固定宽高比再上传，别依赖WordPress的裁剪工具，它的比例选项有限。

按钮区块：做落地页必备。选中按钮后，右侧能改背景色、文字色、圆角、内边距、链接地址。转化率较高的按钮通常颜色与全站主色形成对比，并且有明确的行动文案，比如“立即咨询”“免费下载”而不是“点击这里”。“点击这里”是典型的弱文案，新手要注意避免。

分隔线与间隔区块：控制留白的主力。分隔线适合做视觉分区，间隔区块则纯粹占据高度空间。间距数值以像素为单位，一般页面上下区块之间用40到80px的间隔比较舒服，具体的按内容密度调整就行。太密的页面给人压迫感，太空的页面则显得内容不足，这个度要靠预览判断。

2.3 封面区块与分组区块：搭出页面骨架

真正要做“设计感”页面时，封面区块和分组区块是两个杀手锏。

封面区块可以理解为一个“可以放背景图的完整区域”。你可以在封面区块里嵌套段落、标题、按钮等其他区块，背景可以是一张图片或一段视频，还能叠加半透明遮罩来保证文字可读性。做企业站的横幅区（Hero Section）时，我几乎每次都用到它。使用时要留意两点：一是背景图建议用横向大图，分辨率至少1600px宽，不然在宽屏上会糊；二是封面区块内的文字要经过对比度测试，浅色图配深字、深色图配白字，别让访问者看瞎眼。

分组区块相当于一个容器，可以把若干区块装进一个逻辑组里，然后统一设置背景色、边框、内边距和宽度。比如你要做一个“三列特性介绍”区域，就可以先用“列”区块分出三列，再把文字和图标分别放进每一列，最后整体套一个分组区块设置统一的间距和背景。这样做的好处是块结构清晰，后续调整样式时，改一处就能影响整个区域，而不是一个区块一个区块地去改。

2.4 保存、预览与草稿管理

块编辑器左上角有“保存草稿”和“预览”按钮，发布前建议先点预览，在真实页面上检查一遍再决定。预览有两种形态：一种是在编辑器里直接打开前台页面，另一种是“在新窗口预览”。我习惯用新窗口预览，因为可以同时开着后台和前台对照微调。

另外块编辑器自带修订版本功能，在页面编辑页的“页面 → 修订版本”可以查看历史修改记录，每一版的改动都能回滚。我见过不少做内容的老手从来不用这个功能，结果手滑删了整段内容只能重写。强烈建议养成习惯：大改动之前先发布一版作为备份，改坏了直接回滚，比什么都安全。

还有一个隐藏功能值得提：块编辑器右上角菜单里的“代码编辑器”，打开后会显示当前内容区的HTML结构。如果哪天你发现某个区块渲染异常，切到代码编辑器看看有没有多余的无效HTML标签，往往能直接看到问题所在。

3. 经典编辑器与页面构建器：不同场景怎么选

块编辑器不是唯一的选择。老站还大量存在经典编辑器，市场上也有Elementor、WPBakery等页面构建器，很多人纠结到底用哪个。我的建议是：不要盲目追新，也不要守着老东西不放，按站点类型和操作习惯来选。

3.1 经典编辑器怎么用、何时切回去

经典编辑器就是以前TinyMCE那种所见即所得工具栏，文字处理像Word一样。如果你的主题、旧插件或者已存在的页面内容是基于经典编辑器语法（比如自定义字段里塞了旧的HTML结构），贸然切成块编辑器确实容易出兼容问题。官方也保留了Classic Editor插件，装了之后可以继续用经典编辑器编辑页面。

什么时候建议切回经典编辑器？我的经验是：当你需要快速写一篇结构简单、以文字为主的长文时，经典编辑器其实更顺手，因为它没有区块嵌套的概念，直接打字就行。而当页面需要复杂布局、多列、背景图、按钮组合时，块编辑器和页面构建器明显更高效。两者本身不冲突，一个站里可以同时存在用经典编辑器写的页面和用块编辑器写的页面，互不影响。

3.2 页面构建器的选择与注意点

Elementor是目前市场占有率最高的免费页面构建器，它的拖拽界面比块编辑器更直观，尤其适合不会CSS但想做复杂页面的用户。WPBakery主要用于老主题捆绑场景，新站不建议单独购买。使用页面构建器需要特别注意三点：

1. 模板依赖：用构建器做的页面，本质是“把内容以区块形式存进数据库，再由构建器前端渲染”，所以一旦停用或更换构建器插件，页面内容会变成一堆短代码乱码。这是最大的锁死风险，做选择前心里要有数。
2. 性能开销：构建器会在前端加载较多CSS/JS资源，页面越多、区块越复杂，对性能的影响越明显。上线前建议用浏览器开发者工具看看首屏加载时间，或者配合缓存插件做优化。
3. 不要混搭：同一个页面别一会儿用构建器、一会儿用块编辑器去改，否则你会在区块和短代码之间来回翻滚，改到最后自己都分不清哪块是哪个系统渲染的。

如果你只是做内容相对标准的官网，块编辑器完全够用了，不必非得引入构建器。只有当需要精确像素级控制、复杂动画或定制交互时，再考虑Elementor这类工具。

3.3 自定义字段与短代码：页面编辑的进阶玩法

页面编辑不只是“写写文字、放放图”。很多WordPress功能其实是通过自定义字段（Custom Fields）和短代码（Shortcodes）暴露给编辑器的。

自定义字段是附加在页面上的键值对数据。比如你做了一个主题，页面模板里读取了page_subtitle这个字段，那么你在编辑页面的“自定义字段”面板里，把这个字段的值填上，模板就会渲染出来。玩转自定义字段的关键是：能让你在不改代码的情况下，通过页面后台控制不同页面显示不同内容。现在块编辑器面板里新增的“自定义字段”开关可以打开这个面板，老手做企业站时经常用它做“页面独立配置”。

短代码则类似一个“功能捷径”，比如[contact-form]就能在正文里调用一个表单插件。在块编辑器里可以直接用“短代码”区块来放置它们。需要注意：短代码里的参数要按插件文档来写，比如[gallery ids="12,34,56"]这种；写错了它也不会报错，前台就什么都不显示，排查时容易一头雾水。

关于插件下载，我多说一句：WordPress插件生态的核心源头在官方的“应用中心”（插件目录），从这里安装的插件相对安全可靠、更新有保障。别贪图所谓的“破解版”“优化版”从第三方站下载，那是在替自己的网站埋雷。后台“插件 → 安装插件”里能搜到的来源都是官方渠道，优先用这个。

4. 首页、菜单与阅读设置：页面编辑的关键阵地

做“页面”本身只是编辑工作的一半，另一半是把它们“串起来”。首页指定、列表页截断、菜单导航，这三样是网站落地的关键配置，尤其适合放在页面编辑教程里一起讲。

4.1 指定首页：阅读设置里的一行配置

很多新手建好了一个“首页”页面，却发现打开网站域名看到的还是默认的博客文章列表，原因就是没告诉WordPress“谁才是首页”。这个设置藏在后台“设置 → 阅读”里：

• “您的主页显示”选择“一个静态页面”。
• “主页”选择你刚建好的那个页面（比如“首页”）。
• “文章页”选择用于显示博客文章列表的页面（比如“博客”）。

保存后，网站根域名就会打开你指定的首页，而文章列表则归入你指定的博客页。这里容易遇到的情况是：下拉框里看不到刚刚新建的页面。不用慌，多半是页面还没发布，保持草稿状态的页面不会出现在下拉选项里；去“页面”列表把状态改成“已发布”刷新回来就有了。

还有个细节：指定成首页的页面，它的“页面模板”通常建议选主题设计的“首页专用模板”或“全宽模板”，这类模板往往能获得更好的首屏效果。有的主题（比如Mantra、Rishi）还专门在页面编辑界面里提供“此页面作为首页布局”之类的开关，启用后相当于覆盖默认阅读设置，自由度更高。

4.2 主页截断文章：摘要和「更多」标签的正确姿势

“主页截断文章”是WordPress里一个高频需求：在网站首页或博客列表页，不想把整篇文章全文铺出来，只显示开头引导摘要，点击后再进入详情页。实现方式有三种，对应不同场景：

第一种：手动插入“更多”标签。在经典编辑器工具栏点击“插入更多标签”，或者在块编辑器里选中段落、点击出现的小图标里的“在下方插入更多标签”（部分版本快捷键是Alt+Shift+W）。这会在正文中插入一个分隔标记，列表页只显示标记之前的内容。适合你希望按正文自然节点截断的场景。

第二种：使用“摘要”字段。在文章编辑页右侧或底部找到“摘要”输入框，手动填写一段描述性文字。列表页的循环会自动优先读取摘要。适合你希望截断内容与正文内容完全解耦的场景——比如你可以在摘要里写一段和正文开头不同的引语。

第三种：彻底自定义列表页显示。如果主题自带“显示全文/摘要”设置，优先用主题的选项；如果主题没提供，可以借助function.php里修改the_excerpt函数或read more链接文本来实现定制。

使用时要留神两个问题。一：“更多”标签截断后，正文部分不会自动加“阅读全文”链接，需要主题模板本身输出<!--more-->后的链接，很多主题默认会加，但也有不加的，前台表现为“截断后就没了入口”，这种就得靠主题自定义或插件补上。二：摘要字段里别写太多HTML标签，WordPress默认会过滤掉一部分标签，写得太花哨保存后可能直接消失。

4.3 菜单设置：把页面组织进导航

页面建了不少，却都躺在后台列表里，前台用户根本找不到，就是因为没加进菜单。后台“外观 → 菜单”，新建一个菜单，从左侧“页面”面板勾选你的页面，点击“添加到菜单”，然后按视觉顺序拖拽排序；如果设置了父子页面，子页面可以拖到父页面下方缩进成二级菜单。保存后再到“主题菜单位置”里把该菜单指定到主菜单区域即可。

关于菜单，有两条实战经验很有用。第一，菜单项的名称可以自定义，不必和页面标题一致。比如页面标题是“关于我们公司”，菜单里可以简写成“关于”，编辑菜单项文字即可，这样对用户更友好。第二，菜单里可以加入“自定义链接”，不一定要跳转站内页面，可以放外部链接、锚点链接（比如指向首页某个区块的#contact），落地页营销时经常用这种玩法。

如果菜单保存后前台不生效，先确认“主菜单显示位置”有没有选中你的菜单；很多主题设置了多个菜单位置（顶部菜单、页脚菜单、移动端菜单），填错位置就会“明明保存了却不显示”。这个排查顺序能解决90%的菜单问题。

5. 页面编辑常见问题与排查实录

页面编辑绕不开几个经典问题：大文件传不上去、后台变成英文、图片显示不出来、页面排版突然乱了。这些现象背后原因其实都不复杂，但新手往往会走很多弯路。我按实际排查经验一条条说。

5.1 上传限制太死：后台传不了大图和主题

WordPress默认的上传大小限制通常只有2M左右，这在实际编辑页面时非常尴尬：一张手机拍的产品图可能就5M，直接传提示“文件大小超过php.ini中定义的upload_max_filesize值”。这个限制其实不是WordPress定的，而是PHP运行环境定的，涉及三个参数：

• upload_max_filesize：单文件最大上传大小。
• post_max_size：单次POST请求最大体积，建议比上传大小大一些。
• max_execution_time：脚本最长执行时间，大文件传输慢时可能超时。

解决方式分几个层级。如果用的是宝塔面板或云服务器自带管理面板，可以在PHP配置里直接调大这三个值。如果是虚拟主机，优先在网站根目录建一个.user.ini文件（适合PHP-FPM环境）或在.htaccess里添加php_value upload_max_filesize 64M。如果都没有权限，再考虑修改wp-config.php，在文件末尾、require_once那行之前加：

@ini_set( 'upload_max_filesize', '64M' ); @ini_set( 'post_max_size', '64M' ); @ini_set( 'memory_limit', '128M' );

但这种方法只对部分环境生效，最终还是建议从PHP配置层面解决。调完之后，别急着上传，去“媒体 → 添加媒体文件”页面看一眼“最大上传大小”有没有变成新值，没变说明配置没生效，继续检查配置文件和PHP版本。

5.2 安装中文语言包：后台和编辑器变成英文怎么办

使用英文版WordPress建站、又想切回中文后台的话，有两种常见路径。一种是直接在后台“设置 → 站点语言”里选择“简体中文”，WordPress会自动去官方语言包仓库下载语言包，下载完成后刷新页面就是中文界面。另一种是手动去WordPress官网的翻译页面下载对应版本语言的.mo/.po文件，放进/wp-content/languages/目录，并把wp-config.php里的WPLANG常量设为对应语言（新版本建站通常在设置里写语言就够了，不必再用常量）。

手动安装时请特别注意版本匹配：语言包必须与WordPress核心版本对应，比如6.4版本装的应该是6.4的语言包，版本差太远可能导致部分后台字符串还是英文。另外如果一个站点启用了多站点模式，语言包安装位置略有不同，要放到每个子站的languages目录或网络共享目录，按网络后台提示操作就行。

装完语言包后，页面编辑器里的文档面板、区块说明、按钮文字都会变成中文，对新手理解区块功能有非常大帮助。如果遇到“语言设置已经是中文但前台某些位置还是英文”，多半是主题或插件自身自带了英文菜单文本，这是主题的i18n问题，和核心语言包无关，需要到主题选项或翻译文件里单独处理。

5.3 图片裂了：七牛 CDN 图片无法显示的排查思路

做页面时给图片加了CDN域名，前台却显示裂图，这个问题我们群里聊过很多次。用七牛（或其他对象存储/CDN）托管图片时，图片无法显示的原因通常集中在几个环节，按顺序排查很快就能定位：

1. 是否混合内容（Mixed Content）：网站如果开启了HTTPS，而图片链接还是http://开头，浏览器会自动拦截，表现为图片不显示。解决办法是CDN提供HTTPS访问，同时把文章和页面里的图片链接统一替换为https://。我遇到过很多次，单看链接没问题，但刷新页面就空白，十有八九就是混合内容被拦截了。
2. 防盗链策略：七牛控制台有“防盗链”配置，如果你开启了“只允许特定Referer访问”，而当前域名的Referer没被加入白名单，图片就会被拒绝。调试时可以在浏览器控制台Network标签里看图片请求的状态码，403几乎可以断定是防盗链拦截。临时关掉防盗链或加白域名即可验证。
3. 回源配置和绑定域名：七牛图片域名如果没绑定自定义域名，默认提供的测试域名有时会有限制（比如流量限制、时效限制），导致图片间歇性无法加载。建议正式环境绑定备案过的自定义域名，并开启HTTPS，同时确保存储空间的“回源规则”配置正确。
4. 图片处理参数：七牛在URL后面加?imageView2/0/w/800这类处理参数可以生成缩略图，但如果你的处理样式名称写错了，就会返回错误，图片同样显示不出来。使用前先在浏览器直接访问带参数的完整URL，看到能出图再接进WordPress。
5. 混用本地路径和CDN路径：如果媒体库里部分图片是本地路径、部分是CDN路径，前台会一会儿能显一会儿不能显。配合七牛插件时，注意“上传图片自动同步到CDN”和“读取图片改用CDN URL”两个设置是否同时开启。

排查图片问题时，浏览器开发者工具是最高效的工具：打开Network，刷新页面，找到裂掉的图片请求，看状态码和响应内容，一切就都一目了然。

5.4 页面排版错乱：先查区块再查缓存和插件

页面保存后前台排版不对劲，可能原因很多，我建议按“编辑层 → 缓存层 → 插件层”的顺序排查。

编辑层：先回到编辑器，切到代码编辑器模式，看是否存在未闭合的HTML标签或异常的短代码。常见情况是复制带样式的内容（比如从Word文档粘贴）时带入了大量内联样式，导致页面宽度溢出。解决方法是粘贴时选择“无格式粘贴”，或先粘贴到纯文本编辑器再复制过来。

缓存层：前端页面可能被缓存插件或CDN缓存了旧的CSS/JS版本。修改页面样式后，先去刷新缓存插件（比如WP Super Cache、LiteSpeed Cache）的缓存，再强制刷新浏览器（Ctrl+F5）。如果页面内容更新了但CSS还是老样式，往往是静态资源版本号没变，需要把插件设置里的CSS/JS版本号或“清除缓存”按钮点一遍。

插件层：某些插件会在前端输出样式，插件间冲突会导致布局异常。临时代理排查方法是到后台插件列表，把可疑插件一个个停用，每停一个就刷新前台看效果。二分法最快：先停一半，如果正常了就说明问题在停掉的那一半里，再逐个小范围定位。这个思路简单粗暴但你如果真的按顺序做，通常十分钟内能找到元凶。

如果以上都排查过还是乱，还有一个大招：临时切换回默认主题（比如Twenty Twenty-Four），前台如果恢复正常，那问题就出在你的主题和编辑器、插件之间的兼容性上。此时优先更新主题版本并检查主题设置，而不是继续改页面内容。

最后再分享几个页面编辑的实用习惯

折腾了这么多年WordPress，页面编辑上我总结出几条越来越信奉的规矩，放在最后供参考。

第一，每个页面都要有明确目标。写“关于我们”时问自己，用户看完这页之后希望他做什么？拨打咨询电话、发邮件、还是跳转产品页？顺着这个目标去安排页面的区块顺序和信息层级，效果远超随缘堆内容。

第二，页面标题和URL要一次想好。WordPress固定链接一旦发布后修改，如果没做重定向，累计的外部链接和搜索收录权重都会受影响。所以发布前就在“快速编辑”里把页面别名（Slug）设定成稳定且短小的英文，别用一长串默认的汉字转拼音。

第三，改动前先备份。无论是在编辑器里做大改还是调主题功能，先导出一份页面内容备份（可以借助“导出”功能或备份插件），全程心里有底。页面本身不可怕，可怕的是改坏了还不记得原来的样子。

第四，善用页面构建的预览环境。WordPress 6.3以后的版本还支持样式“风格预览”和块主题的实时编辑，如果你用的是现代块主题，直接在“外观 → 编辑器”里就能可视化调整全站的字体、颜色和区块风格，这比在几十个页面里逐个微调高效太多。这些功能值得单独开一篇聊聊，但在这个阶段，你可以先从把每一个页面编辑干净、结构清晰开始。