DocsWP — WordPress Help

媒体与文本区块

返回区块列表

媒体与文本 区块可让您将图像或视频与文本并排放置。

添加媒体与文本 区块

要添加此区块，请点击区块插入器图标以打开区块库，然后选择媒体 & 文本 区块。

您也可以在新的段落区块中输入 /media 并按回车键，以快速添加此区块：

Slash command to insert the Media & Text block.
用于插入媒体与文本区块的斜杠命令。

添加区块的详细说明

添加内容

要将图像或视频添加到区块中，您可以使用提供的选项从计算机上传文件，或从现有的媒体库中进行选择。

How to add content to the Media & Text Block.

要添加文本，只需在文本框中开始输入。您将获得与常规段落区块相同的文本编辑选项。您也可以使用区块插入器，将其他区块添加到内容区域。

区块工具栏

要显示区块工具栏，您可以点击区块，工具栏就会显示出来。每个区块都有特定于该区块的控件，可让您直接在编辑器中操作区块。媒体 & 文本 区块的工具栏提供以下选项：

Block toolbar for the media & text block.
媒体 & 文本 区块的区块工具栏。

通过这些选项，您可以：

转换

将区块转换为列、组、图像（如果您使用的是视频媒体文件而非图像，则转换为视频）或封面区块。

Transform options for the Media & Text Block.
媒体 & 文本区块的转换选项。

区块移动手柄

区块移动手柄可让您在编辑器中上下移动区块。使用六点图标拖放 图库 区块，将其放置在页面上的任意位置。或者，点击向上和向下箭头来上下移动区块。

获取有关在编辑器中移动区块的更多信息。

对齐

在无对齐、宽幅显示和全宽显示之间切换区块（如果您的网站主题支持）。

Alignment options for the Media & Text block.
媒体 & 文本区块的对齐选项。

更改垂直对齐方式

您可以使用“更改垂直对齐方式”选项，将内容垂直对齐到顶部、中间或底部。

Example of "align top" in the change vertical alignment option for the media & text block.
此处选择了“顶部对齐”选项

在左侧/右侧显示媒体

您可以使用以下选项在左侧或右侧显示媒体内容。

Example of "show media on the left" option for the media & text block.
此处选择了“在左侧显示媒体”选项
Example of "show media on the right" option for the media & text block.
此处选择了“在右侧显示媒体”选项

如果您尝试上传不受支持的文件，浏览器左下角会显示错误消息。

Example error message when uploading an unsupported file type.
错误消息示例

链接

您可以使用区块工具栏中的链接图标，将图像链接插入区块中。图像可以链接到外部 URL 或您网站上的页面。您还可以将图像链接到其自身的媒体文件或附件页面。

Adding link to the image in the Media & Text block
将链接插入图像

替换

使用区块工具栏中的替换按钮，替换您已经插入的媒体文件。

更多选项

这些控件可让您复制、复制并编辑区块的 HTML。

了解这些及其他设置。

区块设置

除了区块工具栏中的选项外，每个区块在编辑器侧边栏中还有特定选项。如果您看不到侧边栏，只需点击“发布”或“保存”按钮旁边的设置图标。

Block settings button next to the Save button

设置选项卡

Settings tab

媒体宽度

您可以通过调整滑块或输入所需比例，调整媒体在媒体 & 文本 区块整体百分比中所占的比例。范围为 15% 到 85%。

在移动设备上堆叠

您可以选择在手机上将媒体和文本上下堆叠。这对在较小屏幕上查看您网站的用户很有帮助。

如果区块中的媒体和文本在移动设备上保持并排显示，它们可能会太小而难以查看。启用在移动设备上堆叠 后，左侧的内容将显示在右侧内容的上方。这将为移动设备访客提供更好的体验。

裁剪图像以填充

如果图像无法适应整个列宽，您可以启用此选项，自动裁剪图像，使其填满整个列。此外，系统会提供一个圆形焦点，帮助您将照片中最相关的部分置于中心，因为裁剪可能会导致部分内容被裁掉。

替代文本

您可以为图像添加替代文本，描述图像的内容。这对于无障碍访问（例如屏幕阅读器）和搜索引擎优化都很有用。

分辨率

您可以从下拉菜单中选择所需尺寸，以显示完整尺寸、大、中或缩略图图像。

Media & Text focal point picker for cropped images

焦点选择器

如果您裁剪图像，就会看到焦点选择器。此工具可让您确定图像中的主要关注点并将其突出显示。点击选择器并将其拖动到所需位置，或使用图像下方的左侧和顶部位置百分比手动设置。

样式选项卡

Styles tab

颜色

媒体 & 文本 区块提供颜色设置选项，可更改文本、背景和链接颜色。从建议颜色中选择，或使用颜色选择器或添加颜色代码来添加自定义颜色。

请参阅本指南，了解有关更改颜色的更多信息。

排版

媒体 & 文本 区块提供排版设置，可更改字体系列、外观、行高、字间距、装饰、字母大小写和字体大小。

详细了解如何更改排版设置。

尺寸

媒体 & 文本 区块提供尺寸设置选项，可添加内边距和外边距。

详细了解尺寸控件。

边框

媒体 & 文本区块提供边框设置选项，可添加边框颜色、宽度和圆角半径。

详情请参阅此支持文章：边框设置概述

高级

媒体 & 文本区块提供以下高级设置选项：HTML 锚点、附加 CSS 类、附加 CSS、样式和允许的区块。

详细了解高级设置

更新日志

  • 更新于 2026-05-25（感谢 @kjoyner @awetz583）
    • 更新“高级”部分，以引用新的概述页面
  • 更新于 2026-03-17（感谢 @femkreations @carolinan @awetz583 @healthydigital @mmjoubert）
    • 更新视频和设置截图
    • 添加边框信息
    • 更新高级设置截图以及有关“管理允许的区块”按钮的信息
  • 更新于 2023-04-03
    • 添加有关裁剪图像焦点选择器的信息
  • 更新于 2022-11-22
    • 调整移动视图中的图像
    • 替换冗余内容
  • 更新于 2022-11-10
    • 移除颜色设置，并添加颜色概述页面链接
    • 添加尺寸和排版设置，并链接到相应的概述页面
    • 为 6.1 更新了更多截图。
    • 添加有关在区块工具栏中插入链接的信息
  • 更新于 2022-11-01
    • 更新适用于 WP 6.1 的视频
    • 将图像更新为 WP 6.1
    • 添加媒体与文本区块内容锁定的图像
    • 更新替代文本
    • 将转换选项添加到“封面”
    • 添加错误消息示例
  • 更新于 2022-06-02
    • 将图像更新为 WP 6.0区块工具栏的更改
      • 在对齐选项中添加“无”移除对齐选项中的“垂直”一词在转换选项中添加“列”

      更多选项的更改

      • 添加了 “移动到”添加了 “锁定”添加了 “隐藏”

      将所有 “媒体 + 文本” 更新为 “媒体 & 文本”

    • 文本 & 媒体区块设置的更改
      • 更新了颜色文本和背景选项，以包含渐变
      • 添加了 “锚文本”
      • 添加了 “裁剪图像”
      • 添加了 “替代文本”
      • 添加了 “图像尺寸”
      • 添加了 “媒体宽度”
  • 更新于 2020-08-23
    • 将图像更新为 WP 5.5
  • 更新于 2020-06-04
    • 将 2 个可重复使用的区块转换为普通区块
    • 标题的更改
    • 区块工具栏的更改
      • 添加了垂直对齐选项
      • 添加了新图像
      • 添加了 “更多选项”区块