如何在 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

  • 2024-07-28
  • WordPress 基础知识

WordPress主题定制器提供了出色的功能,使你无需触碰代码即可创建一个视觉上吸引人的站点。然而,导航各种自定义选项有时可能让人觉得不知所措。在这篇文章中,我们将引导你了解默认面板,并教你如何像专业人士一样使用WordPress主题定制器。

到文章结尾,你将能够使你的网站看起来更加精致和专业。

閱讀更多
  • 2024-07-26
  • WordPress 基础知识

默认情况下,WordPress会在30天后自动删除垃圾箱中的内容。然而,有些用户可能希望更频繁或手动清空垃圾箱。在本文中,我们将向您展示如何限制或禁用WordPress自动清空垃圾箱。

閱讀更多
  • 2024-07-23
  • WordPress 基础知识

您是否想在WordPress博客文章中嵌入视频?视频可以为您的网站带来活力,并且是增加用户参与度的绝佳方式。WordPress使得从YouTube、Vimeo、Facebook、Twitter等视频托管网站嵌入视频变得非常简单。在这个初学者指南中,我们将向您展示如何在WordPress博客文章、页面和侧边栏小部件中轻松嵌入视频。

閱讀更多

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