WordPress建站

如何在 WordPress 中点击放大图片(3 种简单方法)

最后更新时间:2025年7月15日

本文作者:

你是否有过这样的经历:点击网站上的图片,以为它会放大,结果却发现它并没有放大?这虽然是一件小事,但对你的访客来说,却可能出乎意料地令人沮丧。

当人们可以点击放大图像时(无论是产品照片、博客图片还是作品集的一部分),他们往往会在您的网站上停留更长时间并参与更多活动。

我已经在几个 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:测试您的灯箱

现在,让我们通过预览帖子来测试灯箱功能。只需点击右上角的“查看”选项,然后选择“在新标签页中预览”。

新标签页打开后,点击图片。你会看到图片在一个带有深色背景的灯箱叠加层中顺利打开。

根据您的设计设置,灯箱将采用浅色或深色主题。以下是浅色主题的外观。

浅色主题用白色框架环绕照片,与深色背景形成良好的对比。

现在,黑暗主题看起来是这样的。

您还应该在灯箱的左下角看到图像标题。

我还建议您在其他屏幕尺寸上预览您的灯箱,以确保它在每个设备上看起来都很好。

您可以返回“查看”选项,选择“桌面”、“平板电脑”或“移动设备”选项。之后,点击“在新标签页中预览”。

如果您想要突出显示多张图片,那么图库插件无疑是最佳解决方案。它们可以帮助您整理和展示一系列图片,并支持图片放大功能,而且不会降低网站速度。

这些插件可以使您的内容更具吸引力和视觉吸引力,从而改善用户互动,让访问者在浏览您的图像时获得无缝的体验。

我推荐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 LightboxEnvira Gallery等插件。

如何在 WordPress 中自动调整图像大小? 

上传图片时,WordPress 会自动创建多个较小版本。为了更好地控制图片尺寸或优化速度,我建议使用像EWWW Image Optimizer这样的图片优化插件。

Envira Gallery等插件还可以让您精确控制图库中图像的显示尺寸。

如何在 WordPress 中强制图像大小?

您可以在主题中设置自定义图片尺寸。有关详细指南,请查看我们的教程,了解如何在 WordPress 中创建其他图片尺寸。这是确保您的图库和网站布局一致的好方法。

如果您更喜欢使用插件,可以考虑像Envira Gallery这样的插件。它能让您高效地指定精确的图片尺寸,从而控制图库的外观。这有助于保持您网站的整体美观。

额外资源:管理和改善您的 WordPress 图像

希望本文能帮助您在 WordPress 中添加“点击放大图片”功能。如果您对管理和改进 WordPress 图片感兴趣,以下是一些额外的指南:

WordPress独立站科普知识大全

这是我对于品牌独立站,尤其是WordPress建站的全部分享

WordPress独立站科普知识大全

这篇文章有用吗?

点击星号为它评分!

平均评分 5 / 5. 投票数: 1

到目前为止还没有投票!成为第一位评论此文章。

小兽wordpress凭借多年的wordpress企业主题制作经验,坚持以“为用户而生的wordpress主题”为宗旨,累计为10万多家客户提供品质wordpress建站服务,得到了客户的一致好评。我们一直用心对待每一个客户,我们坚信:“善待客户,将会成为终身客户”。小兽wordpress能坚持多年,是因为我们一直诚信。我们明码标价(wordpress做网站需要多少钱),从不忽悠任何客户,我们的报价宗旨:“拒绝暴利,只保留合理的利润”。如果您有网站建设、网站改版、网站维护等方面的需求,请立即咨询右侧在线客服或拨打咨询热线:18907337671,我们会详细为你一一解答你心中的疑难。

没有了,已经是最新文章

相关文章

WordPress主题模板

价格便宜(500-3000元不等),时间快, 图文内容后台自己控制。
一对一指导安装、终身免费升级。
你是新手,刚入门,就选择WordPress模板建站。

全部模板

XSbaba仿阿里国际站模板

一站式帮你打造一个高端仿阿里国际站的B2B独立站

XSwm外贸营销型主题

XSwm主题助力外贸企业快速搭建全球销售的外贸独立网站

XSmic外贸引流模板

wordpress仿make in china(中国制造)的店铺引流模板

XS2021外贸模板

颜值与内涵并重的独立站、精准的广告投放、社交媒体推广和谷歌SEO

XS2020中文模板

帮助客户以最低的成本进去互联网,并且以最快的效率去做互联网营销。

XSnm中文营销型模板

网站布局规范清晰,内容完整,营销力十足

XSzq站群模板

做最踏实、最稳定、最长效的站群系统,让客户找到你,爱上你,成交你

XSzeng企业性价比主题

简约高端企业通用产品展示WordPress主题,功能上可满足任意企业官网的使用

XShuan企业主题

SEO排名最好的wordpress企业主题,百度最喜欢的wordpress主题

XSkobe营销型主题

XSkobe帮你拥有一个媲美中联重科官网的企业网站

XSpx教育培训主题

主题功能模块丰富,可以充分展示教育培训机构的特点和功能

XStie科技主题

精致简约风格的wordpress企业模板,为科技IT公司量身打造

XStop定制型主题

wordpress企业主题制作历史以来,水平最高的一款主题。

XShw公司展示主题

面向公司官网搭建需求的中小型企业公司的WordPress企业主题

XSgr集团官网主题

打造高品质官网,设计美观大方

XSdj品牌宣传主题

结构清晰,界面简洁,核心产品展示全面,中小企业建站首选

XSdd外贸主题

wordpress外贸主题适用于任何类型的站点,本主题远低于定制一个网站的价格

WordPress模板建站常见问题

建站技术服务费用是一次性的,次年无需在我方续费。
域名与服务器均需在对应的域名和服务商按照其次年费用续费,以免造成网站无法打开的情况。
超出合同和服务范围或服务到期后,双方按照一事一价,议价合作。
准备好域名,服务器,公司介绍,产品资料,包含文字,图片,视频等。
域名和服务器是公司知识产权,你最好用自己的信息去购买,免得日后有权限问题。
在代码质量,性能,安全性,SEO和可靠性方面,我们所有的主题模板都是一样的。
所有主题,后台功能都一样(文章发布,产品发布),只是前端界面显示模块多与少的区别。
售后服务包含WordPress主题模板的使用问题,我们可以协助你安装并调试购买的WordPress主题模板,一对一售后服务,支持远程协助。
文章、产品、分类等无限添加,后期可以进行增、删、改、查。
肯定是的!在开发过程中我们非常注重搜索引擎的优化,并借助WordPress平台的SEO优势,可以不需要任何插件即可自动获取也可自定义每个页面的SEO机制。
WordPress是世界上最安全的程序,注意密码复杂度和不随意安装免费插件就能让网站安全性大大提高。
可以的,我们可以在文章中添加视频和文档。
是的,WordPress 对初学者很友好,提供直观的界面。借助预先设计的主题和插件,即使没有技术知识的人也可以建立一个功能齐全的网站。
可以签合同,提供普通发票,如需其他发票,请提前告知。

WordPress定制案例

按照你的行业属性、特点,设计符合该行业风格和需求的网站。
利于百度推广、谷歌推广,提升网站获客能力。
你有团队,有资金,你就选择WordPress定制建站。

全部案例

青岛歌尔微电子

歌尔微电子股份有限公司(Goermicro)成立于2017年10月,是歌尔股份有限公司的子公司

广州芯德科技

芯德研发设计并生产销售的产品主要包括光网络单元(ONU/ONT)、光线路终端(OLT)、语音网关(VoIP网关)等系列接入产品。

广州誉隆包装

致力于为餐饮连锁企业、超市和食品企业提供供应链管理和包装解决方案。

广州振华汽配

广州振华汽配公司多年来一直大在汽车电子零部件方面,拥有自己的研发团队跟成熟的生产技术

苏州智鑫航五金机电

专业从事线性运动工业品的集成商,主营滚轮导轨,V型导轨

苏州天瀚精密

领先的精密运动控制解决方案服务商

深圳华大基因NIFTY

华大基因作为中国基因行业的奠基者,秉承“基因科技造福人类”的愿景

醴陵陶瓷

醴陵陶瓷是生产世界级定制陶瓷餐具产品的领导者,为全球的品牌所有者、批发商和分销商提供服务

东莞绿能集团

东莞绿能集团专业从事太阳能连接器、太阳能电缆等光伏连接系统产品的研发和生产

苏州格美纳电器

苏州格美纳电器是一个提供生活创意小电器的品牌

深圳三南科技

致力于LED灯箱照明、LED室内外装饰照明、LED智能控制等产品的研发、生产、销售及服务、创新的高科技企业。

杭州通普机电

专业生产锂电自行车的企业,本公司致力于中国脚踏锂电助力自行车驱动系统、控制系统、助力系统的研发制造和销售。

醴陵市博物馆

为醴陵市文化旅游广电体育局管理的副科级公益一类事业单位

WordPress定制建站常见问题

可以签合同,提供普通发票,如需其他发票,请提前告知。
不包含域名和空间。如需代购,可以提前说明,我们提供一条龙服务。
备案制度仅仅限于服务器在大陆的主机;服务器在国外和香港等不需要备案;国内购买的com域名需要实名制才能解析。
建站技术服务费用是一次性的,次年无需在我方续费。
域名与服务器均需在对应的域名和服务商按照其次年费用续费,以免造成网站无法打开的情况。
超出合同和服务范围或服务到期后,双方按照一事一价,议价合作。
售后服务仅包含网站的使用问题,我们可以协助你安装并调试网站,一对一售后服务,支持远程协助。
肯定是的!在开发过程中我们非常注重搜索引擎的优化,并借助WordPress平台的SEO优势,可以不需要任何插件即可自动获取也可自定义每个页面的SEO机制。
WordPress是世界上最安全的程序,注意密码复杂度和不随意安装免费插件就能让网站安全性大大提高。
除开前期的沟通准备,网站定制开发上线一般要15个工作日。

制作专业WordPress网站的最快方法

使用入门模板在几分钟内创建专业设计的网站。响应式网站模板在任何设备上都具有最佳外观和性能。

  • 步骤1

    挑选wordpress主题,上传启动

    准备好服务器和域名,在服务器上安装好wordpress程序,在到纳姆网络外贸模板中心挑选适合自己的外贸模板并上传。

  • 步骤2

    无需编码,设置网站内容

    根据企业已有的文案素材,您可以使用我们易于使用的外贸模板轻松定制网站的各个方面,无需编码知识。

  • 步骤3

    阅读主题文档,设置更多功能

    更加深入的了解wordpress模板,您可以得到一对一的模板使用文档,以确保您可以逐步设置自己的WordPress网站。

  • 步骤4

    网站上线,开启外贸营销

    你的互联网资产已经建立完成,马上开始“1+N”体系的整体互联网推广吧,我们和你一起,开创互联网大未来!

如何让线上业务更上一层楼

还没有WordPress网站

还没有WordPress网站

不管你从事什么行业,WordPress都会为你提供一个专业的主题模板。在WordPress市场上有成千上万的免费主题,适合很多中小企业。

查看所有模板
已经有WordPress网站

已经有WordPress网站

小兽WordPress诚邀你一起学习WordPress,愿与各方携手升级改善您的WordPress网站,一起交流网站加速,网站优化等问题。

马上交个朋友
微信联系
chat 扫码联系
模板建站
挑选模板
网站定制
免费诊断
咨询热线
咨询热线

189-0733-7671

返回顶部