WordPress 古腾堡编辑器中媒体类区块使用说明

在 WordPress 的古腾堡编辑器中，媒体类别的区块专注于插入和展示各种媒体内容，如图片、视频、音频、画廊等。通过这些区块，用户可以轻松地将媒体文件与文本、按钮等内容进行组合，从而丰富文章和页面的展示效果。这些区块不仅能提升内容的互动性，还能使页面看起来更加生动和吸引人。

媒体类别的区块包含图片、图库、音频、封面、文件等 7 种，其中图片区块使用最频繁。除了图片，建议尝试其他区块，以增强文章的多样性。我将在本文中详细说明，并插入真实的例子辅以演示。

1. WordPress 编辑器中的图片区块

当通过左侧区块插入图库区块后，我们可以选择上传图片、从 URL 插入或从媒体库中选择已有图片。上面的截图就是我直接通过 Ctrl + V 粘贴进来的，这相当于拖放操作。

需要注意的是，若以管理员权限运行浏览器，可能无法从桌面或其他文件夹直接拖拽上传图片。另外，如果使用 URL 插入图片，必须确认图片支持远程使用。一般来说，除了图库外，其他网站往往会启用图片防盗链，插入的图片可能会导致 404 或其他错误，而你之所以能在浏览器中看到图片，极有可能是缓存罢了。

上方图片及说明文字是通过 WordPress 古腾堡编辑器中的 区块插入器 → 媒体 → Openverse 搜索随机添加的，此功能已在前文「认识 WordPress 古腾堡编辑器」中详细介绍过。使用这种官方图库形式插入的图片，可以确保图片链接的有效性与版权合规性。同时，如果你需要对其剪裁时，图片会自动下载当本地媒体库，非常方便。

当选中插入的图片区块后，工具栏和属性栏会给出非常多的可选设置，咱们来试试看能做出什么效果。

1.1 图片圆角设置

当点击 圆角 按钮后，系统实际上是在区块的 高级 → 额外的 CSS 类 中添加了 is-style-rounded 类（关于区块的高级属性，请参阅《文字区块详细介绍》）。需要注意的是，若你的主题样式表未对该类做出相应声明，圆角效果可能无法正确呈现。因为 WordPress 系统样式表 /wp-includes/css/dist/block-library/style.min.css 中对该类的默认样式设置为 border-radius: 9999px;，这意味着图片会呈现一个几乎完全的圆形效果。

为了优化显示效果，我修改了系统默认样式，将该值改为了4px，并将其添加到主题样式表中，从而达到了上图所示的圆角效果。在调整样式时，建议根据主题的整体设计风格调整圆角的大小，以获得更好的视觉体验。

1.2 图像替代文本

此选项用于描述图片内容，主要针对无法查看图片的访客（例如使用屏幕阅读器的用户）提供图片内容的文本描述。正确填写替代文本能提高网站的 SEO 表现，也符合网站的无障碍访问规范。

1.3 调整图像纵横比

调整图片显示的纵横比例，可以选择原始尺寸，或设定为正方形、宽幅、纵向等固定比例，以使图片与网页布局更加协调。例如，若上图原图接近方形比例，我将其纵横比设为宽 - 16:9，这种比例对于大多数浏览器和屏幕尺寸来说，能够提供更合适的视觉体验，尤其适用于横向布局或背景图使用。

当开启纵横比后，编辑器会出现一个附加选项 “缩放”，其包含以下两个选项：

• 封面：选中此选项时，图片会被裁剪以适应框架，重点是展示图片的中心区域，确保视觉的完整性。在此模式下，图片的纵横比保持固定，但图像的某些部分可能会被剪裁掉。
• 包含：此选项会确保整个图片都显示出来，调整图片以适应框架的尺寸，但不会裁剪图片。图片的大小可能会根据设定的比例自动缩放，确保图像的完整性，而可能会有空白区域。

选择哪种模式取决于你希望图片展示的效果，若希望突出显示图片的核心部分且不介意裁剪，可以选择封面；若希望确保显示完整的图片内容，可以选择包含。值得一提的是，这个功能并不会真正裁切原始文件形成新的图像，它是通过 CSS 实现的。你可以点击上图查看完整的原图效果。

1.4 尺寸和分辨率设置

一般的，文章中的图片以原始分辨率显示，若图片宽度超过编辑器最大宽度（通常由主题定义），图片会自动按比例缩小以适应编辑器宽度，即所谓的“自动”设置。你也可以手动选择图片的显示尺寸，灵活调整以满足页面需求。

WordPress 提供四种图片尺寸选项：缩略图（Thumbnail）、中等（Medium）、大尺寸（Large）和原始尺寸（Full Size）。这三种尺寸的缩略图可在 设置 > 媒体 中自定义，分别对应默认值如 150x150px、300x300px 和 1024x1024px。

原始尺寸通常是上传图片的实际分辨率，但若图片超过 WordPress 的最大尺寸限制（默认 2560px 宽度，自 WordPress 5.3 起），系统会自动生成一个“scaled”版本（例如，image-scaled.jpg），将其缩小到 2560px 宽度以优化性能。有关缩略图的详细设置和原理，可参考「WordPress 有哪些缩略图，如何禁用并批量删除（2025）」。

1.5 双色滤镜

双色滤镜（Duotone Filter）是一种创意工具，允许用户为图片应用两种颜色（阴影和高光）来替换原始色调，营造独特的视觉风格。用户可通过区块设置面板选择预设双色组合（如黑白、蓝橙）或自定义颜色，无需额外插件即可快速增强图片的艺术感。这种滤镜直接作用于前端显示，不更改原始图片文件，适合初学者快速优化视觉效果。

1.6 图片对齐

在 WordPress 古腾堡编辑器的图片区块中，图片对齐方式提供了多种选项，方便用户灵活控制图片在页面中的布局。除了默认对齐（通常由主题样式决定，常见为居中或无特定对齐），还包括以下五种对齐选项：

• 全幅：图片占满整个屏幕宽度，适合突出视觉效果。
• 左对齐：图片靠页面左侧，文本可环绕图片右侧。
• 居中对齐：图片居中显示，文本通常在其上下方。
• 右对齐：图片靠页面右侧，文本可环绕左侧。
• 宽幅：图片扩展到内容区域的最大宽度（由主题定义，超出正文宽度但不占满整个屏幕）。

1.7 图片剪裁

在 WordPress Gutenberg 编辑器的图片区块中，图片裁剪功能允许用户直接调整图片的显示区域，提升视觉效果和页面适配性。通过选择图片区块并点击工具栏中的“裁剪”图标，用户可以进入裁剪模式，支持以下操作：

• 自由裁剪：拖动裁剪框调整图片显示区域，聚焦关键内容。
• 固定比例裁剪：选择预设比例（如 1:1、4:3、16:9）确保裁剪后图片符合设计需求。
• 缩放和移动：放大缩小图片或移动裁剪框，精确控制显示部分。
• 旋转：顺时针或逆时针旋转图片，调整方向。

裁剪后的图片仅影响前端显示，原始文件保持不变，存储在媒体库中。初学者可通过此功能快速优化图片布局，无需外部编辑软件。裁剪效果与主题的响应式设置（如宽幅或全幅）结合使用，能进一步提升页面美观度。

1.8 封面区块

选中图片区块后，点击图片按钮切换为“封面区块”，或者点击“在图片上添加文字”按钮，即可实现文字叠加效果。你可以通过工具栏调整文字对齐方式、颜色，或者在设置面板中添加遮罩层来提升文字的清晰度。

对于初学者来说，这一功能大大降低了设计门槛，使他们能够快速为图片添加标题、标语或装饰文字，轻松打造专业的视觉效果。

2. WordPress 编辑器中的图库区块

搞清楚图片区块后，图库模块就简单易懂了。图库区块允许你在页面中插入多张图片，并以网格形式展示，当前版本的图库（相册）最多可显示 5 列，相册中的单张图片则支持上述所有设置，在此就不再赘述了。

3. 古腾堡编辑器中的音视频区块

相较而言，音频和视频区块的设置相对较少。上方展示的是音频播放器的样式（链接仅为示例，并无实际音乐）。视频播放器同样设计简洁，但令人惊喜的是，它竟然支持字幕设置……此外，还可以将视频转换为封面区块。

4. 媒体和文本区块

媒体和文本区块（Media & Text Block）是一个非常实用的布局型区块，用于媒体并排展示内容，常见于宣传、介绍类页面。它可以让你在一侧插入图片、视频或其他媒体，在另一侧添加文字内容，实现图文混排、左右对称的展示效果。