今天小编在折腾WordPress主题时,非常好奇文章页中点击图片放大的效果到底是怎么做到的?
于是好奇心下驱使查了一些资料,原来也挺简单的,就2 3个文件而已,整个文件就14k大小,比在WordPress后台上装个新插件好多了。
最终效果如下图所示
![[WordPress开发]纯代码实现图片灯箱lightbox效果 [WordPress开发]纯代码实现图片灯箱lightbox效果](https://wysacg.com/wp-content/uploads/2020/04/1585387426-5125b25072249da.png)
下面详细写下使用方法。
下载文件
1、首先下载文件,在文章底部点击资源下载按钮下载图片灯箱文件。
2、然后把文件上传到主题目录,也就是/wp-content/themes这个目录,解压!
3、在主题的header.php和footer.php文件分别加载css和js:
//header.php添加下面代码 <link rel="stylesheet" href="<?php bloginfo('template_url'); ?>/plugin/css/lightbox.css" rel="external nofollow" > //footer添加下面代码 <script src="<?php bloginfo('template_url'); ?>/plugin/js/lightbox.js"></script>
注意:请确保正在使用的主题已经加载了jquery!
如果你使用的古腾堡编辑器,那么教程结束,你可以去试试图片灯箱效果了,不过记得把图片属性链接到图像。
如果你使用的是经典编辑器,那么还需要修改下js文件。
好了,今天的图片灯箱效果WordPress教程到此就结束了!