今天大挖跟大家讲下如何为WordPress文章内图片添加点击放大功能,关于文章图片中的事件效果,有的是弹出放大,有的是新窗口放大,根本功能的定义略有不同,今天跟大家分享一个可以直接用wordpress插件高效解释的方案,并且支持自适应页面的结构与布局。
第一步:查找和安装Auto Highslide插件并启用。
或通过wordpress插件官方将下载Auto Highslide插件,得用FTP上传至服务器的wp-content/plugins/目录文件夹下。
第二步:启用插件后,需要设置图片添加链接
wordpress主题默认不添加链接到原图,所以需要添加一段代码,使程序为图片添加链接。
编辑主题文件夹下的 header.php ,添加下面的js代码:
1 2 3 4 5 6 7 8 9 |
<script type="text/javascript"> $(function() { $('.entry img').each(function(i){ if (! this.parentNode.href) { $(this).wrap("<a href='"+this.src+"' class='highslide-image' onclick='return hs.expand(this);'></a>"); } }); }); </script> |
第三步:将修改好的header.php覆盖上传即可。
当然如果已经默认加了图片链接的文章,可以直接跳过这个步骤,