首页 > 文章专栏 > 正文

WordPress图片如何以列和行显示

是否想在 WordPress 中以列和行的形式展示照片?

默认情况下,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 支持多种布局,包括网格瀑布流方形,选择后即可实现行列排列。

选择画廊布局和列数

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

发布图片画廊

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

添加 Envira Gallery 区块

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

画廊预览

用户点击缩略图时,会在漂亮的灯箱弹窗中查看,无需离开页面即可浏览所有图片。

3. 额外:创建自定义主题实现图片行列

你还可以使用 SeedProd 创建自定义 WordPress 主题,它是一款拖放式网站构建器,提供预建主题和丰富自定义选项。在 SeedProd 中添加列区块,即可将图片排列成行和列。SeedProd 内置了画廊区块,可直接使用。

在 SeedProd 中添加列区块

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

文章标签:#WordPress#列和行#照片排列#画廊插件#网格布局

版权声明:本文为「猫哥建站」的原创文章,遵循 CC 4.0 BY-SA 版权协议,转载请附上原文出处链接及本声明。

本文链接:https://maogeo.top/blog/wordpress图片如何以列和行显示