所有分类
  • 所有分类
  • WP插件Pro
  • HTML模板
  • 微信小程序模板
  • 源码

如何按列和行显示 WordPress 照片

您想按列和行显示 WordPress 照片吗?

默认情况下,WordPress 在垂直列中将图像相互叠加。但是,如果您要向博客文章中添加多张照片,那么这看起来不太干净,并且需要用户进行大量滚动。

在本文中,我们将向您展示如何轻松地按列和行显示 WordPress 照片。

如何按列和行显示 WordPress 照片

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

默认情况下,当您将多个图像添加到WordPress 博客文章中时,它们会彼此相邻或彼此重叠地显示。

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

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

如果您有一个摄影网站,那么您可以以更具吸引力的方式展示您的作品集。或者,您可以通过以行和列的方式显示在线商店上的更多产品图像。

话虽如此,我们来看看如何手动或使用 WordPress 插件在列和行中显示 WordPress 照片。只需单击下面的链接即可跳至您喜欢的部分。

  • 无需插件即可按列和行显示照片
  • 使用插件按列和行显示照片
  • 奖励:创建带有图像列和行的自定义主题

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

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

您可以手动将图像添加到列块或使用 WordPress 中的默认图库块。

将图像添加到列块

首先,您需要创建一个新帖子或编辑要在其中显示照片的现有帖子。进入内容编辑器屏幕后,单击“+”按钮添加列块。

添加列块

接下来,您可以选择所需的列数及其布局。

例如,您可以选择 50/50 比例、33/66 比例、25/50/25 比例等。

选择列比例和布局

之后,您可以向每列添加图像块。

只需单击“+”按钮并选择“图像”块即可。

将图像块添加到列

接下来,您需要将图像添加到块中。

您可以单击“上传”按钮从计算机添加图像,或选择“媒体库”选项以使用现有图片。

将图像上传到列块

媒体库打开后,只需选择您喜欢的图像并单击“选择”按钮即可。

图像优化最佳实践之一是向图像添加替代文本。这使得搜索引擎机器人能够理解您的图片并将其显示在图像搜索结果中。

从媒体库中选择图像

您现在应该在其中一列块中看到您的图像。

现在,您可以对列中的其他块执行相同的操作并添加更多图像。

将更多图像添加到列块

在图库块中添加图像

WordPress 还提供了一个默认的图库块,您可以使用它来按列和行显示图像。

首先,单击“+”按钮并在内容编辑器中添加一个图库块。

在内容编辑器中添加图库块

接下来,您需要上传图像或从媒体库中进行选择。

在本教程中,我们将选择“媒体库”选项。

上传或从媒体库中选择图像

从中,只需选择您想要添加到图库的图像并以行和列的形式显示它们。

选择图像后,单击“创建新图库”按钮。

单击创建新图库按钮

接下来,WordPress 会要求您输入每个图像的标题并重新排列图片的顺序。

完成此操作后,只需单击“插入图库”按钮即可。

插入您的画廊

您现在应该在图库块中看到您的图像。

您可以通过单击右侧“设置”面板中的滑块来调整行数。

调整图库中的列设置

完成后,只需发布​​您的帖子即可查看列和行中的图像。

只需访问您的网站即可查看它们的实际效果。

手动将图像分列

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

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

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

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

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

在列和行中添加照片的最佳插件是Envira Gallery。它是最受欢迎的WordPress 画廊插件,非常易于使用并提供很多功能。

首先,您必须安装并激活 Envira Gallery 插件。

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

添加 Envira Gallery 许可证密钥

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

只需从 WordPress 仪表板前往Envira Gallery » Add New即可创建您的第一个画廊。

添加新画廊

首先,您需要在顶部输入画廊的名称。在这里,您可以从计算机中选择并上传文件,也可以从 WordPress媒体库中选择。

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

查看图库中的图像

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

Envira Gallery 允许您选择不同的画廊布局。要按行和列显示图像,您可以选择网格、梅森和方形布局。

选择画廊布局和列数

选择布局后,您可以单击“图库列数”下拉菜单,然后选择要显示的列数。

如果向下滚动,您将看到更多用于自定义图库的选项。例如,有一些设置可以编辑图库的尺寸和大小。

发布您的图片库

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

现在,您需要编辑帖子或创建新帖子。进入内容编辑器后,只需单击“+”按钮即可添加“Envira Gallery”块。

添加 Envira 画廊区块

从这里,您可以单击下拉菜单并选择您之前创建的图库。

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

画廊预览

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

奖励:创建带有图像列和行的自定义主题

您还可以创建自定义 WordPress 主题,其中包含用于在列和行中添加图像的占位符。

创建自定义主题的最佳方法是使用SeedProd。它是最好的拖放网站构建器,提供预构建主题和大量自定义选项。

您可以使用 SeedProd 将列块添加到着陆页设计中,并将图像添加到行和列中。SeedProd 甚至附带了一个内置的 Gallery 块,您可以使用它来实现此目的。

在 SeedProd 中添加列块

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

资源下载
下载价格免费
主题都带数据,跟演示站一样,100%纯净,正版可商用

原文链接:https://www.itaoda.cn/blog/14094.html,转载请注明出处。

0
使用和安装有任何问题
请加客服QQ:1442071397 或wechat:pufei889


免责声明

本站所发布的部分内容自网络,该部分内容限用于学习和研究目,有版权问题的,下载后的24个小时之内,从您的电脑中彻底删除。且不得将用于商业或者非法用途,否则,一切后果请用户自负,与本站无关。

评论0

请先
没有账号?注册  忘记密码?

社交账号快速登录

× 发送
微信扫一扫

温性提示

演示站服务器在国外,网站打开速度有点慢,请耐心等待

多功能、多行业外贸商城 wordpress商城WOOCOMMERCE

23+
行业模板