Gutenberg全站编辑器实战：FSE主题与区块设计系统

🪐前言

WordPress 5.9 推出全站编辑（Full Site Editing，简称 FSE）已经两年多了。但我发现很多做了两三年外贸站的人，到现在都不知道 FSE 到底能做什么——甚至以为 Gutenberg 就是那个"写文章时用的小方块编辑器"。

兄弟，格局小了。

Gutenberg 从区块编辑器出发，进化成了一整套基于区块的设计系统：你现在可以用它编辑网站的头部导航、底部页脚、归档模板、404 页面，甚至完全不用碰一行 PHP 模板代码就能做出一个外贸主题。这篇文章带你把这套系统从头梳理一遍，搞清楚它和 Elementor 到底怎么分工、什么场景选哪个。

一、全站编辑（FSE）到底解决了什么问题

🧱 传统主题的编辑边界

在 FSE 出现之前，你要改网站某个区域，是有严格界限的：

页面内容 → 页面编辑器（Gutenberg 或 Classic Editor）
文章列表、侧边栏、页头、页脚 → 主题的 PHP 模板文件控制
全局样式（颜色、字体、间距） → 要么主题设置面板，要么写 CSS

这个分裂的体验非常不"WordPress"。同一个站，改个标题颜色要进 Customizer（自定义器），改个 Footer 链接要打开 footer.php，改页面内容用区块编辑器——三种工具三种逻辑，学起来割裂，做起来低效。

🎛️ FSE 的解决方案

FSE 把"模板编辑"和"全局样式"都用区块系统统一了。

核心理念一句话：整个网站的每一个角落——不只是文章内容区域——都由一个区块系统驱动。 页头是一个"模板部件"，页脚是一个"模板部件"，文章归档页是一个"模板"，404 页面是一个"模板"，这些全部可以在同一个区块编辑器界面里可视化编辑。

这意味着什么？意味着你不需要看 PHP 模板代码了。

对于外贸场景，这个能力特别实用：比如你想在"所有 News 分类文章"的顶部加一段中英文双语的公司介绍——以前要改 category.php，现在直接编辑分类归档模板，用区块拖一个标题组、一个段落，五分钟搞定。

二、FSE 的核心概念拆解

FSE 在操作层面可以拆成三件套：模板（Templates）、模板部件（Template Parts）、全局样式（Global Styles）。 弄懂这三者的关系，后面操作就没障碍了。

🏗️ 模板（Templates）

模板是一个完整的页面结构，控制特定类型页面的整体布局。比如：

首页模板（Front Page）：首页长什么样，全由它控制
文章归档模板（Archive）：所有博客列表、分类列表、标签列表的页面结构
单篇文章模板（Single Post）：打开一篇文章时的页面布局
搜索结果模板（Search Results）：用户搜关键词后看到的结果页
404 模板：用户访问一个不存在的页面时看到的内容

每个模板里有一个关键的区块叫"文章内容"（Post Content Block）或"查询循环"（Query Loop Block），它充当内容的"嵌入孔"——模板定义了骨架和外壳，内容区块负责把 WordPress 数据填进去。

🧩 模板部件（Template Parts）

模板部件是模板的"可复用零件"——页头（Header）和页脚（Footer）是最典型的两个。你在编辑多个模板时，页头和页脚是共享的，改一次全站生效。

创建模板部件的入口在"外观 → 编辑"进入的站点编辑器中，点击左上角 WordPress 图标 → 模板部件。除了 Header 和 Footer 这两个默认创建的，你还可以自由创建更多部件，比如：

侧边栏（Sidebar）：文章页面右侧的分类 + 标签 + 最新文章
新闻通讯区域（Newsletter）：全站底部统一的邮件订阅横幅
移动端导航菜单：仅在手机断点上显示的汉堡菜单

🎨 全局样式（Global Styles）

全局样式控制全站的视觉基调。在站点编辑器中点击右上角的"样式"图标（半黑半白的圆形），你能在这里统一设置：

排版：字体、字号、行高、字重，可覆盖到 H1-H6 各级标题
颜色：全局调色板 + 各级元素（背景、文本、链接、按钮）的默认颜色
布局：内容区最大宽度、全局 Padding
区块样式：进一步细化到"按钮默认圆角""图片默认边框"等区块级别的预设

💡 全局样式改完后，你在任何模板和页面里添加的区块，默认都会继承这些样式。这和 Elementor 的全局设置逻辑完全一致，两者在这个概念上是打通的。

三、模板编辑器 vs 页面编辑器：什么时候用哪个

很多人在这个点上搞混，因为入口长得太像了。

🔍 页面编辑器（Page/Post Editor）

入口：后台 → 页面 / 文章 → 编辑某一篇。

这是你日常写文章、做 Landing Page 的地方。这里的编辑范围 = 当前这一篇的内容区域。页头、页脚、侧边栏不在这个编辑器的管辖范围内——它们由模板控制。

🏠 模板编辑器（Site Editor）

入口：后台 → 外观 → 编辑。

这里编辑的是"模板"和"模板部件"。范围是整个页面的结构。如果你修改了单篇文章模板（Single Post Template），你家网站上所有文章的外观都会跟着变。

一个表格帮你记住两者的分工：

维度	页面编辑器	模板编辑器（Site Editor）
入口	后台 → 页面/文章 → 编辑	后台 → 外观 → 编辑
编辑范围	单篇内容	整站某一类页面的结构
影响范围	仅当前页面/文章	所有使用该模板的页面
包含页头/页脚？	不包含（由模板控制）	包含（页头和页脚是 Template Parts）
典型任务	写博客、做 Landing Page	调整博客列表布局、改全站 Footer、做 404 页面

🧪 一个实战例子帮你感受区别

场景：你要建一个"News"博客分类，要求这个分类下的文章列表页在顶部有一个"Latest Industry News"的横幅 + 一段中英文介绍文字。

正确的做法（用模板编辑器）：

进入外观 → 编辑 → 模板 → 管理所有模板
找到"归档"模板（或"所有归档"模板），点击编辑
在"查询循环"区块的上面，添加一个 Cover 区块放横幅图，再添加一个段落放说明文字

效果：所有分类归档页、标签归档页的顶部都会出现这个横幅。如果你只想让"News"分类有这个横幅而其他分类没有，就用"添加新模板"功能，单独创建一个名为"分类: News"的模板——它会在 News 分类页上自动生效，其他分类不受影响。

错误的做法（用页面编辑器）：

手动创建一个普通页面 → 手写"News 归档页"→ 每次发了新文章再手动更新这个页面。这会把动态的列表变成静态维护，完全违背了 WordPress 的初衷。

四、自定义区块模式：批量创建页面结构

区块模式（Block Patterns）是 WordPress 官方维护的预制区块组合。中文版叫"区块样板"，但我觉得"区块模式"更好理解——它就是一个设计好的内容片段，拖进来直接用。

📋 使用内置区块模式

在页面编辑器或模板编辑器中，点击左上角的蓝色"+"按钮，切换到"模式"页签（Patterns）。你会看到几百个官方精品模式，按类别分：按钮、栏目、画廊、标题、文本……选择一个模式，点一下，一组精心排版的区块直接插入到光标位置。

比如你想在首页底部做一个三栏的"我们的优势"区域，不用自己拖 Container 调 Column，直接在模式里搜"Three Column"，选一个合适的结构调整文字就行。效率提升非常明显。

🎯 创建自己的区块模式

内置模式很丰富，但外贸站的需求有很多"标准化重复使用"的场景。比如你给不同的产品分类页都要放一个同样的"联系我们"CTA 区，手动复制粘贴三次早晚会出错。自己做模式才是正道。

创建步骤：

在页面编辑器里用区块搭好你想要复用的内容结构（比如一个 Cover 背景图 + 标题 + 按钮的 CTA 区）
选中所有相关区块，点击区块工具栏的"三个点"菜单 → 添加到可重用区块
命名，保存

之后在任何页面里打开区块插入器，切换到"可重用区块"（Reusable Blocks）页签，就能看到你创建的这些内容片段。拖进来直接用，改一次所有引用同步。

⚠️ 可重用区块在修改时会同步更新所有引用，这个行为有时候是好事（统一更新 Footer 版权年份），有时候是坏事（你只改首页的那个而不是全部）。如果你希望一个模式"每个实例独立可编辑"，创建后选择"转换为常规区块"来脱离同步关系，或者直接使用区块模式（Block Pattern）注册方式——Pattern 复制到新页面后默认是独立的，不会同步。

用代码注册区块模式（高级用法）：

如果你需要将模式打包进你的子主题或自定义插件中，用 register_block_pattern 函数注册：

// 在 functions.php 或自定义插件中
function my_site_block_patterns() {
    register_block_pattern(
        'mydomain/cta-banner',
        array(
            'title'       => 'CTA Banner',
            'description' => 'A CTA section with cover background and button',
            'content'     => '<!-- wp:cover {"url":"' . get_stylesheet_directory_uri() . '/images/cta-bg.jpg","dimRatio":50} -->
            <div class="wp-block-cover">
                <span aria-hidden="true" class="wp-block-cover__background has-background-dim"></span>
                <div class="wp-block-cover__inner-container">
                    <!-- wp:heading {"textAlign":"center","level":2} -->
                    <h2 class="has-text-align-center">Ready to Start?</h2>
                    <!-- /wp:heading -->
                    <!-- wp:buttons {"layout":{"type":"flex","justifyContent":"center"}} -->
                    <div class="wp-block-buttons">
                        <!-- wp:button -->
                        <div class="wp-block-button"><a class="wp-block-button__link" href="/contact">Contact Us</a></div>
                        <!-- /wp:button -->
                    </div>
                    <!-- /wp:buttons -->
                </div>
            </div>
            <!-- /wp:cover -->',
            'categories'  => array('cta'),
        )
    );
}
add_action('init', 'my_site_block_patterns');

这样注册的模式会出现在区块插入器 → 模式 → "我的模式"分类里，所有编辑者都可以直接使用。

五、Gutenberg 与 Elementor 共存的选择策略

这是外贸站建站过程中必然要面对的一个问题。我的立场很明确：不要二元选边站，而是根据场景用各自最擅长的部分。

⚖️ 什么时候用 Gutenberg（FSE）

Gutenberg 的强项是内容驱动的页面和系统级模板。以下场景 Gutenberg 是最佳选择：

博客文章的内容编辑：写文章天然在 Gutenberg 里完成，不需要 Elementor 来插一脚
文章归档 / 分类列表 / 搜索结果 / 404 页面：这些系统模板用 FSE 模板编辑器做，代码最干净
产品详情页的内容描述：WooCommerce 的产品长描述用 Gutenberg 写，结构化数据更友好
不需要复杂视觉设计的页面：比如隐私政策、条款与条件、关于我们（如果设计不花哨）

一个很现实的评估标准：如果这个页面的价值主要在"内容"而非"视觉"，用 Gutenberg。如果视觉设计是这个页面的核心竞争力，用 Elementor。

🎨 什么时候用 Elementor

Elementor 的强项是视觉驱动的页面和高度自定义的布局。以下场景 Elementor 更合适：

首页（Home Page）：外贸站的首页必须是视觉震撼的门面，Elementor 的动画、形状分割器、高级背景这些 Gutenberg 做不到
Landing Page / 广告落地页：从 Google Ads 点进来的页面需要精心设计的转化路径，用 Elementor 的 Form Widget + Popup 做 A/B 测试更方便
产品分类页（如果产品多且需要自定义布局）：Elementor 的 Loop Grid + Custom Query 比 FSE 的查询循环更灵活
需要 Third-party Widget 的页面：很多高级表单（Gravity Forms 的可视化 Styler）、动态内容（ACF Dynamic Tags）在 Elementor 生态里支持更好

🤝 两者共存的推荐架构

我建议的外贸站架构是：

首页 → Elementor 编辑
产品页 → WooCommerce 默认模板 + Elementor 做单品页模板
文章 / News → Gutenberg 写内容，FSE 模板控制布局
关于我们 / 联系页 → Elementor 编辑（如果需要高级表单）或 Gutenberg（如果只是文字+基础表单）
系统页面（404 / 搜索 / 归档）→ FSE 模板编辑器

关键原则：同一页面不要混用编辑器。 一个页面要么纯 Elementor，要么纯 Gutenberg，千万不要在一个页面里一半 Elementor Widget 一半 Gutenberg 区块——不仅编辑体验割裂，渲染性能也会下降（两个编辑器的 CSS 和 JS 都要加载）。

🔧 让两者友好共存的几个设置

减少 Elementor 的全局 CSS 干扰：进入 Elementor → 设置 → 高级，关闭"默认颜色"和"默认字体"。这样 Gutenberg 页面不会继承 Elementor 的样式预设，保持独立外观。
FSE 模板中排除 Elementor 页面：如果你用 FSE 模板做了全站 Header/Footer，但首页是 Elementor 做的且自带 Header/Footer，需要在 Elementor 编辑首页时，在页面设置里选择"Elementor Canvas"模板——这会跳过 FSE 的 Header/Footer，避免出现双页头。
性能层面隔离加载：安装 Asset CleanUp 或 Perfmatters 插件，设置 Elementor 的 CSS 和 JS 只在用了 Elementor 的页面上加载，FSE 页面则不加载 Elementor 资源。反之亦然。

六、FSE 常见踩坑与解决

🔴 坑一：FSE 主题不兼容旧版插件

FSE 主题（如 Twenty Twenty-Four、Ollie、Blockbase）是基于区块的主题，没有 header.php、footer.php 这些传统模板文件。导致的结果是：依赖 WordPress Action Hook 注入内容的插件（比如在 wp_head 或 wp_footer 里插入代码）仍然有效，但依赖传统模板 Hook（如 get_header、get_footer）的插件会失效或位置错乱。

解决方案：如果插件提供了 Shortcode 或 Gutenberg Block 作为替代，优先用区块版本。如果是代码注入的场景（比如 Google Analytics），在 FSE 模板里直接拖入"自定义 HTML"区块来放 <script> 标签，而不是依赖插件的自动注入。

🟡 坑二：查询循环区块的默认样式不够

FSE 的查询循环区块（Query Loop）是 Loop Grid 的 Gutenberg 对应物，但它目前的样式控制能力明显不如 Elementor 的 Loop Grid。当你需要用"卡片+阴影+悬停动画"的效果展示博客列表时，FSE 原生支持不够。

解法：在查询循环的区块设置面板 → 高级 → 额外 CSS 类，添加一个类名（比如 blog-card-grid），然后在全局 Custom CSS 里写这个类的样式：

.blog-card-grid .wp-block-post {
    background: #fff;
    border-radius: 12px;
    box-shadow: 0 4px 24px rgba(0, 0, 0, 0.08);
    overflow: hidden;
    transition: transform 0.3s ease;
}
.blog-card-grid .wp-block-post:hover {
    transform: translateY(-4px);
}

💡 如果你发现自己在 FSE 里为了样式写了太多 Custom CSS，回头看看这个页面是不是更适合用 Elementor 做。工具是为了提高效率的，不是为了证明自己能用 Gutenberg 搞定一切的。

🟠 坑三：切换 FSE 主题后菜单丢失

从传统主题切换到 FSE 主题时，你之前在"外观 → 菜单"里创建的导航菜单会保留在数据库中，但 FSE 使用"导航"区块（Navigation Block）来渲染菜单，而不是传统菜单系统。

解决办法：在站点编辑器中编辑 Header 模板部件，找到或添加一个导航区块，在区块设置里选择之前创建的菜单。如果找不到已保存的菜单，点击导航区块的"管理菜单"链接，在弹出界面里手动重新创建。

🟢 坑四：FSE 主题和 WooCommerce 的兼容性

WooCommerce 自身带有大量的模板覆盖（购物车、结算、我的账户等页面），这些是由 WooCommerce 插件通过 PHP 模板控制的，FSE 无法直接编辑。但 WooCommerce 正在向区块化过渡——WooCommerce Blocks 插件提供了产品网格、购物车、结算等区块。

最佳实践：WooCommerce 的商品和购物流程页面，暂时保留 WooCommerce 的默认模板处理。不要让 FSE 去接管这些页面，容易出兼容问题。

🆘 深入学习与求助渠道

WordPress.org FSE 官方文档：wordpress.org/documentation/article/site-editor/ — 模板编辑器的官方手册，每个区块的用法写得很清楚
Learn WordPress（官方学习平台）：learn.wordpress.org — 有免费的 FSE 教程系列，视频 + 文字双模式
Gutenberg Times：gutenbergtimes.com — 区块编辑器每次更新的详细解读，跟版本最紧的博客
GeneratePress / Kadence 官方文档：如果你用的是这两家的 FSE 子主题，它们的官方文档针对各自主题的 FSE 配置有非常详细的指引
WordPress 中文论坛 FSE 板块：中文环境下的 FSE 问题可以在这里搜或问，注意带上主题名称和 WordPress 版本号

💡 FSE 是 WordPress 的长期战略方向，资源投入每年都在增加。即使你现在主力用 Elementor，也值得花半天时间把 FSE 的基本操作过一遍——因为三年后，Gutenberg 大概率会成为所有 WordPress 页面编辑的默认方式。

站内部分内容由互联网用户自发贡献，该文观点仅代表作者本人。本站仅提供网络资源分享服务，不拥有所有权，不承担相关法律责任。如发现本站有涉嫌抄袭侵权/违法违规的内容，请联系我们一经核实，立即删除。并对发布账号进行永久封禁处理。在为用户提供最好的产品同时，保证优秀的服务质量。

本站文章90%为原创内容,拥有所有权,转载时请加上所属。

{{userData.name}}已认证