WordPress 建站指南 Gutenberg Blocks实用手册

实战经历：我曾经给一个客户建站，他一开始就要我装Elementor Pro。我花了两小时演示内置Blocks的功能，他最后承认"原来WordPress自带就够用"。这个经历让我重新审视Gutenberg——它确实在进化，只是太多人还没跟上。

为什么内置Blocks已经够用

我见过太多人在WordPress后台装了一堆页面构建器插件，结果一个更新就全乱了。

其实WordPress 6.x内置的Gutenberg编辑器已经相当完善。Media Blocks处理图片视频、Text Blocks写文章、Design Blocks做布局、Embed Blocks嵌外部内容、Widget Blocks管侧边栏——这5类覆盖了我90%的日常编辑需求。

本文基于WordPress 6.9.4（2026年4月官方最新稳定版）和官方文档（wordpress.org/documentation）整理，涵盖每类Blocks的核心用法和避坑提示。

Media Blocks：图片和视频

Image Block

插入图片最基础的方式。上传后可以：

• 裁剪（点击图片→选择比例如16:9）
• 添加字幕（下方caption区域）
• 添加替换文字（右侧边栏Alt Text字段，对SEO很重要）

踩坑记录：WordPress 6.x的图片block已经支持WebP格式，但如果你用的是老旧主题，上传WebP可能会显示为空白。解决方法：在wp-config.php中加入：

define('ALLOW_UNFILTERED_UPLOADS', true);

或者使用Image Optimization插件。

Gallery Block

多图网格展示。插入后可以切换3种布局：Tiled（瓷砖式）、Stacked（堆叠）、Grid（网格）。Grid布局支持列数设置（1-8列）。

Cover Block

全宽背景图+叠加文字。以前这个需要单独插件才能做到。技巧：背景图上传后，右侧边栏有"Fixed Background"选项，勾选后滚动时图片不动（parallax效果）。

Video Block

直接上传MP4或嵌入URL。重要：如果是自己托管视频，建议先压缩（HandBrake免费工具可把1GB视频压到50MB），否则会影响页面加载速度。

Media & Text Block

左图右文或左文右图的经典布局。比Table Block做布局干净得多。实测技巧：移动端会自动切换为上下布局，无需额外设置。

Text Blocks：内容主体

Paragraph Block

最常用的块。右侧边栏可以设置：文字颜色、背景色、字体大小（大/普通/小/自定义）。Gutenberg的_inline spacing_已经比Classic Editor时代好很多。

Heading Block

H1-H6层级。技巧：选中标题后用快捷键Alt+1到Alt+6快速切换级别，不用每次都去工具栏点。

List Block

有序列表和无序列表。Gutenberg支持嵌套列表——子级按Tab键产生，父级按Enter继续。

Blockquote Block

引用块。可以设置引用样式（默认/实心左边框/大号字）。右侧边栏可填引用来源URL。

Code Block

代码高亮。语言在右侧边栏选择（支持60+语言）。实测：WordPress 6.x的代码块使用 Prism.js，高亮效果比Classic Editor的裸pre标签好很多。

Preformatted Block

保留格式文本。适合展示ASCII图或需要精确空格的场景。

Table Block

插入表格。Gutenberg的Table功能比较基础：只能设置行列数，不能合并单元格。如果要做复杂表格，建议用TablePress插件或直接用HTML。实测：表格有"固定表头"选项，勾选后在长表格滚动时表头会固定。

Design Blocks：布局专用

Group Block

把多个Block打包成一组，统一设置背景色、内边距等。实战用法：给一整块内容加背景色或边框，而不用每个子block单独设置。

Row Block

水平排列子元素。和Columns配合可以做复杂多列布局。

Columns Block

最常用的布局工具。插入后选择列数（2-6列），每列可以继续插入任何blocks。实测技巧：如果发现某列高度和其他列对不齐，在该列的Group Block设置里把"堆叠对齐"改为"顶部对齐"。

Stack Block

垂直排列，间距统一控制。比手动调整Paragraph间距省事很多。

Buttons Block

插入按钮组。可以设置多个按钮（平铺或堆叠），每个按钮独立设置链接、样式（实心/轮廓）、颜色。

Separator Block

分割线。很无聊但很实用。3种样式：横线、点线、空间。

Embed Blocks：外部内容

YouTube/Vimeo Embed

直接在URL行粘贴YouTube或Vimeo链接，WordPress会自动转换为embed block。**实测问题**：如果视频有年龄限制或地区限制，embed会直接显示空白，不能播放。解决方案：换成Video block直接上传视频文件。

Twitter/X Embed

粘贴tweet链接自动embed。2024年后Twitter的embed显示有CORS问题，国内服务器可能加载不出来。如果需要嵌入推文，建议截图放Image Block。

Instagram Embed

同样粘贴链接即可。但Instagram embeds在国内服务器经常加载失败（需要访问instagram.com）。

Embed Blocks通用设置

所有embed block右侧边栏有：

• **Caption**：添加说明文字
• **Edit as HTML**：切换到原始HTML修改
• **Resizable**：调整宽度

重要提示：Embed block本质上是iframe，会影响页面加载速度。如果嵌入多个YouTube视频，建议用"懒加载"设置（右上角⋮菜单→Show nested context）或者考虑用封面图+自定义链接代替。

Widget Blocks：侧边栏专用

Search Block

站内搜索。外观简洁，但功能有限（只能搜文章标题，不能搜全站内容）。如果需要更强大的搜索，推荐SearchWP插件。

Calendar Block

显示文章发布日历。有用但外观万年不变，适合个人博客展示。

Tag Cloud Block

标签云。设置显示数量和分组（按标签或分类）。

RSS Block

聚合其他网站内容。URL填写RSS源即可自动抓取。踩坑：RSS源必须有完整的item描述字段，否则显示为空白。部分网站（特别是国内）RSS feed不完整，这个block就没用。

Navigation Block

创建网站导航菜单。如果你的主题支持block-based导航，这个block比传统菜单系统灵活很多。

我的实战工作流

每次写页面我遵循这个顺序：

1. Columns确定整体布局（2栏还是3栏）

2. Cover做页面顶部横幅（一张好图胜过千言万语）

3. Group打包相关内容

4. Media & Text做产品/服务介绍区块

5. Image配合caption做图文混排

6. Buttons结尾加CTA按钮

这个顺序让我30分钟内就能搭出一个看起来专业的页面，不需要任何额外插件。

适合人群

适合用WordPress内置Blocks的场景：

• 博客文章和简单页面
• 个人作品集
• 小型企业官网（不需要复杂交互）
• 追求稳定性和维护性的用户（少插件=少更新=少bug）

不适合的场景：

• 复杂电商页面（需要WooCommerce自定义过滤器）
• 高互动单页（落地页用专业工具更好）
• 需要复杂表格或数据可视化（用TablePress/DataTables/Notion嵌入）

总结

WordPress Gutenberg的5类内置Blocks（Media/Text/Design/Embed/Widget）覆盖了绝大多数内容编辑需求。熟悉这些blocks后，你不需要为了做一个简单页面去学习Elementor或Divi的复杂界面。

关键是：先搞清楚每类block的适用场景，然后用Columns/Group做布局骨架，Media/Text填内容，Embed/Widget添加外部功能和侧边栏部件。这个思路比装一堆插件清晰得多。

👉 如果你用WordPress建站并且关心内容发布效率，AI自动化可以帮你批量生成草稿：立即了解MiniMax

如果你想深入WordPress开发，推荐阅读：WordPress Plugin Development

---