首页 » 博文 » wpbeginner » 初学指南 » 如何按列和行显示 WordPress 照片

如何按列和行显示 WordPress 照片

您想按列和行显示 WordPress 照片吗?默认情况下,WordPress 在垂直列中将图像相互叠加。但是,如果您要向博客文章中添加多张照片,那么这看起来不太干净,并且需要用户进行大量滚动。在本文中,我们将向您展示如何轻松地按列和行显示 WordPress 照片。

按行和列显示 WordPress 照片

为什么您需要按列和行排列 WordPress 照片

默认情况下,当您向 WordPress 帖子添加多个图像时,它们会彼此相邻或彼此重叠地显示。

WordPress 中照片的默认滚动显示

这看起来不太好,您的用户将不得不大量滚动才能查看多个图像和照片。

您可以通过使用基于网格的布局按行和列显示照片来轻松解决此问题。这样,图像将以紧凑的布局显示,并改善网站上的用户体验。

列和行中的照片

说了这么多,我们来看看如何按列和行显示WordPress照片。

1. 无需插件即可按列和行显示照片

此方法不需要您在网站上安装任何新插件。如果您不经常添加多张照片,那么这对您来说就很合适。

首先,您需要创建一个新帖子或编辑要在其中显示照片的现有帖子。在帖子编辑屏幕上,单击“添加媒体”按钮以启动 WordPress 媒体上传器弹出窗口。

单击添加媒体按钮在 WordPress 中上传照片

接下来,您需要上传要在行和列中显示的所有照片。上传后,您将在媒体库中看到您的照片。

在 WordPress 中创建画廊

您刚刚上传的图像将已被选择。如果您想包含任何以前上传的照片,那么您也可以通过在媒体库中单击它们来选择它们。

之后,您需要单击左栏中的“创建图库”链接,然后单击“创建新图库”按钮。

单击以创建所选照片的​​新图库

弹出窗口现在将更改为显示图库设置选项。

您可以选择列数、每个图像应链接到的位置、要显示的图像大小以及随机显示顺序。

图库设置选项

之后,您需要单击插入图库按钮,WordPress 会将图库插入到您的博客文章中。

列和行中的照片作为 WordPress 中的图库

如果您想更改列数或其他设置,那么您只需单击帖子编辑器中的照片即可。

WordPress 将选择您的图库,然后您可以单击铅笔图标来编辑您的图库设置。

编辑图库设置

就这样,您可以继续撰写帖子或保存更改。您现在可以预览帖子,以按行和列查看您的照片。

WordPress 中照片的行和列布局

这种方法对大多数初学者都有效。但是,如果您经营摄影博客或经常在网站上分享照片,那么此方法缺乏几个重要功能。

例如,照片的外观取决于您的 WordPress 主题,并且您仅限于一种特定的布局和风格。

您的图像不会在灯箱弹出窗口中打开,用户必须将它们作为新页面加载,然后单击后退按钮返回原始页面。

为了获得更专业、更美观的用户体验,您应该尝试插件方法。

2. 使用插件按列和行显示照片

您需要做的第一件事是安装并激活Envira Gallery插件。有关更多详细信息,请参阅我们有关如何安装 WordPress 插件的分步指南。

Envira Gallery 是我们的高级 WordPress 插件之一,单个站点许可证的起价为 19 美元。

激活后,您需要访问Envira Gallery » 设置页面以输入您的许可证密钥。您可以从 Envira Gallery 网站上的帐户获取此密钥。

输入 Envira Gallery 许可证密钥

现在您已准备好创建漂亮的图库。

前往Envira Gallery » 添加新页面创建您的第一个画廊。

上传照片以创建新图库

您可以从计算机中选择并上传文件,也可以从 WordPress 媒体库中选择。

上传照片后,它们将出现在下面的图库设置框中。

照片已添加到 Envira 画廊

接下来,您需要单击配置选项卡来自定义照片的显示方式。

在“图库列数”下,您可以选择照片的列数。

配置照片的列数

您还可以指定要显示的缩略图的确切大小,以及列中图像之间的间距。

之后,您可以单击发布按钮,让您的照片库准备好添加到您的 WordPress 网站中。

现在您需要编辑帖子或创建新帖子。您会注意到帖子编辑器顶部有一个新的“添加图库”按钮。

添加图库按钮

单击它将弹出一个弹出窗口,您需要在其中选择刚刚创建的图库并单击插入按钮。

插入图库

该插件现在会将图库短代码添加到帖子编辑器中。

您可以保存您的帖子并预览它,以在漂亮的移动响应式照片库中按列和行查看您的照片。

Envira Gallery 的照片栏

现在,当您的用户单击照片缩略图时,它将在一个漂亮的弹出窗口中打开。他们还可以在不离开页面的情况下浏览图像。

浏览帖子中的照片

我们希望本文能帮助您了解如何按列和行显示 WordPress 照片。您可能还想查看我们有关如何修复 WordPress 中常见图像问题的指南。

发表评论

您的电子邮箱地址不会被公开。 必填项已用*标注

Scroll to Top