当我们刚开始切换到 WordPress 块编辑器时，即使是添加和排列图片这样简单的任务，也感觉完全不一样了。
通过帮助众多用户使用猫哥网站，我们发现这是人们过渡到 Gutenberg 时最常遇到的障碍之一。
好消息是，在块编辑器中处理图片其实已经变得更加直观——只要你找对地方。
在本指南中，我们将向你展示如何在 WordPress 块编辑器中添加和排列图片。这些方法是我们在猫哥网站上每天使用的技巧，用简单易懂的方式解释，任何人都能跟着操作。
快速回答：如何在 WordPress 块编辑器中添加和排列图片
以下是在 WordPress 块编辑器中添加和排列图片的 6 种方法：
- 图片块（单张图片）：添加单张图片并通过各种对齐选项控制其位置。
- 媒体与文本块（图片与文字）：创建两栏布局，将图片直接放在文字旁边。
- 画廊块（多张图片）：将多个图片排列成网格，调整列数、对齐方式和裁剪。
- 画廊块（并排显示）：通过设置 2 列布局，让两张图片并排显示。
- 封面块（文字叠加）：将文字直接放在图片上，非常适合制作吸引人的标题或行动号召。
- 嵌入块（社交媒体）：轻松添加来自 Instagram 等平台的图片，并带有对齐工具。
WordPress 编辑器中的图片对齐
以前，WordPress 默认使用经典编辑器。旧编辑器中的一个常见问题是图片对齐，很难让图片在网站上正确排列。
即使有左对齐、右对齐和居中对齐的选项，效果也往往不尽如人意。有时图片对不齐、尺寸不对，或者看起来很奇怪。
当 WordPress 在 5.0 版本中引入 Gutenberg 块编辑器时，对初学者和专业人士来说都是一次巨大的升级。
如果你用过旧版经典编辑器，肯定还记得让图片完美对齐有多令人沮丧。块编辑器彻底解决了这些问题。
现在，添加、移动和定位图片变得超级简单。你再也不用和格式较劲了，可以轻松创建美观、专业的博客布局，而且不需要写一行代码。
在接下来的部分中，我们将详细解释如何在新编辑器中轻松添加和排列图片，为你的博客文章和页面打造漂亮的布局。
以下是本文涵盖的所有内容：
- 如何在 WordPress 中添加和排列图片
- 如何完美地让图片与文字对齐
- 如何在 WordPress 中排列画廊图片
- 如何在 WordPress 中并排添加两张图片
- 更多添加和排列图片的方法
- 额外技巧：如何让视频居中排列
- 关于排列图片的常见问题
让我们开始吧！
如何在 WordPress 中添加和排列图片
编辑器提供了多个块，用于在 WordPress 文章和页面中添加图片。在本指南中，我们将重点介绍最常用的几个：
- 图片
- 画廊
- 媒体与文本
- 封面
首先，我们从简单的图片块开始。
你可以点击 加号 (+) 图标（块插入器按钮），或者在文章编辑器中输入 /image 来插入图片块。
这样会在空白图片块内激活 3 个按钮。
现在，你可以从电脑上传图片，从媒体库中选择已上传的图片，或者通过提供图片文件 URL 来插入图片。
接下来，点击“上传”按钮，然后从电脑中选择要上传的图片。
选择图片后，WordPress 会将其上传到媒体库，并插入到图片块中。
现在，你会看到图片上方出现一个工具栏，右侧列中还有一些图片块设置。
要排列图片，你需要使用图片上方出现的工具栏。
图片块提供了多种对齐选项。
根据你的 WordPress 主题，你可能会看到以下所有选项：
| 对齐方式 | 描述 | 视觉效果 |
|---|---|---|
| 无 | 默认对齐，图片与文字行内对齐 | 图片保持在内容流中，无文字环绕 |
| 左对齐 | 将图片推到内容区域的左侧边缘 | 文字环绕在图片右侧 |
| 居中对齐 | 将图片水平居中于主要内容列 | 无文字环绕，图片单独居中 |
| 右对齐 | 将图片推到内容区域的右侧边缘 | 文字环绕在图片左侧 |
| 宽幅 | 使图片比主要内容区域更宽 | 图片超出常规内容边距，呈现动态、沉浸式效果 |
| 全宽 | 将图片拉伸至浏览器全宽 | 图片跨越浏览器窗口边缘，适合英雄区域 |
点击“居中对齐”按钮，即可将图片居中显示在文章中。
如何完美地让图片与文字对齐
很多时候，你需要让图片与文字完美对齐。WordPress 块编辑器通过 媒体与文本块 轻松实现了这一点。
这个块会创建一个两栏区域——一栏用于图片（媒体），另一栏用于文字内容。
只需点击“上传”按钮上传图片。
然后，你可以添加要显示在图片旁边的文字。
如果你需要更长的描述，直接输入即可。
媒体与文本块会自动调整整体高度，以适应两栏中的内容。
如何在 WordPress 中排列画廊图片
WordPress 块编辑器还包含一个用于添加图片画廊的块。你可以轻松地将图片以网格行和列的形式显示。
默认情况下，该块会尝试以均衡布局显示图片，如果你有多张图片，通常使用 3 列。
因此，你的图片画廊可能看起来像这样：
你可以通过向左或向右拖动滑块来调整画廊布局，或者直接在框中输入列数。
这里我们尝试了 4 列布局：
如果由于图片尺寸差异导致画廊看起来不美观，那么你需要调整其对齐方式。
在文章编辑器中，点击画廊。然后点击“选择父级块：画廊”图标，打开自定义面板。
从这里，确保启用“裁剪图片以适应”选项。
这将使画廊中的所有图片尺寸统一，创建更整洁的网格。要居中整个画廊，你可以使用块工具栏中的对齐选项。
WordPress 默认的画廊功能已经相当不错。但如果你经常在文章和页面中添加图片画廊，建议使用像 Envira Gallery 这样的图片画廊插件。
这些插件会提供更多选项来排列画廊图片，在弹出窗口中显示它们，并设置不同的样式。
更多细节，请查看我们的教程：如何在 WordPress 中添加图片画廊。
如何在 WordPress 中并排添加两张图片
在 WordPress 文章中并排显示两张图片的最简单方法是将两张图片都添加到画廊块中。
要打开画廊块的自定义选项，点击画廊，然后再次点击“选择父级块：画廊”图标。
这会在右侧打开自定义面板。
然后，只需为画廊块选择 2 列布局，即可让两张图片并排显示。
你还可以启用“裁剪图片以适应”选项，以确保两张图片尺寸相同，看起来更一致。要居中整个画廊块，请使用工具栏中的对齐选项。
更多添加和排列图片的方法
除了我们已经介绍过的块，你还可以使用 封面块。
它的主要用途是让你将文字直接放在图片上，非常适合制作引人注目的章节标题和行动号召。
封面块具有与常规图片相同的对齐选项。
你还可以添加颜色叠加层，使文字更易读，甚至勾选“固定背景”选项，创建酷炫的视差滚动效果。
要了解更多关于使用封面图片的信息，请查看我们的文章：WordPress 中特色图片和封面图片的区别。
到目前为止，我们讨论的是直接向文章和页面添加图片。那么来自第三方网站的图片呢？
块编辑器也轻松支持这一点。你可以嵌入来自热门社交分享网站（如 Instagram、Facebook、Flickr、Imgur、Photobucket 等）的包含图片的内容。
例如，如果你想添加一张 Instagram 照片，只需在文章编辑器中添加 Instagram 块，然后输入你想要分享的帖子 URL。
然后，你只需在工具栏中点击你想要的对其方式。嵌入块还可以让你轻松在 WordPress 中嵌入视频。
更多细节，请查看我们的指南：如何在 WordPress 中嵌入 Instagram。
额外技巧：如何让视频居中排列
与图片一样，你可能也想改变视频的对其方式。好消息是，WordPress 中的视频块使用完全相同的对齐工具。
无论你是嵌入 YouTube 视频还是上传自己的视频，只需点击视频块。你会看到熟悉的对其工具栏出现在顶部。
只需点击“居中对齐”按钮，即可将整个视频播放器居中显示在内容区域中。这会让你的页面布局更加整洁、精致。
要了解更多，请阅读我们的指南：如何在 WordPress 中让视频居中。
关于排列图片的常见问题
以下是读者经常问到的关于排列图片的问题：
WordPress 中最好的图片文件类型是什么？
对于照片，JPEG 通常是最佳选择，因为它能在质量和文件大小之间取得平衡。如果图片需要透明背景（如 logo），则应使用 PNG 格式。
如何让图片在移动设备上响应式显示？
WordPress 块编辑器会自动为你处理这个问题。你添加的任何图片都会自动响应，适应任何设备的屏幕尺寸。
可以让文字环绕图片吗？
当然可以。只需添加一个图片块，并使用工具栏中的“左对齐”或“右对齐”选项。后面的段落文字会自动环绕图片。
如何为图片添加标题？
插入图片后，你会看到图片下方出现一个“添加标题”字段。只需点击该区域并输入你想要的标题文字即可。
为什么我的画廊图片无法正确对齐？
这通常是因为画廊中的图片高度或宽度不同。解决方法：选择画廊块，然后在右侧设置面板中启用“裁剪图片以适应”选项。这样会让所有画廊图片尺寸统一。
希望本文能帮助你轻松学会如何在 WordPress 块编辑器中添加和排列图片。你可能还想查看我们的指南：如何更改 WordPress 中块的高度和宽度，以及常见的 Gutenberg 问题解答。