你是否有过这样的经历:点击网站上的图片,以为它会放大,结果却发现它并没有放大?这虽然是一件小事,但对你的访客来说,却可能出乎意料地令人沮丧。
当人们可以点击放大图像时(无论是产品照片、博客图片还是作品集的一部分),他们往往会在您的网站上停留更长时间并参与更多活动。
我已经在几个 WordPress 网站上设置了此功能,并且总能快速见效。
在本指南中,我将向您展示三种简单的方法,让用户在您的 WordPress 网站上点击放大图片。您无需任何编程技能,每种方法只需几分钟即可完成设置。

为什么在 WordPress 中点击图像会放大?
让访问者点击放大 WordPress 网站上的图像有助于他们近距离查看重要细节。
这是一个简单的升级,增加了一种精致、专业的感觉,特别是对于投资组合、房地产清单和摄影画廊。
此外,它对于在线商店来说也很方便,因为客户希望在决定购买之前仔细查看您的产品。
WordPress 默认包含一个基本的“点击放大”功能。它会直接在页面上打开图片,不会有任何背景变暗或其他视觉效果。
这对于简单的博客或内部页面来说很好,但它看起来有点简单并且没有提供太多的控制。
如果您想要一些看起来更现代、更精致的东西,那么图像灯箱插件是更好的选择。
它并非简单地扩展图像,而是以光滑的叠加层打开,背景变暗,从而保持观看者的注意力。您还可以更好地控制图像的外观和功能。
在我向您展示这些不同的方法之前,还有一件事需要注意:图像质量。当用户点击放大照片时,他们期望看到清晰的高分辨率版本。但是,较大的图像文件会降低网站速度。
这就是图像优化的作用所在。通过压缩图像而不降低其可见质量,您可以保持较小的文件大小并提高网站的速度。
这意味着您可以使用大尺寸(如 1500px 宽)的图像,放大后看起来很棒,而不会影响性能。
如需帮助,请查看我们的指南,了解如何优化网络图像。
在本文中,我将分享 3 种不同的方法,可以在单击时放大您的 WordPress 图像,其中包括一些灯箱选项。
方法 1:使用默认 WordPress 功能(简单)
在测试了不同的放大图像的方法之后,我发现 WordPress 的内置功能非常适合简单的需求。
我在创建文档或撰写技术文章时使用过这种方法。当你需要读者查看屏幕截图中的小细节或更仔细地查看图像的特定部分时,这种方法尤其有用。
它最大的缺点是它不是真正的灯箱。它只是放大了图像,而且你无法自定义外观或添加酷炫的效果。
步骤 1:在 WordPress 编辑器中添加图片
首先,您需要创建或打开要添加可点击图像的帖子。
然后,在区块编辑器中,点击 (+) 图标添加新区块,并从区块选项中选择“图片”。完成后,您将看到三种添加图片的按钮:上传、媒体库或从 URL 插入。

我们始终使用“媒体库”选项。这确保了我们添加到图片的标题和替代文本在其他文章中重复使用时仍然可用。
我建议避免使用“从 URL 插入”功能。它会链接到另一个网站上的图片,这意味着如果原始图片被删除,你网站上的图片可能会失效。
第 2 步:设置“点击放大”选项
将图像添加到帖子或页面后,您可以单击它来显示图像设置。
选中图片后,点击区块工具栏中的“插入链接”图标。在出现的设置中,勾选“点击放大”选项即可。

步骤3:配置图像设置
现在您已启用点击放大功能,您可能希望自定义原始图像的设置,以确保您的帖子或页面中的最佳显示质量。
选择您的图像,然后检查屏幕右侧的块设置面板。

您可以通过调整图片尺寸来控制图片在页面上的显示效果。不过,这只是显示尺寸。
当访客点击图片时,他们将看到您上传到媒体库的原始全分辨率图片。因此,请确保上传至少 1500 像素宽的高质量图片。
步骤 4:预览图像 并发布内容
在发布启用“点击放大”图像选项的帖子或页面之前,您需要预览它以确保其正常工作。
为此,请单击编辑器右上角的“查看”按钮,然后选择“在新选项卡中预览”。

我建议您在每个视图选项中进行测试,尤其是“移动”,因为现在很多人都使用智能手机。
应用“点击放大”图片效果后,图片应该会在同一页面上放大,如下例所示。放大的程度取决于您上传的原始图片的大小。
只需单击图像即可将其恢复为正常大小。
一旦一切看起来不错,您就可以发布或更新您的内容。
方法 2:使用 Lightbox 插件(更多自定义)
与 WordPress 的基本功能不同,灯箱插件能够带来更专业的体验。当用户点击图片时,它会以时尚的叠加层打开,使页面的其余部分变暗,从而使图片更加醒目。
我推荐免费的Simple Lightbox插件,因为它可以添加流畅的动画、可自定义的主题和幻灯片功能,让你的图片脱颖而出。它非常轻量,激活后会自动处理所有图片。
步骤 1:安装并激活 Simple Lightbox 插件
首先,您需要安装并激活Simple Lightbox插件。

如果您需要此过程的帮助,请阅读我们关于安装 WordPress 插件的指南。
步骤 2:配置简单灯箱设置
激活插件后,最好前往外观»灯箱并检查其设置,以确保一切都按照您想要的方式设置。
在这里,您可以找到灯箱设置,用于调整要启用灯箱功能的位置。可以是主页、单个帖子、页面等等。

我通常坚持使用默认设置,因为它们对大多数网站都很有效。
接下来,向下滚动到“UI”设置。这些设置控制灯箱的外观和感觉。

默认情况下,该插件将使用浅色主题,但您可以根据需要切换到深色模式。您还可以调整“叠加不透明度”,该值控制打开图像时背景页面的暗淡程度,并启用动画来更改图像的打开方式。
请随意使用这些设置,完成后不要忘记单击“保存更改”。
步骤 3:添加图片并启用灯箱
现在,让我们测试一下灯箱功能。只需创建或打开一篇帖子,然后添加一张图片即可。
将图片导入编辑器后,您需要添加标题。Simple Lightbox 插件会在 Lightbox 视图中显示此文本。
只需点击图片,并确保工具栏中的“添加标题”图标已激活。这样您就可以在图片下方的“添加标题”文本字段中输入内容。

如果您不添加标题,插件将自动使用媒体库中的图片标题。不过,我发现使用标题字段可以更直接地控制。
接下来,在图片仍然被选中的情况下,点击工具栏中的“链接”图标,并选择“链接到图片文件”选项。这是让 Simple Lightbox 插件正常工作的关键步骤。

完成此操作后,当访问者点击图像时,插件将自动检测链接并应用其灯箱效果。
💡 注意:您也可以将简易灯箱用于整个图库。只需使用块编辑器创建一个图库,然后按照此方法中描述的步骤将灯箱功能添加到每张图片即可。
步骤4:测试您的灯箱
现在,让我们通过预览帖子来测试灯箱功能。只需点击右上角的“查看”选项,然后选择“在新标签页中预览”。

新标签页打开后,点击图片。你会看到图片在一个带有深色背景的灯箱叠加层中顺利打开。
根据您的设计设置,灯箱将采用浅色或深色主题。以下是浅色主题的外观。

浅色主题用白色框架环绕照片,与深色背景形成良好的对比。
现在,黑暗主题看起来是这样的。

您还应该在灯箱的左下角看到图像标题。
我还建议您在其他屏幕尺寸上预览您的灯箱,以确保它在每个设备上看起来都很好。
您可以返回“查看”选项,选择“桌面”、“平板电脑”或“移动设备”选项。之后,点击“在新标签页中预览”。

方法 3:使用图库插件(最适合多张图片)
如果您想要突出显示多张图片,那么图库插件无疑是最佳解决方案。它们可以帮助您整理和展示一系列图片,并支持图片放大功能,而且不会降低网站速度。
这些插件可以使您的内容更具吸引力和视觉吸引力,从而改善用户互动,让访问者在浏览您的图像时获得无缝的体验。
我推荐Envira Gallery,因为它能让你创建精美、可自定义的图库,在任何设备上都能完美呈现。而且它对新手也非常友好。
此外,它还包含延迟加载等性能功能,确保您的图库不会拖慢网站速度。其 AI 工具可帮助您直接在 WordPress 中创建自定义图像。
最重要的是,该插件提供了灯箱设置,其中包含大量自定义选项。这样,您就可以享受点击放大图片功能的所有优势,以及一些炫酷的布局、图库过渡效果等设置。
想要进一步了解该插件的功能吗?我们之前已经对其进行了广泛的测试,您可以查看我们完整的 Envira Gallery 评测以获取更多信息。
📝 注意:虽然Envira Gallery 有免费版本,但我推荐使用专业版,因为它具有 SuperSize 灯箱、Envira AI 和社交共享工具等高级功能。
现在,让我们了解使用 Envira Gallery 添加灯箱功能的步骤。
步骤 1:安装并激活 Envira Gallery 插件
让我们首先在您的网站上安装插件。在本教程中,我将使用免费版本,或者您也可以从Envira Gallery 网站购买专业版许可证。

接下来,按照我们的WordPress 插件安装指南进行安装并激活。激活插件后,Envira 的安装向导将立即启动。
从这里单击“开始”按钮即可开始该过程。

此向导共有 5 个步骤。
在设置过程中,您可以选择描述您的业务或网站的类别(如摄影师或企业主)并选择您想要添加的图库功能。

我建议继续使用建议的默认设置,因为它们通常能够满足您的所有需求。但是,如果您拥有专业版套餐,则可以激活更多高级功能。
请记住,“灯箱”选项应该已经被选中,因此此功能将自动启用。
完成设置向导后,如果您已购买专业版许可证,仍需激活。请前往Envira Gallery » 设置,并在字段中粘贴您的许可证密钥。然后点击“验证密钥”。

第 2 步:创建新图库
要创建您的第一个画廊,请转到仪表板中的Envira Gallery » Add New 。
首先,在页面顶部添加一个标题。我建议给它起一个清晰易懂的名称,这样以后更容易跟踪。
接下来,您会注意到 3 个添加图像的选项:原生 Envira Gallery、来自其他来源的画廊和使用 Envira AI 创建。

我建议从 Native Envira Gallery 开始。这是直接上传你自己的图片最直接的方式。
💡 需要快速获取原始图像?您还可以使用 Envira AI 创建自定义图像。此功能可让您轻松按需生成独特的图像。您只需创建简短的图像描述,从结果中挑选,然后一键将其添加到您的图库即可。
继续选择您想要添加的图片。您可以添加任意数量的图片,但最大上传文件大小不得超过 256 MB。
步骤 3:配置图库和灯箱选项
在图库图像左侧的菜单中,您会找到 Envira 的图库设置。

这里有常规配置、灯箱功能、移动设置等选项卡。让我们逐一了解一下。
您可以在“配置”部分的顶部选择画廊布局。网格布局适用于大多数画廊,但您也可以尝试其他选项。

向下滚动,您可以找到更多图库设置选项。
例如,您可以启用延迟加载、设置自动布局以及添加图库描述。

例如,您可能希望设置自动布局,以确保您的画廊看起来整洁有序,而无需付出额外的努力。
💡 专业提示:我建议启用延迟加载选项。此功能仅在访客向下滚动页面时加载图片,从而加快图库的加载速度。它还能优化您的网站速度。
接下来,切换到“灯箱”标签页。请记住,此功能默认启用,但如果未启用,请勾选“启用灯箱?”旁边的复选框。

然后,您需要选择“画廊灯箱主题”。这将决定灯箱的整体外观。
您的选项取决于您的 Envira 套餐以及您是否拥有 Gallery Themes 插件。不过,您应该可以选择深色、浅色或旧版主题。
在“灯箱”选项卡的下方,您可以选择放大图像的显示方式、选择过渡效果以及决定是否显示图像标题。
然后,您可以在页面的后半部分找到更多灯箱设置。
例如,您可以启用导航箭头、图片无限循环或超大尺寸模式。您甚至可以为用户打开、关闭图库以及点击浏览图库时添加炫酷的效果。
例如,对于“灯箱过渡效果”,您可以选择有趣的选项,如淡入淡出、滑动、圆形、管状、旋转等。
接下来,我建议转到“移动”选项卡来配置常规和灯箱设置。
可能通过手机而不是电脑查看您图库的人更多,因此我们要确保它在小屏幕上也能显示得很好。
除了为移动设备激活灯箱功能外,您还可以自定义特定于移动设备的设置,例如灯箱尺寸、行高以及标题或标题显示。
向下滚动时,您会发现更多选项,包括向上滑动关闭、图库导航箭头、缩略图等功能。
最后,“独立”和“杂项”选项卡有一些您可能会觉得有用的额外设置。
“独立”选项卡可让您为图库分配专属 URL。如果您想分享指向特定作品集或相册的直接链接,此功能非常有用。
“杂项”选项卡包含用于导入和导出图库的工具,但您现在可能不需要这些工具。
要深入了解所有这些设置,您可以查看有关如何创建图像库的详细指南。
步骤 4:预览并发布您的图库
要预览图库,请单击图库设置页面右侧的“预览”按钮。
进入预览页面后,单击不同的图像来测试灯箱效果。
在这里,您可以看到图像的名称和图库的其余部分。
测试图库时,图片应该可以流畅打开。如果您选择了过渡效果,应该可以在这里看到。
例如,我设置了幻灯片过渡效果,它看起来是这样的。
要在图像之间导航,请单击屏幕两侧的导航箭头或使用键盘上的箭头键。
此时,您可能需要确保导航箭头正常工作,并且如果启用了导航箭头,则图像标题可以正确显示。
一旦您对一切运作感到满意,您可以通过点击画廊设置右侧的“发布”按钮来发布画廊。
发布图库后,您可以继续将其添加到您的网站。
步骤5:将图库添加到您的网站
现在您的图库已完美运行,让我们将其添加到帖子中。
进入 WordPress 编辑器后,点击 (+) 图标添加新区块,并搜索“Envira Gallery”。然后将区块拖到你的帖子上。
接下来,点击“搜索图库”下拉菜单,选择您刚刚创建的图库。它将自动插入到帖子中,并包含您刚刚配置的所有设置。
或者,您可以使用短代码将您的图库添加到页面、小部件或自定义帖子类型。
您可以在图库设置的右侧栏的“发布”按钮下方找到此短代码。
有关更多信息,请参阅有关如何在 WordPress 中添加短代码的指南。
在单击“发布”按钮之前,请确保最后一次预览您的帖子,以确保图库完全按照您的要求显示。
现在,您的图像应该以专业的网格布局显示,单击时具有平滑的灯箱效果。
关于在 WordPress 中放大图像的常见问题解答
以下是有关在 WordPress 中放大图像的一些常见问题。
如何在 WordPress 中放大图像?
您可以使用 WordPress 默认的“点击放大”功能来实现基本功能。如果需要更多控制,您可以使用Simple Lightbox或Envira Gallery等插件。
如何在 WordPress 中自动调整图像大小?
上传图片时,WordPress 会自动创建多个较小版本。为了更好地控制图片尺寸或优化速度,我建议使用像EWWW Image Optimizer这样的图片优化插件。
Envira Gallery等插件还可以让您精确控制图库中图像的显示尺寸。
如何在 WordPress 中强制图像大小?
您可以在主题中设置自定义图片尺寸。有关详细指南,请查看我们的教程,了解如何在 WordPress 中创建其他图片尺寸。这是确保您的图库和网站布局一致的好方法。
如果您更喜欢使用插件,可以考虑像Envira Gallery这样的插件。它能让您高效地指定精确的图片尺寸,从而控制图库的外观。这有助于保持您网站的整体美观。
额外资源:管理和改善您的 WordPress 图像
希望本文能帮助您在 WordPress 中添加“点击放大图片”功能。如果您对管理和改进 WordPress 图片感兴趣,以下是一些额外的指南:
- 最佳 WordPress 图像压缩插件比较
- 如何在WordPress中创建幻灯片支持图片和视频
- 如何在WordPress页面中添加图片(jpg、png、gif)
- WordPress一键生成海报功能(图片分享带二维码)
- 2023年最佳 WordPress图片优化插件有哪些
这是我对于品牌独立站,尤其是WordPress建站的全部分享

我写了份一万多个字的Wordpress 建站指南