如何在WordPress中为图像添加放大缩放

您想为WordPress中的图像添加类似亚马逊的放大缩放吗?添加缩放功能将允许用户查看他们在正常大小的图像中看不到的细节。在本文中,我们将向您展示如何在WordPress中轻松为图像添加放大缩放。

d4b7351651da59c8fc3fb8789d016cb9.png

 为什么要为图像添加放大缩放?

在您的WordPress网站上添加放大缩放功能将使访问者能够清楚地查看图像的复杂细节。

如果您有摄影网站,那么添加放大功能将允许用户放大您的照片以查看更精细的细节。

同样,如果您经营在线商店,那么您的客户将能够放大产品图像。

许多大型电子商务网站已经对产品图像使用放大缩放。它允许客户检查产品并在您的商店中创造更好的购物体验。

 如何在WordPress中为图像添加放大缩放

首先,您需要安装并激活WP图像缩放插件。

我们将在本教程中使用免费版本,但如果您想要更多自定义选项,您可能需要查看 WP 图像缩放专业版。

激活后,您需要从WordPress管理侧边栏转到WP图像缩放»缩放设置页面。

接下来,您需要通过切换到“缩放设置”选项卡并选择要使用的镜头形状来配置缩放效果设置。

55a0c98d9d49cec6c9ec1f5f56ad10ec.png

您可以选择圆形、方形和缩放窗口镜头形状。如果您不想使用形状来获得放大效果,您甚至可以选择“无镜头”(⨯)选项。

选择首选镜头后,您需要向下滚动到下一步,您可以在其中使用所选镜头预览图像以查看其工作原理。该插件有一个预览图像,可用于测试更改。

58c940d4a7a184ad3b89c0b90f871544.jpeg

接下来,您需要切换到“常规' 标签。

从这里,您可以选择光标类型,设置动画效果,启用鼠标悬停或鼠标单击时的缩放,以及定义缩放级别。

如果您想要更多选项,某些功能仅适用于 WP 图像缩放插件的专业版。

12dfab52449ec138364aee2bdff13be1.png

做出相应选择后,只需从顶部转到“镜头”选项卡即可。

如果您在步骤 1 中选择了“圆形”或“方形”镜头,您现在可以配置镜头尺寸、镜头颜色、镜头边框选项等设置。

0722b43a748bca750dcd02d723054224.png

如果您选择了变焦窗口镜头,则需要切换到“变焦窗口”配置选项卡。

从这里,您可以更改缩放窗口的宽度和高度、定位、与主图像的距离、边框颜色等。

be55fe366096d52db52582417b89c5e4.png

接下来,您只需单击“保存更改”即可存储您的设置。

之后,您所要做的就是配置一些常规设置。

1bc2dcf739b8908539f9df63c939f638.png

配置常规插件设置

接下来,您需要切换到插件设置下的常规设置选项卡。

从这里,您现在可以启用缩放WooCommerce产品图像,缩略图,移动设备,附件页面,产品类别页面等功能。

您需要做的就是选中这些选项旁边的框。

31fb265d9dc5a7aea2984da9d77a234d.png

您还可以删除灯箱效果,以便用户可以平滑缩放图像。

但是,您需要插件的专业版才能使用此功能。

dd363729a31bb95b605f89ce5d90a86b.png

如果您不打算删除图像的灯箱,则需要向下滚动到“在灯箱内启用”选项并选中旁边的框。

注意:您可以查看支持的灯箱,以确保缩放在您网站上的灯箱内正常工作。

6c4ce0136046251f80eacbe018db5a51.png

完成设置调整后,不要忘记单击“保存更改”按钮以存储您的设置。

现在将为WooCommerce产品启用放大缩放。

您可以访问您的在线商店以查看我们的缩放功能。

4afb4bbdc9317e4377310f00edfb7c3b.jpeg

但是,如果您想为 WordPress 帖子和页面上的图像启用缩放,则需要按照以下步骤操作。

第 3 步。在块编辑器中为图像启用放大缩放

默认情况下,不会为帖子和页面上的图像启用放大缩放。您需要在将图像添加到内容后手动执行此操作。

首先,您需要在块编辑器中打开要编辑的帖子。

接下来,您需要将图片从媒体库或计算机上传到该帖子。

完成此操作后,只需单击图像即可打开屏幕右上角的“块设置”面板。

从这里,只需转到“样式”选项卡,然后单击“使用缩放”按钮即可将放大缩放应用于您的图像。

570cd90c7ebea42ff0acb689be357155.jpeg

之后,只需单击顶部的“更新”或“发布”按钮即可存储您的设置。

缩放功能在您的网站上将如下所示:

4efa1dac16e990ca66bc141d7d463af7.jpeg

注意:每次要向单个图像添加缩放效果时,都需要重复此步骤。

我们建议使用高质量的图像,以使缩放功能看起来很棒。高质量的图像通常文件大小较大,加载时间更长,这将影响您的网站速度和性能。

要解决此问题,您需要在将图像上传到WordPress之前针对网络优化图像。

6ba04ae0c0e8f726a57d374f66c72126.png

评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值