纯代码实现WordPress网站点击图片放大灯箱效果(Fancybox/lightbox)

为什么我们要让网站图片点击后自动放大?很多时候,我们插入文章、页面中的图片因为尺寸或其他原因,图片是不太清晰的,尤其是截图。这样读者在观看的时候,体验会非常差。特别是有些教程中的图片,本来图片中的文字很小,如果图片还不是很清晰,教程的效果就会打折扣。实现图片点击放大功能,方法有很多种,有添加代码的,也有插件的。本着能不用插件就不用插件的原则,尽量还是用代码实现功能。本文主要分享如何实现这种fancybox/lightbox灯箱效果,点击WordPress网站上所有图片都可以自动放大。我们需要在3个地方增加代码:

wordpress点击图片自动放大

1、主题页眉header.php文件中添加以下代码,位置在</header>之前

/**图片放大,页头head代码**/
<link rel="stylesheet" href="https://cdn.jsdelivr.net/gh/fancyapps/fancybox@3.5.7/dist/jquery.fancybox.min.css" />
wordpress图片放大header代码

2、主题页脚文件footer.php中添加以下代码,位置在</body>之前

/**图片放大,页脚footer代码**/
<script src="https://cdn.jsdelivr.net/gh/fancyapps/fancybox@3.5.7/dist/jquery.fancybox.min.js"></script>
wordpress图片放大footer代码

3、在子主题函数文件functions.php中添加以下代码,位置任意

建议1:在子主题functions.php中添加,避免主题升级后覆盖消失,就要重新添加代码
建议2:在代码管理插件Code Snippets中添加,同样也是避免主题升级导致代码被覆盖,需要重新添加

/**Fancybox图片自动放大功能代码,添加到functions.php**/
add_filter('the_content', 'fancybox');
function fancybox($content){
$pattern = array("/<img(.*?)src=('|\")([^>]*).(bmp|gif|jpeg|jpg|png|swf)('|\")(.*?)>/i","/<a(.*?)href=('|\")([^>]*).(bmp|gif|jpeg|jpg|png|swf)('|\")(.*?)>(.*?)<\/a>/i");
$replacement = array('<a$1href=$2$3.$4$5 data-fancybox="gallery"><img$1src=$2$3.$4$5$6></a>','<a$1href=$2$3.$4$5 data-fancybox="images"$6>$7</a>');
$content = preg_replace($pattern, $replacement, $content);
return $content;
}
wordpress图片放大functions代码

总结

这种方法实现起来还是比较简单的,复制代码的时候,注意空格,以及添加代码的位置。注意,这种方法添加在主题文件header.php、footer.php、functions.php中的代码会随着主题升级更新而覆盖,就需要重新添加。为了网站速度和安全考虑,虽然能不用插件就不用插件,但是仍然建议安装1个代码管理插件,来管理所有代码,比如免费的code snippets等。插件添加代码的方法推荐参考:

如何避免WordPress主题更新重复手动添加自定义代码
Code Snippets教程-最好用的WordPress网站自定义代码管理插件

本文作者:自由超
本文标题:《纯代码实现WordPress网站点击图片放大灯箱效果(Fancybox/lightbox)》
本文链接:https://zyc420.com/1089.html
发布日期:2021年01月23日 22:52:03
更新日期:2024年03月06日 20:45:08
版权声明:除特殊注明,均为作者原创内容,遵守CC-BY-NC 4.0版权协议,转发请保留原文链接!
免责声明:文中如涉及第三方资源,均来自互联网,仅供学习研究,禁止商业使用,如有侵权,联系我们24小时内删除!
分享给更多人