做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这类常用主题新建页面时右侧栏或区块设置里会有一个“模板”选项可选范围取决于主题本身。我建议你至少把三个模板用明白默认模板常规宽度的内容页适合“关于我们”“服务条款”这类文字为主的页面。全宽模板没有侧边栏、内容区撑满整行适合落地页和产品展示页。空白/画布模板完全不带页眉页脚少数主题提供适合搭配页面构建器做定制设计。父子页面Parent Page则是在页面编辑界面的“页面属性”面板里设置的。把“产品中心”设为父级再给各个产品页指定它为上级WordPress会在后台列表里自动缩进显示层级前端菜单如果用的是层级菜单也会自动生成下拉。这个操作不用写一行代码但能让站点的信息架构瞬间清晰起来。1.3 后台创建页面的完整操作路径直接说步骤新手照做就行登录后台左侧菜单点“页面 → 新建页面”。输入页面标题比如“关于我们”。注意标题默认会成为H1和菜单项起名时尽量语义明确。在正文区写内容或者从右上角“ / 添加区块”开始搭建结构后面详细讲。右侧“页面属性”里如果要做子页面就选好父级页面和模板。设置特色图片如果主题的页面模板会显示它。点“发布”或“保存草稿”。发布后到前台访问固定链接确认效果。注意页面不像文章那样会自动出现在首页列表里它需要你主动放进菜单或设置成首页。这也是很多新手“建了页面却找不到”的根因先记下这个结论第四节会展开讲。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主要用于老主题捆绑场景新站不建议单独购买。使用页面构建器需要特别注意三点模板依赖用构建器做的页面本质是“把内容以区块形式存进数据库再由构建器前端渲染”所以一旦停用或更换构建器插件页面内容会变成一堆短代码乱码。这是最大的锁死风险做选择前心里要有数。性能开销构建器会在前端加载较多CSS/JS资源页面越多、区块越复杂对性能的影响越明显。上线前建议用浏览器开发者工具看看首屏加载时间或者配合缓存插件做优化。不要混搭同一个页面别一会儿用构建器、一会儿用块编辑器去改否则你会在区块和短代码之间来回翻滚改到最后自己都分不清哪块是哪个系统渲染的。如果你只是做内容相对标准的官网块编辑器完全够用了不必非得引入构建器。只有当需要精确像素级控制、复杂动画或定制交互时再考虑Elementor这类工具。3.3 自定义字段与短代码页面编辑的进阶玩法页面编辑不只是“写写文字、放放图”。很多WordPress功能其实是通过自定义字段Custom Fields和短代码Shortcodes暴露给编辑器的。自定义字段是附加在页面上的键值对数据。比如你做了一个主题页面模板里读取了page_subtitle这个字段那么你在编辑页面的“自定义字段”面板里把这个字段的值填上模板就会渲染出来。玩转自定义字段的关键是能让你在不改代码的情况下通过页面后台控制不同页面显示不同内容。现在块编辑器面板里新增的“自定义字段”开关可以打开这个面板老手做企业站时经常用它做“页面独立配置”。短代码则类似一个“功能捷径”比如[contact-form]就能在正文里调用一个表单插件。在块编辑器里可以直接用“短代码”区块来放置它们。需要注意短代码里的参数要按插件文档来写比如[gallery ids12,34,56]这种写错了它也不会报错前台就什么都不显示排查时容易一头雾水。关于插件下载我多说一句WordPress插件生态的核心源头在官方的“应用中心”插件目录从这里安装的插件相对安全可靠、更新有保障。别贪图所谓的“破解版”“优化版”从第三方站下载那是在替自己的网站埋雷。后台“插件 → 安装插件”里能搜到的来源都是官方渠道优先用这个。4. 首页、菜单与阅读设置页面编辑的关键阵地做“页面”本身只是编辑工作的一半另一半是把它们“串起来”。首页指定、列表页截断、菜单导航这三样是网站落地的关键配置尤其适合放在页面编辑教程里一起讲。4.1 指定首页阅读设置里的一行配置很多新手建好了一个“首页”页面却发现打开网站域名看到的还是默认的博客文章列表原因就是没告诉WordPress“谁才是首页”。这个设置藏在后台“设置 → 阅读”里“您的主页显示”选择“一个静态页面”。“主页”选择你刚建好的那个页面比如“首页”。“文章页”选择用于显示博客文章列表的页面比如“博客”。保存后网站根域名就会打开你指定的首页而文章列表则归入你指定的博客页。这里容易遇到的情况是下拉框里看不到刚刚新建的页面。不用慌多半是页面还没发布保持草稿状态的页面不会出现在下拉选项里去“页面”列表把状态改成“已发布”刷新回来就有了。还有个细节指定成首页的页面它的“页面模板”通常建议选主题设计的“首页专用模板”或“全宽模板”这类模板往往能获得更好的首屏效果。有的主题比如Mantra、Rishi还专门在页面编辑界面里提供“此页面作为首页布局”之类的开关启用后相当于覆盖默认阅读设置自由度更高。4.2 主页截断文章摘要和「更多」标签的正确姿势“主页截断文章”是WordPress里一个高频需求在网站首页或博客列表页不想把整篇文章全文铺出来只显示开头引导摘要点击后再进入详情页。实现方式有三种对应不同场景第一种手动插入“更多”标签。在经典编辑器工具栏点击“插入更多标签”或者在块编辑器里选中段落、点击出现的小图标里的“在下方插入更多标签”部分版本快捷键是AltShiftW。这会在正文中插入一个分隔标记列表页只显示标记之前的内容。适合你希望按正文自然节点截断的场景。第二种使用“摘要”字段。在文章编辑页右侧或底部找到“摘要”输入框手动填写一段描述性文字。列表页的循环会自动优先读取摘要。适合你希望截断内容与正文内容完全解耦的场景——比如你可以在摘要里写一段和正文开头不同的引语。第三种彻底自定义列表页显示。如果主题自带“显示全文/摘要”设置优先用主题的选项如果主题没提供可以借助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托管图片时图片无法显示的原因通常集中在几个环节按顺序排查很快就能定位是否混合内容Mixed Content网站如果开启了HTTPS而图片链接还是http://开头浏览器会自动拦截表现为图片不显示。解决办法是CDN提供HTTPS访问同时把文章和页面里的图片链接统一替换为https://。我遇到过很多次单看链接没问题但刷新页面就空白十有八九就是混合内容被拦截了。防盗链策略七牛控制台有“防盗链”配置如果你开启了“只允许特定Referer访问”而当前域名的Referer没被加入白名单图片就会被拒绝。调试时可以在浏览器控制台Network标签里看图片请求的状态码403几乎可以断定是防盗链拦截。临时关掉防盗链或加白域名即可验证。回源配置和绑定域名七牛图片域名如果没绑定自定义域名默认提供的测试域名有时会有限制比如流量限制、时效限制导致图片间歇性无法加载。建议正式环境绑定备案过的自定义域名并开启HTTPS同时确保存储空间的“回源规则”配置正确。图片处理参数七牛在URL后面加?imageView2/0/w/800这类处理参数可以生成缩略图但如果你的处理样式名称写错了就会返回错误图片同样显示不出来。使用前先在浏览器直接访问带参数的完整URL看到能出图再接进WordPress。混用本地路径和CDN路径如果媒体库里部分图片是本地路径、部分是CDN路径前台会一会儿能显一会儿不能显。配合七牛插件时注意“上传图片自动同步到CDN”和“读取图片改用CDN URL”两个设置是否同时开启。排查图片问题时浏览器开发者工具是最高效的工具打开Network刷新页面找到裂掉的图片请求看状态码和响应内容一切就都一目了然。5.4 页面排版错乱先查区块再查缓存和插件页面保存后前台排版不对劲可能原因很多我建议按“编辑层 → 缓存层 → 插件层”的顺序排查。编辑层先回到编辑器切到代码编辑器模式看是否存在未闭合的HTML标签或异常的短代码。常见情况是复制带样式的内容比如从Word文档粘贴时带入了大量内联样式导致页面宽度溢出。解决方法是粘贴时选择“无格式粘贴”或先粘贴到纯文本编辑器再复制过来。缓存层前端页面可能被缓存插件或CDN缓存了旧的CSS/JS版本。修改页面样式后先去刷新缓存插件比如WP Super Cache、LiteSpeed Cache的缓存再强制刷新浏览器CtrlF5。如果页面内容更新了但CSS还是老样式往往是静态资源版本号没变需要把插件设置里的CSS/JS版本号或“清除缓存”按钮点一遍。插件层某些插件会在前端输出样式插件间冲突会导致布局异常。临时代理排查方法是到后台插件列表把可疑插件一个个停用每停一个就刷新前台看效果。二分法最快先停一半如果正常了就说明问题在停掉的那一半里再逐个小范围定位。这个思路简单粗暴但你如果真的按顺序做通常十分钟内能找到元凶。如果以上都排查过还是乱还有一个大招临时切换回默认主题比如Twenty Twenty-Four前台如果恢复正常那问题就出在你的主题和编辑器、插件之间的兼容性上。此时优先更新主题版本并检查主题设置而不是继续改页面内容。最后再分享几个页面编辑的实用习惯折腾了这么多年WordPress页面编辑上我总结出几条越来越信奉的规矩放在最后供参考。第一每个页面都要有明确目标。写“关于我们”时问自己用户看完这页之后希望他做什么拨打咨询电话、发邮件、还是跳转产品页顺着这个目标去安排页面的区块顺序和信息层级效果远超随缘堆内容。第二页面标题和URL要一次想好。WordPress固定链接一旦发布后修改如果没做重定向累计的外部链接和搜索收录权重都会受影响。所以发布前就在“快速编辑”里把页面别名Slug设定成稳定且短小的英文别用一长串默认的汉字转拼音。第三改动前先备份。无论是在编辑器里做大改还是调主题功能先导出一份页面内容备份可以借助“导出”功能或备份插件全程心里有底。页面本身不可怕可怕的是改坏了还不记得原来的样子。第四善用页面构建的预览环境。WordPress 6.3以后的版本还支持样式“风格预览”和块主题的实时编辑如果你用的是现代块主题直接在“外观 → 编辑器”里就能可视化调整全站的字体、颜色和区块风格这比在几十个页面里逐个微调高效太多。这些功能值得单独开一篇聊聊但在这个阶段你可以先从把每一个页面编辑干净、结构清晰开始。 
长河君 · 2026/10/1 18:56:42 · 阅读 1.2k WordPress页面编辑全攻略：从区块编辑器到常见问题排查
做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这类常用主题新建页面时右侧栏或区块设置里会有一个“模板”选项可选范围取决于主题本身。我建议你至少把三个模板用明白默认模板常规宽度的内容页适合“关于我们”“服务条款”这类文字为主的页面。全宽模板没有侧边栏、内容区撑满整行适合落地页和产品展示页。空白/画布模板完全不带页眉页脚少数主题提供适合搭配页面构建器做定制设计。父子页面Parent Page则是在页面编辑界面的“页面属性”面板里设置的。把“产品中心”设为父级再给各个产品页指定它为上级WordPress会在后台列表里自动缩进显示层级前端菜单如果用的是层级菜单也会自动生成下拉。这个操作不用写一行代码但能让站点的信息架构瞬间清晰起来。1.3 后台创建页面的完整操作路径直接说步骤新手照做就行登录后台左侧菜单点“页面 → 新建页面”。输入页面标题比如“关于我们”。注意标题默认会成为H1和菜单项起名时尽量语义明确。在正文区写内容或者从右上角“ / 添加区块”开始搭建结构后面详细讲。右侧“页面属性”里如果要做子页面就选好父级页面和模板。设置特色图片如果主题的页面模板会显示它。点“发布”或“保存草稿”。发布后到前台访问固定链接确认效果。注意页面不像文章那样会自动出现在首页列表里它需要你主动放进菜单或设置成首页。这也是很多新手“建了页面却找不到”的根因先记下这个结论第四节会展开讲。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主要用于老主题捆绑场景新站不建议单独购买。使用页面构建器需要特别注意三点模板依赖用构建器做的页面本质是“把内容以区块形式存进数据库再由构建器前端渲染”所以一旦停用或更换构建器插件页面内容会变成一堆短代码乱码。这是最大的锁死风险做选择前心里要有数。性能开销构建器会在前端加载较多CSS/JS资源页面越多、区块越复杂对性能的影响越明显。上线前建议用浏览器开发者工具看看首屏加载时间或者配合缓存插件做优化。不要混搭同一个页面别一会儿用构建器、一会儿用块编辑器去改否则你会在区块和短代码之间来回翻滚改到最后自己都分不清哪块是哪个系统渲染的。如果你只是做内容相对标准的官网块编辑器完全够用了不必非得引入构建器。只有当需要精确像素级控制、复杂动画或定制交互时再考虑Elementor这类工具。3.3 自定义字段与短代码页面编辑的进阶玩法页面编辑不只是“写写文字、放放图”。很多WordPress功能其实是通过自定义字段Custom Fields和短代码Shortcodes暴露给编辑器的。自定义字段是附加在页面上的键值对数据。比如你做了一个主题页面模板里读取了page_subtitle这个字段那么你在编辑页面的“自定义字段”面板里把这个字段的值填上模板就会渲染出来。玩转自定义字段的关键是能让你在不改代码的情况下通过页面后台控制不同页面显示不同内容。现在块编辑器面板里新增的“自定义字段”开关可以打开这个面板老手做企业站时经常用它做“页面独立配置”。短代码则类似一个“功能捷径”比如[contact-form]就能在正文里调用一个表单插件。在块编辑器里可以直接用“短代码”区块来放置它们。需要注意短代码里的参数要按插件文档来写比如[gallery ids12,34,56]这种写错了它也不会报错前台就什么都不显示排查时容易一头雾水。关于插件下载我多说一句WordPress插件生态的核心源头在官方的“应用中心”插件目录从这里安装的插件相对安全可靠、更新有保障。别贪图所谓的“破解版”“优化版”从第三方站下载那是在替自己的网站埋雷。后台“插件 → 安装插件”里能搜到的来源都是官方渠道优先用这个。4. 首页、菜单与阅读设置页面编辑的关键阵地做“页面”本身只是编辑工作的一半另一半是把它们“串起来”。首页指定、列表页截断、菜单导航这三样是网站落地的关键配置尤其适合放在页面编辑教程里一起讲。4.1 指定首页阅读设置里的一行配置很多新手建好了一个“首页”页面却发现打开网站域名看到的还是默认的博客文章列表原因就是没告诉WordPress“谁才是首页”。这个设置藏在后台“设置 → 阅读”里“您的主页显示”选择“一个静态页面”。“主页”选择你刚建好的那个页面比如“首页”。“文章页”选择用于显示博客文章列表的页面比如“博客”。保存后网站根域名就会打开你指定的首页而文章列表则归入你指定的博客页。这里容易遇到的情况是下拉框里看不到刚刚新建的页面。不用慌多半是页面还没发布保持草稿状态的页面不会出现在下拉选项里去“页面”列表把状态改成“已发布”刷新回来就有了。还有个细节指定成首页的页面它的“页面模板”通常建议选主题设计的“首页专用模板”或“全宽模板”这类模板往往能获得更好的首屏效果。有的主题比如Mantra、Rishi还专门在页面编辑界面里提供“此页面作为首页布局”之类的开关启用后相当于覆盖默认阅读设置自由度更高。4.2 主页截断文章摘要和「更多」标签的正确姿势“主页截断文章”是WordPress里一个高频需求在网站首页或博客列表页不想把整篇文章全文铺出来只显示开头引导摘要点击后再进入详情页。实现方式有三种对应不同场景第一种手动插入“更多”标签。在经典编辑器工具栏点击“插入更多标签”或者在块编辑器里选中段落、点击出现的小图标里的“在下方插入更多标签”部分版本快捷键是AltShiftW。这会在正文中插入一个分隔标记列表页只显示标记之前的内容。适合你希望按正文自然节点截断的场景。第二种使用“摘要”字段。在文章编辑页右侧或底部找到“摘要”输入框手动填写一段描述性文字。列表页的循环会自动优先读取摘要。适合你希望截断内容与正文内容完全解耦的场景——比如你可以在摘要里写一段和正文开头不同的引语。第三种彻底自定义列表页显示。如果主题自带“显示全文/摘要”设置优先用主题的选项如果主题没提供可以借助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托管图片时图片无法显示的原因通常集中在几个环节按顺序排查很快就能定位是否混合内容Mixed Content网站如果开启了HTTPS而图片链接还是http://开头浏览器会自动拦截表现为图片不显示。解决办法是CDN提供HTTPS访问同时把文章和页面里的图片链接统一替换为https://。我遇到过很多次单看链接没问题但刷新页面就空白十有八九就是混合内容被拦截了。防盗链策略七牛控制台有“防盗链”配置如果你开启了“只允许特定Referer访问”而当前域名的Referer没被加入白名单图片就会被拒绝。调试时可以在浏览器控制台Network标签里看图片请求的状态码403几乎可以断定是防盗链拦截。临时关掉防盗链或加白域名即可验证。回源配置和绑定域名七牛图片域名如果没绑定自定义域名默认提供的测试域名有时会有限制比如流量限制、时效限制导致图片间歇性无法加载。建议正式环境绑定备案过的自定义域名并开启HTTPS同时确保存储空间的“回源规则”配置正确。图片处理参数七牛在URL后面加?imageView2/0/w/800这类处理参数可以生成缩略图但如果你的处理样式名称写错了就会返回错误图片同样显示不出来。使用前先在浏览器直接访问带参数的完整URL看到能出图再接进WordPress。混用本地路径和CDN路径如果媒体库里部分图片是本地路径、部分是CDN路径前台会一会儿能显一会儿不能显。配合七牛插件时注意“上传图片自动同步到CDN”和“读取图片改用CDN URL”两个设置是否同时开启。排查图片问题时浏览器开发者工具是最高效的工具打开Network刷新页面找到裂掉的图片请求看状态码和响应内容一切就都一目了然。5.4 页面排版错乱先查区块再查缓存和插件页面保存后前台排版不对劲可能原因很多我建议按“编辑层 → 缓存层 → 插件层”的顺序排查。编辑层先回到编辑器切到代码编辑器模式看是否存在未闭合的HTML标签或异常的短代码。常见情况是复制带样式的内容比如从Word文档粘贴时带入了大量内联样式导致页面宽度溢出。解决方法是粘贴时选择“无格式粘贴”或先粘贴到纯文本编辑器再复制过来。缓存层前端页面可能被缓存插件或CDN缓存了旧的CSS/JS版本。修改页面样式后先去刷新缓存插件比如WP Super Cache、LiteSpeed Cache的缓存再强制刷新浏览器CtrlF5。如果页面内容更新了但CSS还是老样式往往是静态资源版本号没变需要把插件设置里的CSS/JS版本号或“清除缓存”按钮点一遍。插件层某些插件会在前端输出样式插件间冲突会导致布局异常。临时代理排查方法是到后台插件列表把可疑插件一个个停用每停一个就刷新前台看效果。二分法最快先停一半如果正常了就说明问题在停掉的那一半里再逐个小范围定位。这个思路简单粗暴但你如果真的按顺序做通常十分钟内能找到元凶。如果以上都排查过还是乱还有一个大招临时切换回默认主题比如Twenty Twenty-Four前台如果恢复正常那问题就出在你的主题和编辑器、插件之间的兼容性上。此时优先更新主题版本并检查主题设置而不是继续改页面内容。最后再分享几个页面编辑的实用习惯折腾了这么多年WordPress页面编辑上我总结出几条越来越信奉的规矩放在最后供参考。第一每个页面都要有明确目标。写“关于我们”时问自己用户看完这页之后希望他做什么拨打咨询电话、发邮件、还是跳转产品页顺着这个目标去安排页面的区块顺序和信息层级效果远超随缘堆内容。第二页面标题和URL要一次想好。WordPress固定链接一旦发布后修改如果没做重定向累计的外部链接和搜索收录权重都会受影响。所以发布前就在“快速编辑”里把页面别名Slug设定成稳定且短小的英文别用一长串默认的汉字转拼音。第三改动前先备份。无论是在编辑器里做大改还是调主题功能先导出一份页面内容备份可以借助“导出”功能或备份插件全程心里有底。页面本身不可怕可怕的是改坏了还不记得原来的样子。第四善用页面构建的预览环境。WordPress 6.3以后的版本还支持样式“风格预览”和块主题的实时编辑如果你用的是现代块主题直接在“外观 → 编辑器”里就能可视化调整全站的字体、颜色和区块风格这比在几十个页面里逐个微调高效太多。这些功能值得单独开一篇聊聊但在这个阶段你可以先从把每一个页面编辑干净、结构清晰开始。