WordPress如何给一张图片的不同位置添加不同的链接-Image Hotspots

在商城中给一张图片的不同区域添加不同的链接，这种技术通常被称为 “图像映射” (Image Map) 或 “热点图” (Image Hotspots)。

最简单最适合初学者的方法就是通过插件完成，下面教大家如何操作。

这里推荐大家使用Draw Attention，这是一款非常流行的插件，不仅可以添加链接，还能实现鼠标悬停显示更多信息的效果。

• 进入 WordPress 后台 -> 插件 -> 安装插件。
• 搜索 “Draw Attention”。
• 安装并启用。

插件安装好之后，在Wordpress后台的左边就多了一个Draw Attention的选项，点击进入。

在上面起一个名称，右边再上传一张图片。

然后鼠标向下滑，有个Add Another Area的按钮，点击就可以添加区域了。

然后选择形状，将某片区域框起来。

下面再写个Title，这样访客鼠标移到上面就可以显示文字。Action选择Go to URL，URL中填写你想要访客点击跳转的页面链接。

这样一个图片热点区域就创建好了，参考上面的方法再多创建几个热点区域。

到你想要添加图片的页面，进入编辑状态，在元素中搜索Draw Attention，拖拽到你想要放置的位置。

这样访客将鼠标放到对应区域就会有文字提示，并且点击也会跳转到对应的页面。

鼠标悬浮时提示的文字颜色背景及边框可以回到Draw Attention里的Hightlight Styling设置。

上面介绍的是形状热点区设置，还有一种是单点热点区，比如下面的+号。

这用的是另外一款工具Getwid，和Stackable一样，是一款古腾堡编辑器的区块扩展工具。

到【安装插件】——搜索“Getwid”——安装并启用。

然后到要编辑的页面，进入编辑状态。搜索元素【图片热点】，把它拖拽到合适的位置。

在右边的编辑区域可以上传图片以及选择什么时候提示文字，是需要用户鼠标悬浮的时候就提示还是点击的时候。

在图中②的落点，点击一下，然后移到图上某个区域就可以创建一个热点，会弹出下面的框，你可以在里面设置标题，跳转链接等。

至于字体大小和颜色样式，还是到右边的区块里设置。

这样我们就收获了以点为热点+链接的图片。

© 文章版权归白小菌所有，🫰欢迎转发分享。未经允许请勿抄袭转载。