是否想在 WordPress 中以列和行的形式展示照片?
默认情况下,WordPress 会将图片垂直堆叠排列。但如果你在文章中添加多张照片,这种布局会显得杂乱,用户需要大量滚动才能看完。本文将教你如何轻松地在 WordPress 中以列和行的形式展示照片。

为什么需要将 WordPress 照片排列成列和行
默认情况下,当你向 WordPress 文章添加多张图片时,它们会紧挨着或垂直堆叠,视觉效果不佳,用户必须不断滚动才能查看所有图片。通过使用网格布局将照片排列成行和列,可以轻松解决这个问题,让图片紧凑展示,提升用户体验。如果你运营摄影网站,可以用更吸引人的方式展示作品集;在线商店也能通过行列排列展示更多商品图片。
下面我们来看看如何手动操作或使用插件来实现。点击下方链接可跳转到对应章节。
1. 无插件在列和行中显示照片
此方法无需安装任何插件,适合偶尔添加多张图片的用户。你可以手动将图片添加到列区块,或使用 WordPress 默认的画廊区块。
将图片添加到列区块
首先,新建或编辑一篇文章。在内容编辑器中,点击“+”按钮添加一个列区块。

接下来,选择列的数量和布局比例,例如 50/50、33/66、25/50/25 等。

然后为每一列添加图片区块。点击列内的“+”按钮,选择“图片”区块。

点击“上传”从电脑添加图片,或选择“媒体库”使用已有图片。

在媒体库中选择图片,点击“选择”。建议为图片添加替代文本,这是图片优化最佳实践,能帮助搜索引擎理解图片内容,提升在图片搜索结果中的排名。如需了解更多 SEO 优化 技巧,可参考猫哥的 GEO/SEO 优化指南。

现在图片已显示在列中。重复上述步骤为其他列添加图片。

使用画廊区块添加图片
WordPress 还提供了默认的画廊区块,可以快速将图片排列成行和列。点击“+”按钮,添加“画廊”区块。

选择上传图片或从媒体库选取。这里我们选择“媒体库”。

选择要添加到画廊的图片,然后点击“创建新的画廊”。

接下来可为每张图片添加标题并调整顺序,完成后点击“插入画廊”。

图片会显示在画廊区块中。你可以在右侧设置面板中拖动滑块调整列数。

发布文章后,即可看到图片以行列形式展示。

此方法适合大多数初学者,但如果你运营摄影博客或经常分享照片,则缺少一些重要功能,例如图片外观依赖主题样式、无法在灯箱弹窗中浏览等。如需更专业的效果,推荐使用插件方法。
2. 使用插件在列和行中显示照片
最佳插件是 Envira Gallery,它是 WordPress 最流行的画廊插件,易于使用且功能丰富。
首先安装并激活 Envira Gallery 插件。激活后,进入 Envira Gallery » 设置 页面输入许可证密钥(可在 Envira Gallery 官网账户中获取)。

现在可以创建精美的图片画廊了。进入 Envira Gallery » 添加新 创建第一个画廊。

先为画廊输入名称,然后从电脑上传文件或从媒体库选择。上传后图片会显示在画廊设置框中。

点击“配置”选项卡,自定义显示方式。Envira Gallery 支持多种布局,包括网格、瀑布流和方形,选择后即可实现行列排列。

选择布局后,在“画廊列数”下拉菜单中设置列数。向下滚动还可设置尺寸和大小等选项。

点击“发布”按钮,画廊即可嵌入到网站。在文章编辑器中点击“+”添加“Envira Gallery”区块。

从下拉菜单中选择之前创建的画廊,保存文章并预览,即可看到照片以行列形式呈现,并支持移动端响应。

用户点击缩略图时,会在漂亮的灯箱弹窗中查看,无需离开页面即可浏览所有图片。
3. 额外:创建自定义主题实现图片行列
你还可以使用 SeedProd 创建自定义 WordPress 主题,它是一款拖放式网站构建器,提供预建主题和丰富自定义选项。在 SeedProd 中添加列区块,即可将图片排列成行和列。SeedProd 内置了画廊区块,可直接使用。

如需了解更多,可参考猫哥的指南:如何无代码创建自定义 WordPress 主题。
