如何在 WordPress 中创建图片画廊(分步教程)

WPressize Me

08/03/2023

为什么在 WordPress 中创建图片画廊?

WordPress 使得在博客文章和页面中添加图片变得非常简单,你只需要添加“图片”块并上传图片。

但是,如果你在 WordPress 网站中添加多张图片,它们会一个接一个地显示,这样看起来不太美观,用户需要滚动很多才能看完所有图片。

创建画廊可以让你以网格布局展示图片,包含多列和多行。你可以显示图片缩略图,用户可以点击查看完整图片。这样一来,可以在更小的空间中展示更多图片,效果也更专业。

例如,如果你创建一个摄影网站来展示你的作品,添加图片画廊可以让你以更美观的方式展示作品。

方法一:使用 WordPress 块编辑器创建图片画廊

这种方法是使用 WordPress 块编辑器创建图片画廊,尽管此功能非常基础,提供的自定义选项较少。

首先,你需要打开WordPress管理侧边栏中你想要创建画廊的现有或新建文章/页面。

点击屏幕左上角的“+”按钮,然后找到并添加“画廊”块到页面或文章中。

添加“画廊”块后,点击“上传”按钮,从计算机上传新图片文件。

如果你想从媒体库上传图片,点击“媒体库”按钮。你可以一次选择多张图片,添加完所有图片后,点击“创建新画廊”按钮。

这会将你导向媒体库的“编辑画廊”页面。在这里,你可以选择单独的图片并为它们添加标题、描述或替代文本。

完成后,点击底部右角的“插入画廊”按钮。

创建的图片画廊将会被添加到 WordPress 编辑器中。你可以进一步自定义它,如调整行列数和缩略图裁剪选项。

方法二:使用 Envira Gallery 创建图片画廊(推荐)

如果你希望创建一个更具功能性和美观的图片画廊,建议使用 Envira Gallery 插件。

首先,需要安装并激活 Envira Gallery 插件。然后从 WordPress 仪表盘导航到 Envira Gallery » 设置页面,输入许可证密钥。

验证许可证密钥后,进入 Envira Gallery » 添加新页面,开始创建第一个画廊。

提供画廊标题,然后点击“从计算机选择文件”上传图片。

上传图片后,你可以点击每张图片顶部的铅笔图标,弹出“编辑元数据”提示框,为单个图片添加标题、状态和替代文本。

然后,点击左侧边栏的“配置”选项卡,改变画廊布局、懒加载、图片大小等设置。

接着切换到“灯箱”选项卡,启用灯箱功能,这样用户可以放大图片并在不离开页面的情况下浏览。

最后,点击顶部的“发布”按钮保存更改。

打开一个文章或页面,在左上角点击“+”按钮,找到并添加 Envira Gallery 块。然后,从下拉菜单中选择你的图片画廊,点击“更新”或“发布”按钮保存更改。现在你可以在 WordPress 网站上查看你的图片画廊。

优化画廊图片以提高搜索引擎排名

优化画廊图片对于提高页面加载速度、改善用户体验、提升社交媒体分享及带来有机流量非常重要。你可以通过在附件详情页面添加替代文本来优化图片。

此外,还可以使用 All in One SEO 插件,该插件提供图像 SEO 附加组件,可自动设置替代文本、图片标题、图片说明等,还会添加适当的图片站点地图和其他 SEO 功能以提高排名。



Related Posts

  • 2025-01-06
  • WordPress 基础知识

在经营网上商店时,Stripe提供了便利的支付方式,但其手续费可能会迅速累积,影响利润。在这篇文章中,我们将分享一些经过验证的策略,帮助您在不影响客户体验的情况下,减少WordPress中的Stripe交易费用。

閱讀更多
  • 2024-10-30
  • WordPress 基础知识

WordPress表单是连接访客和扩展受众的重要工具。无论是联系表单、调查问卷还是反馈表,嵌入到您网站中都是收集访客信息的快速便捷方式。我们在所有项目中都使用表单,从联系页面到新闻订阅甚至结账表单。在过程中,我们学习了嵌入WordPress表单所需的所有步骤,并将从头到尾引导您完成整个过程。

閱讀更多
  • 2024-10-16
  • WordPress 基础知识

同时运行多个网站听起来很酷, 直到你开始担心安全问题。许多用户忧心管理一个WordPress多站点可能需要花费更多时间在安全方面。这种担忧不无理由。我们见过单个弱点可以让整个网络内的每个站点面临风险。好消息是,只要采取正确的步骤,WordPress多站点是可以安全的。我们已经运行我们的多站点设置一段时间了,在本指南中,我们将分享我们试验并测试过的WordPress多站点安全提示,以帮助保护您的网络。

閱讀更多

{"email":"Email address invalid","url":"Website address invalid","required":"Required field missing"}
>